Webサイトのコーディングで、高解像度ディスプレイ対応についてどう考えていますか？

Question

Retinaディスプレイなどの高解像度ディスプレイが普及してきて、そのようなディスプレイでWebサイトを閲覧すると、画像がぼやけて見えてしまうことが気になるようになりました。

画質が重要なイメージ画像については、高解像度ディスプレイ対応の必要性がでてくるかと思いますが、サイズが大きくなるとページの表示速度に影響するため悩ましい問題と感じています。

Webプログラマーの皆様の経験を踏まえて、高解像度ディスプレイ対応についてどうかんがえるべきかアドバイス頂けますでしょうか？
また、近年のサイト構築実績として、高解像度ディスプレイ対応を行った事例がありましたら差し支えない範囲で、どのようなサイトかなど教えていただけると幸いです。

Answer 1

グラデーションや角丸、アイコンフォントなど、かなりのことがビットマップ画像を使わずにできるようになってきています。

写真はともかく、その他のパーツについてはCSS側で描画すれば、Retinaでも解像度が落ちる心配もありません。イラストでもSVGを使えます。

Comments

[MasayukiIto]

回答ありがとうございます。参考にさせていただきます。

Answer 2

私の場合、EC等のサイトで重要な意味を持つ画像情報の場合はRetina対応にします。
アイコンや重要でない情報のサムネイル対しては極力Retina対応するようにしますが、考えて対応します。

また、容量の問題等は下記の減色処理や遅延読み込み等を参考にしてはいかがでしょうか？
https://1000ch.net/posts/2014/grunt-image.html
https://github.com/1000ch/lazyload-image
http://nanndemoiikara.hatenablog.com/entry/2015/06/01/120818

Comments

[MasayukiIto]

回答ありがとうございました。とても参考になりました。

Answer 3

Webサイトのパーツのようなものはあまり影響がないので、そのままRetina対応してます。
写真のようなRetina対応サイズだと大きすぎるものに関しては、下記のようなもので遅延読み込みしています。
Lazy Load Plugin for jQuery

実績に関しては、ごめんなさいちょっと挙げていいものがありません...

Comments

[MasayukiIto]

回答ありがとうございました。とても参考になりました。
やはり基本的にはRetina対応されているのですね。