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