Chrome、Firefox、Operaブラウザーの開発ビルドでは、レスポンシブデザインの開発時に発生する多くの問題を解決するために設計された新しい
picture
要素のサポートが登場しました。 もっと詳しく見てみましょう。
新しい
picture
要素は、アダプティブWebアプリケーションの開発者が直面する次のタスクを解決します（最近のフロントエンド会議の1つでpepelsbeyが提案した分類を使用します）
- R etina、すなわち 1インチあたりのドットの密度が150以上で、通常の画像がぼやけている画面
- そして適応性、ビューポートのサイズに応じて、デザインで規定されたルールに従って画像のサイズを変更するタスク。
- 形式、ブラウザでサポートされている場合、WebPなどの最新の形式を使用する機能
- アドリファイングまたはアーティスティックな目的。 画面が小さいデバイスに表示される場合、画像の重要でない部分を切り抜く。
最初の文字を追加すると、 RAFKのニーモニックが得られます
構文
条件付きで、新しい要素の拡張構文は次のようになります
<picture> <source srcset="< URL c >" [sizes="< >"] [media="<>"] [type="<mime/type>"] > <source ...> ... <img src="image.jpg" alt="My image" [srcset="< URL >"] [sizes="< >"]> </picture>
picture
要素はコンテンツをレンダリングしませんが、埋め込まれた
img
タグの単なる参照コンテナーです。
したがって、ほとんどのタスクでは、
picture
を使用せずに、簡略化された記録で十分です。
<img src="image.jpg" alt="My image" [srcset="< URL >"] [sizes="< >"]>
新しい要素の助けを借りて、上記の問題がどのように解決されるかを見てみましょう。 すべてのサンプルファイルはこのリポジトリにありますgithub.com/fetis/picture
デスクトップでこの記事の例をテストするには、 Firefox Nighlty （about：configで
dom.image.picture.enable
を設定することで
picture
サポートを有効にする）、 Chrome Canary 、またはOpera Developerが必要です。 携帯端末では、 Chromeベータ版で新しいアイテムをテストできます
網膜
400x300ピクセルの画像があり、2倍および3倍のピクセル密度で美しく表示したいと考えています。 これを行うには、サイズ800x600および1200x900の写真をさらに2つ用意し、次のコードを記述します
<img src="images/400.jpg" srcset="images/800.jpg 2x, images/1200.jpg 3x" width="400" height="300" >
2x
および
3x
はピクセル密度の記述子であり 、これらの写真がこの密度用に準備されたことをブラウザーに伝えます。必要に応じて使用できます。 ブラウザがこれらの写真を使用することを強制するのではなく、プロンプトを表示するだけであることに注意してください。 最終的な決定は、現在の接続など、他の条件に応じて彼に残ります。
この場合の
src
属性は、密度が2未満の画像のソースとして機能し、ブラウザが新しい要素をサポートしない場合のフォールバックとして機能します。
適応性
700pxの単一のブレークポイントがあるレイアウトを想像してください。 ビューポートのサイズが700ピクセルを超える場合、右側にサイドバーが表示され、画像のサイズは画面幅の75％になります。 それ以外の場合、サイドバーはページの最後に配置され、画像はその幅いっぱいに引き伸ばされます。 これは、次のコードによって実装されます
<img src="images/400.jpg" srcset=" 400w, images/800.jpg 800w, images/1200.jpg 1200w" sizes="(min-width: 700px) 75vw, 100vw" >
400w, 800w, 1200w
は幅記述子であり、ブラウザに特定のURLでの幅の画像を伝え、この情報に基づいて、ブラウザは現在の状況に最適な画像を決定します。 網膜の場合と同様に、情報は本質的に助言であり、読み込む画像の最終決定はブラウザに残ります。
密度記述子と幅記述子を同時に使用することはできません。
sizes
属性には、デザインのすべてのコントロールポイントの画像サイズがリスト
sizes
ます。 コントロールポイントは通常のメディア式の形式で設定され、ブラウザはTrueを返す最初のコントロールを取得し、チェーンをさらに調べません。 幅の値には、長さの新しい単位vwが使用され 、ビューポートの幅のパーセンテージとして値が返されます。
画像にコントロールポイントを使用する必要がない場合、レコードをそのような
sizes="100vw"
減らすことができます。 また、より複雑な設計の場合は、次のように
calc()
CSS関数を使用できます
sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
私の意見では、行動の中で最も難しい属性です。
sizes
指定しない場合、ブラウザは常に最大の画像を選択します。
width
組み合わせ
width
は機能しませんが、論理的な組み合わせと他の多くの不具合のように見えます。 おそらく、これらは初期の実装の機能です。
ご覧のとおり、アダプティブレイアウトのニーズの80％をすでにカバーしており、
picture
使用したことはありません。今度は彼もゲームに参加します。
書式
画像に異なる形式を使用することは、
video
または
audio
タグに使用される方法と大差ありません。
<picture> <source srcset="images/400.webp" type="image/webp"> <img src="images/400.jpg" width="400" height="300" > </picture>
ソースのリストとそれぞれのMIME /タイプを提供し、ブラウザはすでに知っている最初のものを選択します。 フォールバックとして、
src
属性の画像が使用されます。
フレーミング
小さい画面で写真を表示する場合、不要な詳細を切り取って、主要部分のみを残すことが理にかなっている場合があります。
media
属性は、このタスクに対処するのに役立ちます。
<picture> <source media="(min-width: 900px)" srcset="images/original.jpg 1200w" sizes="100vw"> <source media="(min-width: 700px)" srcset="images/800crop.jpg 800w" sizes="100vw"> <img srcset="images/400crop.jpg 400w" sizes="100vw" > </picture>
各
media
属性で、元の画像が変更される
media
式を指定します。前の例とは異なり、ブラウザはそれに従う必要があります。 また、トリミングを適応性と組み合わせて、画像を全幅に拡大する方法にも注意してください。
RAFK
そして今、1つのボトルに4つの方法すべてがあります:)おそらく、これは数年で写真を挿入するように見えるでしょう（Operaブログの例）
<picture> <source media="(min-width: 1280px)" sizes="50vw" srcset="opera-fullshot-200.webp 200w, opera-fullshot-400.webp 400w, opera-fullshot-800.webp 800w, opera-fullshot-1200.webp 1200w, opera-fullshot-1600.webp 1600w, opera-fullshot-2000.webp 2000w" type="image/webp"> <source sizes="(min-width: 640px) 60vw, 100vw" srcset="opera-closeup-200.webp 200w, opera-closeup-400.webp 400w, opera-closeup-800.webp 800w, opera-closeup-1200.webp 1200w, opera-closeup-1600.webp 1600w, opera-closeup-2000.webp 2000w" type="image/webp"> <source media="(min-width: 1280px)" sizes="50vw" srcset="opera-fullshot-200.jpg 200w, opera-fullshot-400.jpg 400w, opera-fullshot-800.jpg 800w, opera-fullshot-1200.jpg 1200w, opera-fullshot-1600.jpg 1800w, opera-fullshot-2000.jpg 2000w"> <img src="opera-closeup-400.jpg" alt="The Oslo Opera House" sizes="(min-width: 640px) 60vw, 100vw" srcset="opera-closeup-200.jpg 200w, 400w, opera-closeup-800.jpg 800w, opera-closeup-1200.jpg 1200w, opera-closeup-1600.jpg 1600w, opera-closeup-2000.jpg 2000w"> </picture>
2つのJPEGおよびWebP形式を使用します。 1280ピクセルを超える画面幅では、ビューポートの半分のフルサイズの画像が表示されます。 幅が640〜1279の場合、トリミングされた写真はビューポートの幅の60％で表示されます。 画面の幅が640px未満の場合、切り抜かれた写真は100％の幅で表示されます。 画面の現在のDPIの選択は、ソースファイルの幅に基づいています。
追加情報
ブラウザサポートcaniuse.com/#search=picture
仕様www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-picture-element
新しいresponsiveimages.org要素で達成したワーキンググループと典型的なタスク
dev.opera.com/articles/responsive-imagesを使用した多くの例