pictureタグとdata URIを使ってスマホ(パソコン)のときには余計な画像を読み込ませない方法

HTML / CSS
この記事は約3分で読めます。
スポンサーリンク

どうも上かるびです。

pictureタグを利用してSPとPCで画像を出し分けする方法は有名ですが、スマホ(パソコン)では画像を表示したくない(読み込みすらさせたくない)場合があると思います。

display:noneを使えば表示はされませんが、画像は読み込まれてしまうので、その分リソースが無駄になり、サイトの読み込みが遅くなる原因にもなってしまいます。

今回はその解決方法を共有します。

正確には「読み込ませない」わけではないですが、ほぼそれに近い実装方法となっています。

レスポンシブでSP(PC)では画像を表示したくない(読み込みすらさせたくない)!

どうにかできないものかとTwitterで訊ねてみたところ、ありがたい回答をいただきました。

↓PC(960px以上)ではthumbnail.webpを読み込み、スマホではdata URIを読み込ませる場合。

解説

今まで知らなかったのですが、data URIというものを利用して、ものっっっすごく小さい画像を読み込ませるってことで、スマホではあたかも画像を読み込んでいないことにしている、ということみたいです。

ネコーダー
ネコーダー

読み込み自体はさせちゃうってことね!兵法みたいで良き!

肝心のdata URIの中身、data:image/gif;base64~というものですが色々種類があるらしく、どれが一番軽いファイルなのか議論されていました。

いくつかのサイトを見てみましたが、結局どれが最小サイズのものか分からなかったので、とりあえずこちらのサイトのものを選択。

ブラウザで確認するとちゃんと小さい画像が読み込まれていることが分かります。

ちなみにIE11対応の案件だったのですが、上記コードで正常に動作確認できました。
図で表すとこんなイメージです。
@media not allの詳細は下記リンクを参照くださいm(_ _)m
ググってもこの方法は見つけられなかったので、本当に助かりました。
上かるび
上かるび

ちなみに今回はマウスホバーでのみ現れる画像に対してこの実装を利用しました。

参考サイト

データ URL - HTTP | MDN
データ URL は data: スキームが先頭についた URL で、小さなファイルをインラインで文書に埋め込むことができます。以前、 WHATWG で取り下げられるまでは "data URIs" と呼ばれていました。
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...
快速ページ表示のためのblank.gifのdata URI化、最短表現や処理の重さを実際にテストしてみた | 初代編集長ブログ―安田英久
data URIって何? 使うとどう良いの? という人向けの基本解説もあります

コメント

タイトルとURLをコピーしました