¿Cómo agregar amp-img?


amp-img


Los archivos AMP HTML no admiten la etiqueta HTML img normal. Con amp-img AMP proporciona un potente reemplazo.

Preparar

amp-img es un elemento incorporado y se importa automáticamente a través del tiempo de ejecución de AMP.

Se necesita tener el siguiente script justo después de la apertura del <head>


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


Uso básico

Una imagen simple responsive - ancho y altura se utilizan para determinar la relación de aspecto. Use alt para especificar el texto que puede actuar como una alternativa para la imagen.


Ejemplo

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

Srcset

Utilice srcset para especificar diferentes imágenes para variar los anchos de las vistas y las densidades de píxeles (cambie el ancho de las ventanas de su navegador para probarlo).


Ejemplo

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

Fuera de línea

amp-img admite los atributos comunes de AMP, lo que significa que puede mostrar un fallback en caso de que no se pueda cargar la imagen. Esto es ideal para agregar soporte offline a sus AMP.


Ejemplo

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

Sin secuencia de comandos (No script)

Si desea asegurarse de que los usuarios con javascript deshabilitado pueden ver sus imágenes, puede agregar un elemento img adicional dentro de una etiqueta noscript . Esto también hace posible para webcrawlers sin tiempo de ejecución javascript para descubrir sus imágenes.


Ejemplo

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




Share:

Related post

Disqus

Disqus comments:


Facebook

Facebook comments: