当サイトでは現在、Picturefill (バージョン 2.2.0) を実装しています。画像要素は次のようになります。
<picture>
<source media="{query_size1}" srcset="/images/size1.jpg"></source>
<source media="{query_size2}" srcset="/images/size2.jpg"></source>
<source media="{query_size3}" srcset="/images/size3.jpg"></source>
<source media="{query_size4}" srcset="/images/size4.jpg"></source>
<source media="{query_size5}" srcset="/images/size5.jpg"></source>
</picture>
ご覧のとおり、通常のメディア クエリとピクセル比率を考慮すると、複雑なメディア クエリを含む 1 つの画像に対して 5 つのソースがあります。このようなクエリは次のようになります。
(max-width: Xpx) and (-webkit-max-device-pixel-ratio: 1.0),
(max-width: Xpx) and (-o-max-device-pixel-ratio: 1/1),
(max-width: Xpx) and (max-resolution: 100dpi),
(max-width: Xpx) and (-webkit-max-device-pixel-ratio: 1.5),
(max-width: Xpx) and (-o-max-device-pixel-ratio: 15/10),
(max-width: Xpx) and (max-resolution: 150dpi),
(max-width: Xpx) and (-webkit-max-device-pixel-ratio: 2),
(max-width: Xpx) and (-o-max-device-pixel-ratio: 2/1),
(max-width: Xpx) and (max-resolution: 200dpi),
(max-width: Xpx) and (-webkit-max-device-pixel-ratio: 2.4),
(max-width: Xpx) and (-o-max-device-pixel-ratio: 24/10),
(max-width: Xpx) and (max-resolution: 240dpi)
サイトに 10 枚の写真がある場合、10 X 5 = 50 の複雑な RegEx 計算。
ご意見をお聞かせいただければ幸いです... ;)
よろしくお願いします...