シェーン・コール
· 1分で読めます
srcset変数の解像度の実装例。| スクリーン画像はGianni Cumboによるもので、Flickrから引用。
Safari を支える Apple がサポートするオープンソース プロジェクトである WebKit は、iPhone、iPad、MacBook Pro に搭載されている Retina パネルなどの高解像度ディスプレイを開発者がより簡単に活用できるようにする新しい Web 標準をサポートする初のブラウザー レイアウト エンジンです。
HTML5仕様に追加された「 」と呼ばれるこの新しい標準規格により、srcset開発者はユーザーのデバイスの解像度に応じて異なる画像バージョンを簡単に提供できるようになります。例えば、ウェブサイトはRetina MacBook Proで閲覧しているユーザーには大きくて高画質な画像を提供し、MacBook Airで閲覧しているユーザーには小さくて低画質な画像を提供するといったことが可能です。
2010 年に iPhone 4 に初めて画面が搭載されて以来、Web サイトや Web ベースのアプリケーションでは、Retina ディスプレイのサポートが遅れています。現在の実装方法は最適とは言えず、開発者にとって煩雑であったり、ユーザー エクスペリエンスが低下したり、クロスブラウザー サポートが欠如したりする可能性があります。
を使用するとsrcset、開発者は単一の宣言で画像の複数のバリエーションを指定できます。また、これは古いシステムとの互換性をsrcset考慮して設計されています。サポートされていないブラウザは、ユーザーに悪影響を与えることなく、これを無視します。
構文はAppleのRetina対応グラフィックスにおけるiOSの慣例に似ています。開発者は、代替ファイル名と解像度の乗数（例：1x、2x、4x）を指定するだけです。「解像度の乗数」とは、1つのディスプレイピクセルを構成する物理ピクセル数を表す指標です。例えば、iPhone 5の物理解像度は1,136×640ピクセルですが、ディスプレイ解像度は568×320ピクセルです。つまり、1つのディスプレイピクセルには4つの物理ピクセル、つまり4倍の乗数があるということです。
Web の基盤となるオープン スタンダードを定義および管理する国際組織である World Wide Web Consortium (W3C) は、srcset2012 年 5 月に HTML5 仕様を追加しました。
同様の機能「-webkit-image-set」がWebKitに追加され、同年10月にSafari 6とGoogle Chrome 21に搭載されました。しかし、当時世界ブラウザ市場の50%以上を占めていたMicrosoftのInternet ExplorerとMozillaのFirefoxには実装されていなかったため、広く普及することはありませんでした。
WebKit は のサポートを発表した最初のブラウザ エンジンでありsrcset、この機能は OS X Mavericks の Safari 7 に搭載される予定です。
