5カラムレイアウト／4:3画像／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-264.jpg 176w,
https://example.com/img/img-5-5-3-240-180.jpg 240w,
https://example.com/img/img-5-5-3-272-204.jpg 272w,
https://example.com/img/img-5-5-3-352-264.jpg 352w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-5-5-3-352-264.jpg"
alt="テスト画像" width="352" height="264" class="lazyload ar4-3 fadein"
data-sizes="(max-width:416px) 120px, (max-width:464px) 136px, 176px">
</div>

</div>

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

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

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

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

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

sizes="(max-width:416px) 120px, (max-width:464px) 136px, 176px"

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

• 240px（表示サイズ120px）
• 272px（表示サイズ136px）
• 352px（表示サイズ176px）

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

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

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

■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-264.jpg 176w,
https://example.com/img/img-5-5-3-240-180.jpg 240w,
https://example.com/img/img-5-5-3-272-204.jpg 272w,
https://example.com/img/img-5-5-3-352-264.jpg 352w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-5-5-3-352-264.jpg"
alt="テスト画像" width="352" height="264" class="lazyload ar4-3 fadein"
data-sizes="(max-width:416px) 120px, (max-width:464px) 136px, 176px">
</div>

</div>

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

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

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

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

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

sizes="(max-width:416px) 120px, (max-width:464px) 136px, 176px"

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

• 240px（表示サイズ120px）
• 272px（表示サイズ136px）
• 352px（表示サイズ176px）

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

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

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

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

※モバイルの時だけ画像と画像の間隔を狭めるために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-264.jpg 176w,
https://example.com/img/img-5-4-3-240-180.jpg 240w,
https://example.com/img/img-5-4-3-272-204.jpg 272w,
https://example.com/img/img-5-4-3-352-264.jpg 352w,
https://example.com/img/img-5-4-3-400-300.jpg 400w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-5-4-3-400-300.jpg"
alt="テスト画像" width="400" height="300" class="lazyload ar4-3 fadein"
data-sizes="(max-width:416px) 120px, (max-width:464px) 136px, (max-width:880px) 200px, 176px">
</div>

</div>

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

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

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

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

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

sizes="(max-width:416px) 120px, (max-width:464px) 136px, (max-width:880px) 200px, 176px"

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

• 240px（表示サイズ120px）
• 272px（表示サイズ136px）
• 352px（表示サイズ176px）
• 400px（表示サイズ200px）

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

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

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

■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-264.jpg 176w,
https://example.com/img/img-5-4-3-240-180.jpg 240w,
https://example.com/img/img-5-4-3-272-204.jpg 272w,
https://example.com/img/img-5-4-3-352-264.jpg 352w,
https://example.com/img/img-5-4-3-400-300.jpg 400w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-5-4-3-400-300.jpg"
alt="テスト画像" width="400" height="300" class="lazyload ar4-3 fadein"
data-sizes="(max-width:416px) 120px, (max-width:464px) 136px, (max-width:880px) 200px, 176px">
</div>

</div>

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

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

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

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

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

sizes="(max-width:416px) 120px, (max-width:464px) 136px, (max-width:880px) 200px, 176px"

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

• 240px（表示サイズ120px）
• 272px（表示サイズ136px）
• 352px（表示サイズ176px）
• 400px（表示サイズ200px）

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

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

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

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

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