レスポンシブ画像実装方式

レスポンシブレスポンシブ画像

3方式5種類

 状態:調査中  閲覧数:2,280  投稿日:2015-08-17  更新日:2015-08-21
A系.幅に合わせた寸法での表示(Viewport-based Selection)
・A-1.srcset属性、w記述子
・A-2.sizes属性、vw、srcset属性、w記述子
・A-3.sizes属性、min-width属性、vw、srcset属性、w記述子

B系.アートディレクション(Art Direction)
・B.picture要素、source要素、media属性

C系.デジタルピクセル比
・C.、srcset属性、x記述子



勝手に分類


色々な記述方式が存在
・分かりにくいので勝手に分類!

見分け方
・w記述子があれば A-1方式
・sizes属性があれば A-2方式
・sizes属性にmin-widthプロパティが付与されていれば A-3方式
・media属性があれば B方式
・ピクセル密度デスクリプタ(1x、1.5x、2x、3x などの x記述子) があれば C方式

勘違いしやすい点
・B方式の「img属性srcset」もしくは「img属性src」は、「sourceタグで指定された条件以外」という意味
・一方、A方式のimg属性srcは、単なるフォールバック。img属性srcsetが有効なブラウザでは全く考慮されない

A-1.srcset属性、w記述子

 閲覧数:777 投稿日:2015-08-06 更新日:2015-08-31

A-1方式.srcset属性 w記述子


幅デスクリプタ
幅に合わせた寸法での表示
→ 画面サイズに合わせて画像読込
→ 幅とハードウェアの画面解像度に基づき(Retina対応)、最も適切な画像リソースを選択して読込
・imgタグsrcset属性w記述子

具体例1
ウィンドウサイズ 読込画像
320px 未満 img-320.jpg 読込
320px 以上 640px 未満 img-640.jpg 読込
・Retinaディスプレイで見た場合、ウィンドウサイズが 320px 未満なら img-640.jpg 読込
<img src="img/img.jpg"
    srcset="img/img-320.jpg 320w,
            img/img-640.jpg 640w"
    alt="画像の説明">


具体例2
ウィンドウサイズ 読込画像
400px 未満 400w.png 読込
400px 以上 600px 未満 600w.png 読込
600px 以上 800px 未満 800w.png 読込
800px 以上 1000px 未満 1000w.png 読込
1000px 以上 1200px 未満 1200w.png 読込
それ以外(ウィンドウサイズが 1200px 以上) 1200w.png 読込
<img
 src="img/800.w.png"
 srcset="img/400w.png 400w, img/600w.png 600w, img/800w.png 800w, img/1000w.png 1000w, img/1200w.png 1200w"
 alt="幅に合わせた寸法での表示の例">


具体例3
・A-2方式だが、100vwのみの指定なので、実質的にA-1方式
・ウィンドウサイズと同じサイズ(100vw)の画像を自動選択
ウィンドウサイズ 読込画像
400px 未満 400w.png 読込
400px 以上 600px 未満 600w.png 読込
600px 以上 800px 未満 800w.png 読込
800px 以上 1000px 未満 1000w.png 読込
1000px 以上 1200px 未満 1200w.png 読込
それ以外(ウィンドウサイズが 1200px 以上) 1200w.png 読込
<img
 sizes="100vw"
 src="img/800.w.png"
 srcset="img/400w.png 400w, img/600w.png 600w, img/800w.png 800w, img/1000w.png 1000w, img/1200w.png 1200w"
 alt="幅に合わせた寸法での表示の例">


動作確認
・成功

A-2.sizes属性、vw、srcset属性、w記述子

 閲覧数:862 投稿日:2015-08-17 更新日:2015-09-01

A-2方式.imgタグ(sizes属性 srcset属性w記述子)


幅デスクリプタ
幅に合わせた寸法での表示
→ ビューポートの幅とハードウェアの画面解像度に基づき、最も適切な画像リソースを選択して読込
・imgタグsizes属性
・imgタグsrcset属性w記述子

sizes属性
・条件とそれに応じた画像表示を指定

具体例1
・ウィンドウサイズの半分(50vw)のサイズの画像を自動選択
具体例1
ウィンドウサイズ 読込画像
640px 未満 img-320.jpg 読込
1280px 未満かそれ以上 img-640.jpg 読込
・Retinaディスプレイで見た場合、ウィンドウサイズが 640px 以下なら img-640.jpg 読込
<img src="img/img.jpg"
    sizes="50vw"
    srcset="img/img-320.jpg 320w,
            img/img-640.jpg 640w"
    alt="画像の説明">


A-3.sizes属性、min-width属性、vw、srcset属性、w記述子

 閲覧数:636 投稿日:2015-08-17 更新日:2015-09-04

