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