srcsetとpictureの使い方(レスポンシブ画像指定)はこれでOK。ブログメモ デザイナー、コーチ、ディレクター|井川

igawa design.

Memo

srcsetの使い方(レスポンシブ画像指定)はこれでOK。

です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。

srcsetとsizesが効かない? の原因。

以前、「srcsetとsizesがうまく表示され、かつValidになる方法。」というメモを書いていた。

その時は、原因はわからなかったが対処方法はわかったので、とりあえず解決用として以下のHTMLコードを記載した。

解決した記述コード。

<picture>
 <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
 <source media="(min-width: 800px)" srcset="elva-800w.jpg">
 <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

出典:MDN, GitHub

これで、デバイスの幅が800px以上か、800px未満かで、画像の切り替えができる。

これを、モバイルファーストにするためには、「<img src=”elva-800w.jpg”〜の部分は、「<img src=”elva-480w-close-portrait.jpg”〜」となる。

モバイルファーストのコード例。
<picture>
 <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
 <source media="(min-width: 800px)" srcset="elva-800w.jpg">
 <img src="elva-480w-close-portrait.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

pictureタグで、sourceタグとimgタグを囲み、srcsetはsourceタグの方に指定すれば良い。

より噛み砕けば、下記の記述となる。

<picture>
 <source media="(max-width: 799px)" srcset="xxxxx">
 <source media="(min-width: 800px)" srcset="xxxxx">
 <img src="xxxxx" alt="xxxxx">
</picture>

「xxxxx」の部分には画像ファイル名や画像ファイルへのパスと、altの値(画像の代替テキスト)を入れると良い。

  • 例) 「srcset=”xxxxx”」 = 「srcset=”elva.jpg”」
  • 例) 「img =”xxxxx”」 = 「img=”elva.jpg”」
  • 例) 「alt=”xxxxx”」 = 「alt=”Chris standing up holding his daughter Elva”」
  • 例) 「alt=”xxxxx”」 = 「alt=”クリスは彼の娘エルバを抱いて立ち上がった”」

<img src= 「xxxxx」〜には、モバイルファーストとして小さいデバイス用の画像ファイル名や画像ファイルへのパスを入れる。


imgタグの中に書いたsrcset属性は?

ブラウザによっての違い。

ただ、それ以来、pictureやsource要素を使っていない、過去に作ったサイトのsrcsetとsizes属性での画像の挙動が気がかりだった。

普通の人は全く気にしない部分だが、HTMLのソースコードを見る人には、このコードってダメじゃん!となってしまう可能性がある。

常に完璧なValidなコードを書こうとは(作業時間的に)思ってはいないが、なるべくはvalidにしたい。

レスポンシブ対応。

その原因が、なぜ意図通りにレスポンシブな画像振り分けとならないのかが、判明した。

img要素の属性であるsrcsetとsizesは、ブラウザによって挙動が違っていた

MDNのサイトには、レスポンシブデザイン用の画像指定のサンプルソースコードとして、下記の方法も記載されている。こちらはpicture要素もsource要素も使っていない。おそらく、元々はこちらの方がスタンダードだと思われていた書き方ではないだろうか。

<img srcset="elva-fairy-320w.jpg 320w,
 elva-fairy-480w.jpg 480w,
 elva-fairy-800w.jpg 800w"
 sizes="(max-width: 320px) 280px,
 (max-width: 480px) 440px,
 800px"
 src="elva-fairy-800w.jpg" alt="妖精の衣装を着たエルバ">

参考:レスポンシブ画像 – ウェブ開発を学ぶ | MDN

2022年12月現在では少しコードが更新されている。

ただし、上記の書き方はMacのChromeやSafariでは機能しない(ブラウザ幅を狭めても大きサイズが表示される)。

が、Firefoxでは画像は切り替わっており、そして最も肝心なiPhoneのSafariではきちんと機能していた。

スマホ用の小さな画像、つまり軽くて表示速度が速い画像、が表示されていたので、実際には問題はない。

パソコン上での確認作業だけでは判断できなかった。

今年の3月は時間が取れなく、iPhone実機での確認はしていなかったので、気がつかなかった。


srcsetがうまくいかない原因はブラウザの挙動、仕様。

想定外のブラウザ起因。

かつてInternet Explorerには散々苦しめられていたが、最新版のMac用のChromeやSafariでも起こるのは、正直想定外だった。

iPhoneのSafariでは大丈夫だったので結果オーライなのだが、制作時に毎回毎回iPhoneを確認するのはコスパが悪すぎる。

コスパは大切。

結論としては、srcsetはこの(上記の)書き方が効率的。

この記述方法でOK。

<picture>
 <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
 <source media="(min-width: 800px)" srcset="elva-800w.jpg">
 <img src="elva-480w-close-portrait.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

出典:MDN, GitHub

このコードであれば、ソースコード的にもPCやスマホなどの実機でも問題なく、モバイルファーストにもなる。

そして、、、

sizes属性は必須ではなかった。

srcとaltを変えればこのままコピペで使用可能。ブレイクポイントも変更可能です。

幸運を。

当サイトはポートフォリオなので作業負担軽減のためsrcsetは使用していませんが、お客さまのサイト、クライアントサイトでは実装しております。挙動も確認済みです。

関連メモ:srcsetとsizesがうまく表示され、かつValidになる方法。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    免責事項について

    • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお問い合わせやお客さま対応のみでの利用とさせていただいております。
    • こちらから営業目的でご連絡することはありません。
    • ご本人様の了解や、法に基づいた理由がない限り、第三者へ開示することはありません。