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>