3カラムレイアウト／1:1画像／srcset sizes 完全版

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

<div class="main-inner flex">

<div class="flex-3-3-3">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-3-3-3-240-240.jpg 240w,
https://example.com/img/img-3-3-3-272-272.jpg 272w,
https://example.com/img/img-3-3-3-608-608.jpg 304w,
https://example.com/img/img-3-3-3-608-608.jpg 608w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-3-3-3-608-608.jpg"
alt="テスト画像" width="608" height="608" class="lazyload ar1-1 fadein"
data-sizes="(max-width:416px) 120px, (max-width:464px) 136px, 304px">
</div>

</div>

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

https://example.com/img/img-3-3-3-608-608.jpg 304w

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

https://example.com/img/img-3-3-3-608-608.jpg 608w

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

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

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

• 240px（表示サイズ120px）
• 272px（表示サイズ136px）
• 608px（表示サイズ304px）

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

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

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

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

<div class="main-inner flex">

<div class="flex-3-3-2">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-3-3-2-608-608.jpg 304w,
https://example.com/img/img-3-3-2-368-368.jpg 368w,
https://example.com/img/img-3-3-2-416-416.jpg 416w,
https://example.com/img/img-3-3-2-608-608.jpg 608w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-3-3-2-608-608.jpg"
alt="テスト画像" width="608" height="608" class="lazyload ar1-1 fadein"
data-sizes="(max-width:416px) 184px, (max-width:464px) 208px, 304px">
</div>

</div>

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

https://example.com/img/img-3-3-2-608-608.jpg 304w

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

https://example.com/img/img-3-3-2-608-608.jpg 608w

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

sizes="(max-width:416px) 184px, (max-width:464px) 208px, 304px"

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

• 368px（表示サイズ184px）
• 416px（表示サイズ208px）
• 608px（表示サイズ304px）

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

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

<div class="main-inner flex">

<div class="flex-3-3-1">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-3-3-1-608-608.jpg 304w,
https://example.com/img/img-3-3-1-608-608.jpg 608w,
https://example.com/img/img-3-3-1-768-768.jpg 768w,
https://example.com/img/img-3-3-1-864-864.jpg 864w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-3-3-1-864-648.jpg"
alt="テスト画像" width="864" height="864" class="lazyload ar1-1 fadein"
data-sizes="(max-width:416px) 384px, (max-width:464px) 432px, 304px">
</div>

</div>

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

https://example.com/img/img-3-3-1-608-608.jpg 304w

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

https://example.com/img/img-3-3-1-608-608.jpg 608w

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

sizes="(max-width:416px) 384px, (max-width:464px) 432px, 304px"

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

• 608px（表示サイズ304px）
• 768px（表示サイズ384px）
• 864px（表示サイズ432px）

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

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

<div class="main-inner flex">

<div class="flex-3-2-2">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-3-2-2-608-608.jpg 304w,
https://example.com/img/img-3-2-2-368-368.jpg 368w,
https://example.com/img/img-3-2-2-416-416.jpg 416w,
https://example.com/img/img-3-2-2-608-608.jpg 608w,
https://example.com/img/img-3-2-2-832-832.jpg 832w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-3-2-2-832-832.jpg"
alt="テスト画像" width="832" height="832" class="lazyload ar1-1 fadein"
data-sizes="(max-width:416px) 184px, (max-width:464px) 208px, (max-width:880px) 416px, 304px">
</div>

</div>

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

https://example.com/img/img-3-2-2-608-608.jpg 304w

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

https://example.com/img/img-3-2-2-608-608.jpg 608w

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

sizes="(max-width:416px) 184px, (max-width:464px) 208px, (max-width:880px) 416px, 304px"

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

• 368px（表示サイズ184px）
• 416px（表示サイズ208px）
• 608px（表示サイズ304px）
• 832px（表示サイズ416px）

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

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

<div class="main-inner flex">

<div class="flex-3-2-1">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-3-2-1-608-608.jpg 304w,
https://example.com/img/img-3-2-1-608-608.jpg 608w,
https://example.com/img/img-3-2-1-768-768.jpg 768w,
https://example.com/img/img-3-2-1-832-832.jpg 832w,
https://example.com/img/img-3-2-1-864-864.jpg 864w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-3-2-1-864-864.jpg"
alt="テスト画像" width="864" height="864" class="lazyload ar1-1 fadein"
data-sizes="(max-width:416px) 384px, (max-width:464px) 432px, (max-width:880px) 416px, 304px">
</div>

</div>

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

https://example.com/img/img-3-2-1-608-608.jpg 304w

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

https://example.com/img/img-3-2-1-608-608.jpg 608w

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

sizes="(max-width:416px) 384px, (max-width:464px) 432px, (max-width:880px) 416px, 304px"

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

• 608px（表示サイズ304px）
• 768px（表示サイズ384px）
• 832px（表示サイズ416px）
• 864px（表示サイズ432px）

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

■要素の右左を逆にする時

<div class="flex-3-3-1-wrap">
<div class="flex-3-3-1-left">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-3-3-1-left-608-608.jpg 304w,
https://example.com/img/img-3-3-1-left-608-608.jpg 608w,
https://example.com/img/img-3-3-1-left-768-768.jpg 768w,
https://example.com/img/img-3-3-1-left-864-864.jpg 864w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-3-3-1-left-864-864.jpg"
alt="テスト画像" width="864" height="864" class="lazyload ar1-1 fadein"
data-sizes="(max-width:416px) 384px, (max-width:464px) 432px, 304px">
</div>
<div class="flex-3-3-1-right left">
サンプル文章。
</div>
</div>

要素を逆にする時はflex-3-3-1-wrapをflex-3-3-1-wrap-revにする。

配置を逆にしてもモバイル表示の時は写真が上、テキストが下のレイアウト。