AMP

Inclusione di immagini e video

Come in una normale pagina HTML, AMP ti consente di incorporare immagini, video e contenuti audio. Scopri le differenze negli equivalenti elementi AMP e scopri come includerli nelle tue pagine.

Perché non usare <img>, <video> e <audio>?

AMP non supporta i componenti HTML predefiniti per la visualizzazione di contenuti multimediali, come <img>. Forniamo componenti equivalenti per i seguenti motivi:

Attenzione: finché non saranno supportati, essi saranno visualizzati, ma AMP non convaliderà le pagine e non si potranno sfruttare i vantaggi offerti da AMP.

Immagini

Includere un'immagine nella pagina utilizzando l'elemento amp-img, in questo modo:

<amp-img
  alt="A beautiful sunset"
  src="/static/inline-examples/images/sunset.jpg"
  width="264"
  height="195"
>
</amp-img>
Apri questo frammento in playground

In questo esempio molto semplice, l'immagine verrà visualizzata con l'altezza e la larghezza fisse indicate. Occorre almeno impostare esplicitamente una larghezza e un'altezza.

Visualizzazione di immagini quando JavaScript è disabilitato

Poiché <amp-img> si basa su JavaScript, se l'utente sceglie di disabilitare gli script, le immagini non verranno visualizzate. In questo caso, occorre fornire un fallback all'immagine usando i componenti <img> e <noscript> in questo modo:

<amp-img
  src="/static/inline-examples/images/sunset.jpg"
  width="264"
  height="195"
>
  <noscript>
    <img
      src="/static/inline-examples/images/sunset.jpg"
      width="264"
      height="195"
    />
  </noscript>
</amp-img>
Apri questo frammento in playground

Layout avanzati

Con AMP è molto più semplice creare immagini completamente reattive rispetto all'uso di CSS/HTML standard. Nella sua forma più semplice, basta aggiungere l'attributo layout="responsive":

<amp-img
  alt="A view of the sea"
  src="/static/inline-examples/images/sea.jpg"
  width="900"
  height="675"
  layout="responsive"
>
</amp-img>
Apri questo frammento in playground

CONTINUA A LEGGERE: Ulteriori informazioni sulle tecniche di layout avanzato.

Comportamento e segnaposti

Il sistema di runtime AMP HTML può gestire efficacemente le risorse di immagini, scegliendo di ritardare o dare la priorità al caricamento delle risorse in base alla posizione della finestra di visualizzazione, alle risorse di sistema, alla larghezza di banda della connessione o ad altri fattori.

CONTINUA A LEGGERE: Qui sono disponibili ulteriori informazioni sull'utilizzo di fallback e segnaposti con le immagini.

Immagini animate

L'elemento amp-anim è molto simile all'elemento amp-img e fornisce funzionalità aggiuntive per gestire il caricamento e la riproduzione di immagini animate come quelle di tipo GIF.

<amp-anim
  width="400"
  height="300"
  src="/static/inline-examples/images/wavepool.gif"
>
  <amp-img
    placeholder
    width="400"
    height="300"
    src="/static/inline-examples/images/wavepool.png"
  >
  </amp-img>
</amp-anim>
Apri questo frammento in playground

NOTA: Includere l'elemento <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script> nell'intestazione della pagina per utilizzare questo componente.

Video

Includere un video nella pagina utilizzando l'elemento amp-video.

Utilizzare questo elemento solo per l'integrazione diretta di file video HTML5. L'elemento carica in modalità lazy la risorsa video specificata dall'attributo src, in un momento stabilito da AMP.

Includere un segnaposto prima dell'inizio del video e un fallback, se il browser non supporta il video HTML5, ad esempio:

This browser does not support the video element.

<amp-video controls
  width="640"
  height="360"
  src="/static/inline-examples/videos/kitten-playing.mp4"
  poster="/static/inline-examples/images/kitten-playing.png">
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>
Apri questo frammento in playground

Audio

Includere una risorsa audio nella pagina, utilizzando l'elemento amp-audio.

Utilizzare questo elemento solo per l'integrazione diretta di file audio HTML5. Come per tutte le risorse esterne incorporate in una pagina AMP, l'elemento carica in modalità lazy la risorsa audio specificata dall'attributo src, in un momento stabilito da AMP.

Includi un fallback, se il browser non supporta l'audio HTML5, ad esempio:

Your browser doesn’t support HTML5 audio.

<amp-audio width="400"
  height="200"
  src="/static/inline-examples/audio/cat-meow.mp3">
  <div fallback>
    <p>Your browser doesn’t support HTML5 audio.</p>
  </div>
  <source type="audio/mpeg"
    src="/static/inline-examples/audio/cat-meow.mp3">
  <source type="audio/ogg"
    src="/static/inline-examples/audio/cat-meow.ogg">
</amp-audio>
Apri questo frammento in playground

NOTA: Includere l'elemento <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script> nell'intestazione della pagina per utilizzare questo componente.