Imagens utilizando amp-img no AMP

Como é a implementação de imagens utilizando amp-img no AMP.

AMP não suporta a tag HTML img normal.

Como substituto você deverá utilizar o amp-img que oferece uma série de poderosas opções.

Você não deverá incluir nenhum arquivo JS extra para utilização do amp-img, sendo um recurso padrão.

<script async src="https://cdn.ampproject.org/v0.js"></script>

Exemplo básico

Exemplo de uma imagem responsiva com a altura e largura definidas para manter o seu aspecto original.

Utilize o “alt” como texto alternativo para a imagem.

<amp-img src="/img/amp.jpg"
  width="1080"
  height="610"
  layout="responsive"
  alt="AMP"></amp-img>

Utilizando “srcset”

Utilize o srcset para especificar diferentes imagens para cada variação de tela.

<amp-img src="/img/amp.jpg"
  srcset="/img/amp.jpg 1080w, /img/amp-900.jpg 900w, /img/amp-800.jpg 800w,
/img/amp-700.jpg 700w, /img/amp-600.jpg 600w, /img/amp-500.jpg 500w, /img/amp-400.jpg 400w,
/img/amp-300.jpg 300w, /img/amp-200.jpg 200w, /img/amp-100.jpg 100w"
  width="1080"
  height="610"
  layout="responsive"
  alt="AMP"></amp-img>

Especificamos diversas imagens para cada uma das larguras declaradas

/img/amp.jpg 1080w,
/img/amp-900.jpg 900w,
/img/amp-800.jpg 800w,
/img/amp-700.jpg 700w,
/img/amp-600.jpg 600w,
/img/amp-500.jpg 500w,
/img/amp-400.jpg 400w,
/img/amp-300.jpg 300w,
/img/amp-200.jpg 200w,
/img/amp-100.jpg 100w

Sendo o primeiro valor “/img/amp-100.jpg” o caminho a para imagem e o segundo 100w a largura da “tela/viewport” no qual a imagem deverá ser utilizada.

Separe cada valor que desejar utilizando virgulas.

Defina imagens apenas para as resoluções que você achar importante para o seu projeto.

Offline fallback

Solução para quando a imagem não poder ser carrega “Offline fallback”

<amp-img src="/img/does-not-exist.jpg"
  width="300"
  height="100"
  layout="responsive"
  class="m1">
  <div fallback>offline</div>
</amp-img>

Você pode definir uma mensagem personalizada utilizando uma div com atributo fallback dentro da tag amp-img.

 <div fallback>offline</div>

No Script

Solução para quando o Javascript não estiver habilitado.

<amp-img src="/img/amp.jpg"
  alt="AMP"
  width="475"
  height="268"
  layout="responsive"
  class="m1">
  <noscript>
    <img src="/img/amp.jpg" width="475" height="268" alt="AMP"> 
  </noscript>
</amp-img>