どうも上かるびです。
pictureタグを利用してSPとPCで画像を出し分けする方法は有名ですが、スマホ（パソコン）では画像を表示したくない（読み込みすらさせたくない）場合があると思います。
display:noneを使えば表示はされませんが、画像は読み込まれてしまうので、その分リソースが無駄になり、サイトの読み込みが遅くなる原因にもなってしまいます。
今回はその解決方法を共有します。
レスポンシブでSP（PC）では画像を表示したくない（読み込みすらさせたくない）！
どうにかできないものかとTwitterで訊ねてみたところ、ありがたい回答をいただきました。
IE確認してないですがおそらくこれで問題はないかと pic.twitter.com/dZV01wgP5k
— TAK (@tak_dcxi) December 14, 2021
↓PC（960px以上）ではthumbnail.webpを読み込み、スマホではdata URIを読み込ませる場合。
|
1 2 3 4 5 |
<picture> <source srcset="thumbnail.webp" media="(min-width: 960px)" type="image/webp"> <source srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" media="not all and (min-width:960px)"> <img src="thumbnail.png" width="500" height="500" alt="" loading="lazy" decoding="async" /> </picture> |
|
1 2 3 4 5 |
@media not all and (min-width:960px) { picture { display: none; } } |
解説
今まで知らなかったのですが、data URIというものを利用して、ものっっっすごく小さい画像を読み込ませるってことで、スマホではあたかも画像を読み込んでいないことにしている、ということみたいです。
ネコーダー
読み込み自体はさせちゃうってことね！兵法みたいで良き！
肝心のdata URIの中身、data:image/gif;base64~というものですが色々種類があるらしく、どれが一番軽いファイルなのか議論されていました。
いくつかのサイトを見てみましたが、結局どれが最小サイズのものか分からなかったので、とりあえずこちらのサイトのものを選択。
ブラウザで確認するとちゃんと小さい画像が読み込まれていることが分かります。
図で表すとこんなイメージです。
@media not allの詳細は下記リンクを参照くださいm(_ _)m
ググってもこの方法は見つけられなかったので、本当に助かりました。
上かるび
ちなみに今回はマウスホバーでのみ現れる画像に対してこの実装を利用しました。
参考サイト
データ URL - HTTP | MDN
データ URL は data: スキームが先頭についた URL で、小さなファイルをインラインで文書に埋め込むことができます。以前、 WHATWG で取り下げられるまでは "data URIs" と呼ばれていました。
developer.mozilla.org
Smallest data URI image possible for a transparent image
I'm using a transparent 1x1 image with a background image, to be able to use sprites and still provide alternative text for some icons.
I want to use a data UR...
stackoverflow.com
快速ページ表示のためのblank.gifのdata URI化、最短表現や処理の重さを実際にテストしてみた | 初代編集長ブログ―安田英久
data URIって何？ 使うとどう良いの？ という人向けの基本解説もあります
webtan.impress.co.jp
コメント