Safari の背後で Apple がサポートするオープン ソース プロジェクトである WebKit は、新しい Web 標準をサポートする最初のブラウザ レイアウト エンジンであり、開発者が iPhone、iPad、および iPad に搭載されている Retina パネルなどの高解像度ディスプレイを簡単に利用できるようになります。 MacBook Pro。

新しい標準は、「」と呼ばれる HTML5 仕様への追加です。srcset」は、開発者にさまざまなサービスをユーザーに提供する簡単な方法を提供します。イメージのバージョンデバイスの解像度に基づいて決定されます。たとえば、Web サイトは、Retina MacBook Pro で閲覧している訪問者には大きくて高品質の画像を提供し、MacBook Air で閲覧している訪問者には小さくて低品質の画像を送信する場合があります。

2010 年に iPhone 4 に初めて Retina ディスプレイが登場して以来、Web サイトや Web ベースのアプリケーションは Retina ディスプレイのサポートを提供するのが遅かった。現在の実装方法は最適とは言えず、開発者にとって煩わしかったり、ユーザー エクスペリエンスが低下したり、相互接続性が欠けていたりする可能性がある。ブラウザのサポート。

使用するsrcset、開発者は 1 つの宣言でイメージの複数のバリエーションを指定でき、古いシステムとの互換性を考慮して設計されています。対応していないブラウザsrcsetユーザーに悪影響を与えることなく、無視するだけです。

構文は Apple の iOS の規則に似ています。Retina対応グラフィックス: 開発者は、代替ファイル名と解像度乗数 (1x、2x、または 4x など) を指定するだけです。 「解像度乗数」は、1 つの表示ピクセルを構成する物理ピクセルの数の尺度です。たとえば、iPhone 5 の物理解像度は 1,136 x 640 ピクセルですが、表示解像度は 568 x 320 ピクセルです。これは、表示ピクセルごとに 4 つの物理ピクセル、つまり 4 倍の乗数があることを意味します。

Web の基盤となるオープン標準を定義および管理する国際組織である World Wide Web Consortium (W3C) は、次のように付け加えました。srcsetHTML5仕様に準拠2012年5月に

同様の機能「」-webkit-image-set」は WebKit に追加され、同年 10 月に Safari 6 と Google の Chrome 21 に同梱されました。しかし、このアセットは、合わせて 50 以上を使用した Microsoft の Internet Explorer と Mozilla の Firefox には実装されていなかったため、広く採用されることはありませんでした。当時の国際ブラウザ市場の % でした。

WebKit は、次のサポートを発表した最初のブラウザ エンジンです。srcsetであり、この機能は OS X Mavericks の Safari 7 に同梱される可能性があります。