ハマログ

株式会社イーツー・インフォの社員ブログ

pictureタグで画像をレスポンシブに出し分け

レスポンシブ対応でPCとスマホの画像を出し分けるときCSSで

@media screen and (min-width: 768px) {
    .img-sp {display: none}
    .img-pc {display: block}
}
@media screen and (max-width: 767px) {
    .img-sp {display: block}
    .img-pc {display: none}
}

のような書き方が多く見られますが、
実はpictureタグも便利でsourceタグと組み合わせ使えば、
ブラウザに余計な画像を読み込ませなくて済みます。


上記画像のようにトリミングした画像を異なる端末でレスポンシブ対応する場合、
これでユーザーの画面幅によって必要な画像のみレンタリングできます。

<picture>
    <source media="(min-width:992px)" srcset=“img-pc.jpg">
    <source media="(min-width:768px)" srcset=“img-tb.jpg">
    <img src=“img-sp.jpg" alt="画像">
</picture>

ちなみにこの書き方は同じ画像を画面幅によってトリミングするなど(アートディレクション)に使う例です。
全く同じ画像で解像度変更の場合imgタグのsrcset属性とsizes属性を使うべきだそうです。
こちらの方が高画素密度のRetinaディスプレイにも対応して計算できるからです。
今度はこちらも紹介します!

HTML5

  yt   2022年9月9日


関連記事

思わず見入ってしまう、面白い404エラーページを調べてみた!(パート2)

前回、404エラーページを調べてみましたが、まだまだ紹介しきれなかったので今回も…

イーツー・インフォの広報活動について

今日は私と私の所属するチームで最近取り組んでいることをご紹介したいと思います こ…

【EC-CUBE4】好きな場所にyoutube動画を埋め込む

やりたいこと 前回「【EC-CUBE4】カテゴリナビをサイドメニューにカスタマイ…


← 前の投稿

次の投稿 →