4K/Retinaディスプレイに『srcset』で切り替えする

HTML5のsrcsetタグを使って2種類の画像を切り替えます。

画像を2種類用意します。
gazou1.jpgとgazou2.jpg

srcsetを使用してコードを作成します。

参考:ワードプレスの記述

参考サイト:KIAKINGさんのサイト

メリットはRetina-imagesと同様にアクセスが一度で済みますのでアクセス効率が下がりません。
当サイトでは150px以下の画像の5枚以上の読み込みで画像落ちが改善しました。

レティナ(Retina)ディスプレイで確認すると画像が表示しないトラブルの対応

デメリットはアップする画像ごとに記述が必要になりますので、タグうちの手間が増加するのと、タグうちが増加すると些細な打ち間違いのミスも増えて効率の低下につながります。

 

2種類の画像を切り替えて表示

picturefill1picturefill2

疑問・質問はメールフォームでご連絡ください。