Retinaディスプレイで画像を綺麗に表示させるには、通常の4倍のサイズの画像を用意しなければなりません。「Retina Check Extension」は画像がRetinaディスプレイに対応されているかチェックできる、Google Chromeの拡張機能です。

180325_re2
Screenshot: カメきち via Retina Check Extension

使い方は簡単、Retina Check ExtensionをGoogle Chromeにインストールし、チェックしたいページで開くだけです。解析が終了すると、画像サイズの分布が表示されます。大きすぎるものや小さすぎるものもひと目でわかりますね。また、実際のウェブページ上にもハイライトされるので確認しやすいですね。

180325_re3
Screenshot: カメきち via Retina Check Extension

Appleのウェブサイトで調査してみると、見事にすべての画像がRetinaディスプレイ対応でした。高解像度のディスプレイにウェブサイトを対応させる際に、利用してみてはいかがでしょうか。大きすぎるサイズの画像もチェックできるので、ウェブサイトの読み込み速度改善の際にも、重宝するかもしれませんね。ぜひご活用ください。

Screenshot: カメきち via Retina Check Extension

Source: Retina Check Extension