5カラムレイアウト／16:9画像／srcset sizes 完全版

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

<div class="main-inner flex">

<div class="flex-5-5-3">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-5-5-3-352-198.jpg 176w,
https://example.com/img/img-5-5-3-256-144.jpg 256w,
https://example.com/img/img-5-5-3-288-162.jpg 288w,
https://example.com/img/img-5-5-3-352-198.jpg 352w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-5-5-3-352-198.jpg"
alt="テスト画像" width="352" height="198" class="lazyload ar16-9 fadein"
data-sizes="(max-width:416px) 128px, (max-width:464px) 144px, 176px">
</div>

</div>

●通常DPI設定で表示させる倍の画像

https://example.com/img/img-5-5-3-352-198.jpg 176w

●高DPI設定で表示させる倍の画像

https://example.com/img/img-5-5-3-352-198.jpg 352w

srcsetの中に「176w」「352w」とサイズ指定分けした同じ画像を用意して通常DPI設定でも2倍の画像を表示させる。

sizes="(max-width:416px) 128px, (max-width:464px) 144px, 176px"

sizesで「176px」と設定として、PC表示の時に

• 256px（表示サイズ128px）
• 288px（表示サイズ144px）
• 352px（表示サイズ176px）

の画像候補から「サイズが一番近い」画像をデバイスに選んでもらう。

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

※ウィンドウ幅「416px」と「464px」の時の画像は16:9の比率の画像が整数にならず、表示枠より少し大きいサイズの16:9の画像を使用。

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

<div class="main-inner flex gap-16-10">

<div class="flex-5-5-3s">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-5-5-3-352-198.jpg 176w,
https://example.com/img/img-5-5-3-256-144.jpg 256w,
https://example.com/img/img-5-5-3-288-162.jpg 288w,
https://example.com/img/img-5-5-3-352-198.jpg 352w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-5-5-3-352-198.jpg"
alt="テスト画像" width="352" height="198" class="lazyload ar16-9 fadein"
data-sizes="(max-width:416px) 128px, (max-width:464px) 144px, 176px">
</div>

</div>

●通常DPI設定で表示させる倍の画像

https://example.com/img/img-5-5-3-352-198.jpg 176w

●高DPI設定で表示させる倍の画像

https://example.com/img/img-5-5-3-352-198.jpg 352w

srcsetの中に「176w」「352w」とサイズ指定分けした同じ画像を用意して通常DPI設定でも2倍の画像を表示させる。

sizes="(max-width:416px) 128px, (max-width:464px) 144px, 176px"

sizesで「176px」と設定として、PC表示の時に

• 256px（表示サイズ128px）
• 288px（表示サイズ144px）
• 352px（表示サイズ176px）

の画像候補から「サイズが一番近い」画像をデバイスに選んでもらう。

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

※ウィンドウ幅「416px」と「464px」の時の画像は16:9の比率の画像が整数にならず、表示枠より少し大きいサイズの16:9の画像を使用。

■画像の間隔を狭める時の注意

※モバイルの時だけ画像と画像の間隔を狭めるためにgap-16-10とflex-5-5-3sで調整。

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

<div class="main-inner flex">

<div class="flex-5-4-3">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-5-4-3-352-198.jpg 176w,
https://example.com/img/img-5-4-3-256-144.jpg 256w,
https://example.com/img/img-5-4-3-288-162.jpg 288w,
https://example.com/img/img-5-4-3-352-198.jpg 352w,
https://example.com/img/img-5-4-3-416-234.jpg 416w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-5-4-3-416-234.jpg"
alt="テスト画像" width="416" height="234" class="lazyload ar16-9 fadein"
data-sizes="(max-width:416px) 128px, (max-width:464px) 144px, (max-width:880px) 208px, 176px">
</div>

</div>

●通常DPI設定で表示させる倍の画像

https://example.com/img/img-5-4-3-352-198.jpg 176w

●高DPI設定で表示させる倍の画像

https://example.com/img/img-5-4-3-352-198.jpg 352w

srcsetの中に「176w」「352w」とサイズ指定分けした同じ画像を用意して通常DPI設定でも2倍の画像を表示させる。

sizes="(max-width:416px) 128px, (max-width:464px) 144px, (max-width:880px) 208px, 176px"

sizesで「176px」と設定として、PC表示の時に

• 256px（表示サイズ128px）
• 288px（表示サイズ144px）
• 352px（表示サイズ176px）
• 416px（表示サイズ208px）

の画像候補から「サイズが一番近い」画像をデバイスに選んでもらう。

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

※ウィンドウ幅「416px」と「464px」と「880px」の時の画像は16:9の比率の画像が整数にならず、表示枠より少し大きいサイズの16:9の画像を使用。

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

<div class="main-inner flex gap-16-10">

<div class="flex-5-4-3s">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-5-4-3-352-198.jpg 176w,
https://example.com/img/img-5-4-3-256-144.jpg 256w,
https://example.com/img/img-5-4-3-288-162.jpg 288w,
https://example.com/img/img-5-4-3-352-198.jpg 352w,
https://example.com/img/img-5-4-3-416-234.jpg 416w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-5-4-3-416-234.jpg"
alt="テスト画像" width="416" height="234" class="lazyload ar16-9 fadein"
data-sizes="(max-width:416px) 128px, (max-width:464px) 144px, (max-width:880px) 208px, 176px">
</div>

</div>

●通常DPI設定で表示させる倍の画像

https://example.com/img/img-5-4-3-352-198.jpg 176w

●高DPI設定で表示させる倍の画像

https://example.com/img/img-5-4-3-352-198.jpg 352w

srcsetの中に「176w」「352w」とサイズ指定分けした同じ画像を用意して通常DPI設定でも2倍の画像を表示させる。

sizes="(max-width:416px) 128px, (max-width:464px) 144px, (max-width:880px) 208px, 176px"

sizesで「176px」と設定として、PC表示の時に

• 256px（表示サイズ128px）
• 288px（表示サイズ144px）
• 352px（表示サイズ176px）
• 416px（表示サイズ208px）

の画像候補から「サイズが一番近い」画像をデバイスに選んでもらう。

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

※ウィンドウ幅「416px」と「464px」と「880px」の時の画像は16:9の比率の画像が整数にならず、表示枠より少し大きいサイズの16:9の画像を使用。

■画像の間隔を狭める時の注意

※モバイルの時だけ画像と画像の間隔を狭めるためにgap-16-10とflex-5-4-3sで調整。