Dodawanie obrazów i filmów

Podobnie jak na zwykłej stronie HTML, AMP pozwala na osadzanie obrazów, filmów i treści audio. Dowiedz się, czym różnią się odpowiedniki AMP i jak umieszczać je w swoich stronach.

Dlaczego nie <img>, <video> i <audio>?

AMP nie obsługuje w celu wyświetlania multimediów domyślnych odpowiedników HTML, takich jak <img>. Zapewniamy równoważne składniki z następujących powodów:

• Musimy zrozumieć układ strony przed załadowaniem zasobów, co jest kluczowe dla obsługi wstępnego ładowania pierwszego okienka na stronie.
• Musimy kontrolować żądania sieci, aby leniwie ładować zasoby i skutecznie nadawać im priorytety

Przestroga: chociaż nie są obsługiwane, będą one renderować, ale AMP nie będzie wykonywać walidacji Twoich stron i nie osiągniesz wszystkich korzyści, jakie zapewnia AMP.

Obrazy

Umieść obraz na swojej stronie, używając elementu amp-img:

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

W tym najprostszym przykładzie obraz będzie wyświetlany z określoną stałą wysokością i szerokością. Należy jawnie ustawić co najmniej szerokość i wysokość.

Wyświetlanie obrazów przy wyłączonej obsłudze JavaScript

Składnik <amp-img> jest zależny od kodu JavaScript, więc jeśli użytkownik wyłączy skrypty, obrazy nie będą wyświetlane. W tym przypadku należy zapewnić zasoby rezerwowe obrazu za pomocą znaczników <img> i <noscript>:

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

Układy zaawansowane

AMP znacznie ułatwia tworzenie w pełni responsywnych obrazów w porównaniu do standardowego CSS/HTML. W jego najbardziej podstawowej formie wszystko, co musisz zrobić, to dodać atrybut 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>

Sposób działania i elementy zastępcze

Środowisko uruchomieniowe AMP HTML może efektywnie zarządzać zasobami obrazów, wybierając opóźnienie lub nadanie priorytetów ładowania zasobów w zależności od położenie okienka na stronie, zasobów systemowych, przepustowości łącza lub innych czynników.

Obrazy animowane

Element amp-anim jest bardzo podobny do elementu amp-img i zapewnia dodatkowe funkcje zarządzania ładowaniem i odtwarzaniem obrazów animowanych, takich jak pliki 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>

Wideo

Aby dodać film do strony, użyj elementu amp-video.

Użyj tego elementu tylko do bezpośredniego osadzania plików wideo HTML5. Element ten ładuje zasób wideo określony przez atrybut src leniwie, w czasie określonym przez AMP.

Dodaj element zastępczy wyświetlany przed uruchomieniem wideo, a także zasoby rezerwowe na wypadek, gdy przeglądarka nie obsługuje wideo w formacie HTML5, na przykład:

<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

Aby dodać dźwięk do strony, użyj elementu amp-audio.

Użyj tego elementu tylko do bezpośredniego osadzania plików audio HTML5. Element ten ładuje zasób audio określony przez atrybut src leniwie, w czasie określonym przez AMP.

Dodaj element zastępczy wyświetlany przed uruchomieniem audio, a także zasoby rezerwowe na wypadek, gdy przeglądarka nie obsługuje audio w formacie HTML5, na przykład:

<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