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