Katie Hempenius
このデモを試す
- サイトをプレビューするには、[View App] を押します。次に、[Fullscreen]
を押します。 - さまざまなブラウザサイズを使用してアプリを再読み込みします。画像の違いに注目してください。サイズだけでなく、切り抜きやアスペクト比も異なります。
一体、どういうことでしょうか。
アート ディレクションでは、ディスプレイ サイズごとに異なる画像が表示されます。
レスポンシブ画像では、同じ画像の異なるサイズが読み込まれます。アート ディレクションは、これをさらに一歩進めて、ディスプレイに応じてまったく異なる画像を読み込みます。
アート ディレクションを使用して、ビジュアル プレゼンテーションを改善します。たとえば、このデモのさまざまな画像クロップでは、ディスプレイに関係なく、関心のあるポイント（花）が常に詳細に表示されます。アート ディレクションのメリットは純粋に美的なものであり、レスポンシブ画像よりもパフォーマンス上のメリットはありません。
コードを表示する
- このデモのアート ディレクション コードについては、
index.htmlをご覧ください。
コードの仕組み
アート ディレクションでは、<picture>、<source>、<img> タグを使用します。
写真
<picture> タグは、0 個以上の <source> タグと 1 個の <image> タグのラッパーを提供します。
source
<source> タグは、メディア リソースを指定します。
ブラウザは、true を返すメディアクエリを含む最初の <source> タグを使用します。メディアクエリが一致しない場合、ブラウザは <img> で指定された画像の読み込みにフォールバックします。インスタンスにしか適用できません
img
<img> タグを使用すると、<picture> タグをサポートしていないブラウザでもこのコードが機能します。
ブラウザが <picture> タグをサポートしていない場合は、<img> タグで指定された画像が読み込まれます。