【htmlコーディング】srcsetとは？レスポンシブに画像を切り替えるsrcsetを使用して失敗した体験談

今回は、レスポンシブに画像を切り替えるsrcsetを使用して失敗した体験談をご紹介します。

srcsetとは

srcsetとは、imgタグとpictureタグ内のsourceタグで使用するもので、条件によって画像を切り替えることができます。

以前ご紹介したpictureタグで画像を切り替える方法と似ています。

→【htmlコーディング】レスポンシブに画像を切り替えられるpictureタグが便利！

ただ、pictureタグと切り替える条件が違い、意図しない表示になってしまい失敗したことがありました。

切り替えの条件

pictureタグの切替の条件は、ウインドウサイズを指定して、そのサイズであればこの画像を表示させるという、ウインドウサイズが条件になりますが、srcsetの場合、デバイズの解像度が条件になります。

<!-- pictureタグ -->
<picture>
    <source srcset="画像のパス1" media="(min-width: 1000px)"> <!-- 幅1000px以上なら表示 -->
    <source srcset="画像のパス2" media="(min-width: 700px)"> <!-- 幅700px以上なら表示 -->
    <img src="画像のパス3" alt="" /> <!-- 上記以外なら表示 -->
</picture>

<!-- srcset -->
<img srcset="画像のパス1 1x , 画像のパス2 2x" src="デフォルト画像のパス">

pictureタグは、mediaでウインドウサイズを指定します。
srcsetは、画像のパスのあとに「1x」「2x」と記述し、これでデバイスの解像度を指定します。

デバイスの解像度が1倍であれば1番目の画像が表示され、解像度が2倍であれば2番目の画像、それ以外であればデフォルト画像が表示されるという仕組みです。

意図しない表示で失敗

pictureタグよりシンプルで、1行で記述できるので、srcsetでコーディングした際、意図しない表示で失敗してしまいました。

上記コードの例で言うと、パソコンの場合は画像のパス1を表示させ、スマホの場合は画像のパス2を表示させるつもりで、記述していました。

ところが、今のMacはほとんどがRetinaディスプレイで解像度が2倍になります。
なので、パソコンのMacでみると、スマホ用の画像のパス2が表示されてしまっていたのです。

スマホ用の画像は縦に長く、パソコンで見るとバランスが悪くなってしまいます。
これに気付かなかったことがありました。

最後に

レスポンシブに画像を切り替えるsrcsetを使用して失敗した体験談をご紹介しました。

意図しないというより、勝手に思い込んでいただけですが、このようなことがありました。
何度もちゃんと確認して問題ないよなーと思ってたら、まさかのパソコンも解像度2倍だったとは、思いもしませんでした。

でも分かると当たり前のことですよね。
コードはウソをつきません。

もうこれからはsrcsetは使わないようにしようと思いました。