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:

• Occorre comprendere il layout della pagina prima del caricamento delle risorse, cosa fondamentale per supportare il pre-caricamento della prima finestra di visualizzazione
• Occorre tenere sotto controllo le richieste di rete per il caricamento lazy e assegnare la priorità alle risorse in modo efficace

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>

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>

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>

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.

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>

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:

<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>

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:

<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>

• Written by @pbakaus
  with contributions from @Meggin and @bpaduch