2カラムレイアウト 16:9 Images picture 詳細版

■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる

<div class="main-inner flex">

<div class="flex-2-2-2">
<picture>
<source media="(max-width:416px)" srcset="[template_url]/img/spacer.png" data-srcset="[template_url]/img/img-2-2-2-320-180.jpg" width="320" height="180">
<source media="(max-width:464px)" srcset="[template_url]/img/spacer.png" data-srcset="[template_url]/img/img-2-2-2-416-234.jpg" width="416" height="234">
<img decoding="async" loading="lazy" src="[template_url]/img/spacer.png" data-src="[template_url]/img/img-2-2-2-928-522.jpg" alt="テスト画像" width="928" height="522" class="lazyload ar16-9 fadein">
</picture>
</div>

</div>

●ウィンドウサイズ416px以下の時に表示させる画像

https://example.com/img/img-2-2-2-320-180.jpg

●ウィンドウサイズ417px～464pxの時に表示させる画像

https://example.com/img/img-2-2-2-416-234.jpg

●それ以外（ウィンドウサイズ465px以上）の時に表示させる画像

https://example.com/img/img-2-2-2-928-522.jpg

■画像サイズのイレギュラー

※ウィンドウ幅「416px」の時の画像は16:9の比率の画像が整数にならず、PageSpeed Insights用の1.75倍の画像より少し小さいサイズの16:9の画像を使用。

■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる

<div class="main-inner flex">

<div class="flex-2-2-1">
<picture>
<source media="(max-width:416px)" srcset="[template_url]/img/spacer.png" data-srcset="[template_url]/img/img-2-2-1-672-378.jpg" width="672" height="378">
<source media="(max-width:464px)" srcset="[template_url]/img/spacer.png" data-srcset="[template_url]/img/img-2-2-1-864-486.jpg" width="864" height="486">
<img decoding="async" loading="lazy" src="[template_url]/img/spacer.png" data-src="[template_url]/img/img-2-2-1-928-522.jpg" alt="テスト画像" width="928" height="522" class="lazyload ar16-9 fadein">
</picture>
</div>

</div>

●ウィンドウサイズ416px以下の時に表示させる画像

https://example.com/img/img-2-2-1-672-378.jpg

●ウィンドウサイズ417px～464pxの時に表示させる画像

https://example.com/img/img-2-2-1-864-486.jpg

●それ以外（ウィンドウサイズ465px以上）の時に表示させる画像

https://example.com/img/img-2-2-1-928-522.jpg