A-3方式.imgタグ(sizes属性min-widthプロパティ srcset属性w記述子)


幅デスクリプタ
幅に合わせた寸法での表示
→ ビューポートの幅とハードウェアの画面解像度に基づき、最も適切な画像リソースを選択して読込
・imgタグsizes属性min-widthプロパティ
・imgタグsrcset属性w記述子

sizes属性
・条件とそれに応じた画像表示を指定
・sizes属性では、メディアクエリが当てはまる最初の条件が適用されるため、複数記述する場合の指定順番はとても重要

具体例1
・ウィンドウサイズが 640px 以下なら ウィンドウサイズの半分(50vw)のサイズの画像を自動選択して読込
・それ以外の時は画面サイズに対して100%の画像を自動選択して読込
ウィンドウサイズ 読込画像
640px 未満 img-320.jpg 読込
1280px 未満かそれ以上 img-640.jpg 読込
・Retinaディスプレイで見た場合、ウィンドウサイズが 640px 以下なら img-640.jpg 読込
<img src="img/img.jpg"
    sizes="(min-width: 640px) 50vw, 100vw"
    srcset="img/img-320.jpg 320w,
            img/img-640.jpg 640w"
    alt="画像の説明">


B.picture要素、source要素、media属性

 閲覧数:622 投稿日:2015-08-17 更新日:2015-08-17



B方式.pictureタグ + sourceタグ(media属性 srcset属性) + imgタグ(srcset属性)


画像のアートディレクション
アートディレクションによる選択
→ 表示される画面に応じて画像を出し分け
→ ウィンドウサイズに合わせて画像を切り替え
・pictureタグ
・sourceタグmedia属性、sourceタグsrcset属性
・imgタグsrcset属性、もしくは、imgタグsrc属性


具体例1
・ウィンドウサイズが 1200px 以上なら 1200w.png 読込
・ウィンドウサイズが 1000px 以上なら 1000w.png 読込
・ウィンドウサイズが 800px 以上なら 800w.png 読込
・ウィンドウサイズが 600px 以上なら 600w.png 読込
・ウィンドウサイズが 400px 以上なら 400w.png 読込
・ウィンドウサイズが 200px 以上なら 200w.png 読込
・上記以外(ウィンドウサイズが 200px 未満)なら img srcset で指定した内容(800w.png) 読込
<picture>
 <!--[if IE 9]><video style="display: none;"><![endif]-->
 <source srcset="./img/1200w.png" media="(min-width: 1200px)">
 <source srcset="./img/1000w.png" media="(min-width: 1000px)">
 <source srcset="./img/800w.png" media="(min-width: 800px)">
 <source srcset="./img/600w.png" media="(min-width: 600px)">
 <source srcset="./img/400w.png" media="(min-width: 400px)">
 <source srcset="./img/200w.png" media="(min-width: 200px)">
 <!--[if IE 9]></video><![endif]-->
 <img srcset="./img/800w.png" alt="CSSデモ">
</picture>


動作確認
・成功


C方式.srcset属性 x記述子


ピクセル密度デスクリプタ(1x、1.5x、2x、3x など)を使用
Retina対応
→ 高解像度のディスプレイをサポート
→ Retinaディスプレイ用に画像を切り替え
・「imgタグsrcset属性 x記述子」 もしくは 「sourceタグsrcset属性 x記述子」

上記に「pictureタグ × sourceタグ」が加わる場合もあり
・つまり「srcset属性 x記述子」がある場合は、常にC方式
※「B方式」でかつ「C方式」なケースもあり得ると言うこと!

動作確認
・Retinaディスプレイを保持していないため未検証


レスポンシブ画像系用語

<picture><source srcset属性>が正常動作しない理由


×

ゲストコメント一覧

番号 内容 投稿日
1 うjygjjgj 2021-09-17
コメント件数 … 1件

週間人気ページランキング / 10-3 → 10-9
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 43
2 RGB ⇔ Lab | 色変換(色) 20
3 鉄道会社毎のカラーコード | カラーコード(色) 15
4 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 8
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 7
5 16進数カラーコード / 2進数 7
6 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 6
7 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 5
7 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 5
7 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 5
8 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 4
8 RGBの種類 / ビットカラー | RGB(色) 4
8 「東京都」のカラーコード取得は難しい | カラーコード(色) 4
8 「bgcolor」「background-color」「background」の違い | CSS 4
8 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 4
9 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 3
9 画像ライセンスは大きく3種類に分かれる。「All rights reserved」+「クリエイティブ・コモンズ・ライセンス」+「その他」 | 画像著作権(画像) 3
9 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
9 8ビットカラー / インデックスカラー / パレットカラー 3
9 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 3
2024/10/10 1:01 更新