サブページメイン写真

2カラムレイアウト 1:1 Images srcset sizes 詳細版

1:1比率の画像とsrcset sizesを使った2カラムのレスポンシブのレイアウトサンプル。

2-2-2カラム

テスト画像
テスト画像
テスト画像
テスト画像

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

<div class="main-inner flex">

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

</div>

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

https://example.com/img/img-2-2-2-928-928.jpg 464w

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

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

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

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

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

  • 368px（表示サイズ184px）
  • 416px（表示サイズ208px）
  • 928px（表示サイズ464px）

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

2-2-1カラム

テスト画像
テスト画像
テスト画像
テスト画像

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

<div class="main-inner flex">

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

</div>

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

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

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

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

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

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

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

  • 768px（表示サイズ384px）
  • 864px（表示サイズ432px）
  • 928px（表示サイズ464px）

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

Menu

▲