通常の HTML ページと同じように、AMP でも 画像動画音声を埋め込むことができます内容。 通常の HTML と AMP のコンポーネントの違いと、こうしたコンポーネントをページに含める方法について解説します。

Why not <img><video><audio> を使用しない理由

AMP は、メディアの表示に使用されるデフォルトの HTML タグ(<img>など)には対応していません。次の理由で、同等のコンポーネントが用意されています。

画像

画像をページに追加するには amp-img 要素を使用します。たとえば次のようになります。

Show full code

こちらのごく基本的な例では、画像は、指定した固定の高さと幅で表示されます。少なくとも、幅と高さを明確に設定する必要があります。

JavaScript が無効な場合に画像を表示する

As <amp-img> は JavaScript に依存するので、ユーザーがスクリプトを無効にすると画像は表示されなくなります。このような場合、その画像のフォールバックを、<img><noscript> を使って指定する必要があります。たとえば次のようになります。

Show full code

高度なレイアウト

AMP では、標準の CSS や HTML を使う場合よりもかなり簡単に、完全にレスポンシブな画像を作成できます。最も基本的な形式では、必要な作業は次のように layout="responsive"を追加することだけです。

Show full code

動作とプレースホルダ

AMP HTML のランタイムでは、画像のリソースを効果的に管理でき、ビューポートの位置、システム リソース、接続の帯域幅などの要素に基づいて、リソースの読み込みを遅らせるか優先させるかを選べます。

アニメーション画像

The amp-anim 要素はamp-img 要素とよく似ています。この要素では、アニメーション画像(GIF など)の読み込みや再生を管理する機能を追加できます。

Show full code

動画

動画をページに追加するには amp-video 要素を使用します。

この要素は、HTML5 の動画ファイルを直接埋め込む場合にのみ使用します。この要素により、src 属性で指定された動画のリソースが、AMP で決められたタイミングで、遅れて読み込まれます。

動画が開始する前のプレースホルダと、ブラウザが HTML5 の動画に対応していない場合のフォールバックを追加します。たとえば次のようになります。

Show full code

音声

音声のリソースをページに追加するには amp-audio 要素を使用します。

この要素は、HTML5 の音声ファイルを直接埋め込む場合にのみ使用します。AMP ページに埋め込まれるすべての外部リソースと同様に、この要素により、src 属性で指定された音声のリソースが、AMP で決められたタイミングで、遅れて読み込まれます。

音声が開始する前のプレースホルダと、ブラウザが HTML5 の音声に対応していない場合のフォールバックを追加します。たとえば次のようになります。

Show full code