la imagen webp no se carga - AMP Wordpress en español

Un usuario preguntó 👇

Hola, estoy usando imágenes web con etiqueta de imagen. Pero el plugin AMP elimina la etiqueta de imagen. Siguiendo el código html que estoy usando en mi blog para insertar imágenes web con la opción de retroceso de jpg.

<picture>
<source srcset="/wp-content/uploads/2019/11/rna.webp" type="image/webp">
<img src="/wp-content/uploads/2019/11/rna.jpg" alt="RNA" class="wp-block-image">
</picture>

Estoy usando AMP en modo de transición. ¿Hay alguna forma de mostrar imágenes web tanto en la versión no AMP como en la versión AMP?

(@pierlo)

Hace 1 año, 1 mes

Hola Naveen,

No puedo replicar su problema en esa página.

Además, parece que ha creado 2 ediciones para informar del mismo problema. Cierre uno si este es el caso.

(@naveendsouza)

Hace 1 año, 1 mes

Hola @pierlo, deshabilité el plugin AMP por un tiempo. Ahora activé el plugin AMP. Por favor revise ahora.

Perdón por crear dos temas para cerrar otro.

(@westonruter)

Hace 1 año, 1 mes

@naveendsouza Hola. Buscamos una forma de intentar convertir automáticamente picture etiquetas a amp-img en https://github.com/ampproject/amp-wp/issues/1316

Sin embargo, terminamos abandonando el intento por las razones mencionadas en ese número.

Sin embargo, es posible que desee considerar este enfoque fallback yo amp-img: https://amp.dev/documentation/components/amp-img/#example:-specifying-a-fallback-image

Pero esto no es muy bueno para los navegadores que no son compatibles con WebP, según tengo entendido, porque significa que primero tendrían que descargar la imagen de WebP y luego fallar al cargarla y luego volver al JPEG. El mejor enfoque sería simplemente vincular a la versión JPEG, y luego al servidor web para detectar si el navegador está iniciando el image/webp formato en el Accept encabezado y, de ser así, volver a publicar automáticamente la versión WebP en lugar de JPEG.

Sin embargo, dado que no está utilizando el modo estándar, la versión de AMP generalmente solo viene a través de la búsqueda. Cuando la versión AMP se sirve a través de la Búsqueda de Google, pasará por Google AMP Cache, que automáticamente entregará la versión WebP como se explica en https://developers.google.com/amp/cache/overview#cache-optimizations-and-modifications

Entonces, al final, creo que solo debería publicar la versión JPEG en las páginas AMP con regularidad img que cambiará el plugin AMP para él amp-img.

(@naveendsouza)

Hace 1 año, 1 mes

Hola @westonruter No soy bueno creando un nuevo código html.

Entonces, al final, creo que solo debería servir la versión JPEG en las páginas AMP en img regular, lo que convertirá el plugin AMP en amp-img.

¿Cómo?

Encontré dos soluciones para mostrar imágenes web en AMP y no AMP
1) Solo código HTML
de aquí https://amp.dev/documentation/components/amp-img/#example:-specifying-a-fallback-image

<picture>
<source srcset="/wp-content/uploads/2019/11/rna.webp" type="image/webp">
<img src="/wp-content/uploads/2019/11/rna.jpg" alt="RNA" class="wp-block-image">
</picture>
<amp-img alt="RNA"
width="768"
height="432"
layout="responsive"
src="https://allfullform.com/wp-content/uploads/2019/11/rna.webp">
<amp-img alt="RNA full form"
    fallback
    width="1920"
    height="1080"
    src="https://allfullform.com/wp-content/uploads/2019/11/rna.jpg"></amp-img>
</amp-img>

No creo que el primer artículo del código AMP anterior sea de utilidad porque si no se encuentra la imagen, la página AMP muestra «forma de ARN completo» como una imagen de artículo en lugar de «ARN».

2) código HTML y archivo .htaccess
desde aquí https://wordpress.org/support/topic/is-it-possible-to-upload-webp-images-directly/ a) Código HTML <img src="/wp-content/uploads/2019/11/rna.jpg" alt="RNA" class="wp-block-image">
b) código .htaccess

<ifModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI}  (?i)(.*)(.jpe?g|.png)$
  RewriteCond %{DOCUMENT_ROOT}%1.webp -f
  RewriteRule (?i)(.*)(.jpe?g|.png)$ %1.webp [L,T=image/webp,R]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Hágame saber qué método es bueno para realizar la menor solicitud y ahorrar ancho de banda.

(@westonruter)

Hace 1 año, 1 mes

Creo que el segundo método es mejor porque evitará la descarga de navegadores WebP que no admiten algo que no admiten. Sin embargo, no estoy familiarizado con el mejor código .htaccess para usar. Buscar en Google debería proporcionarle algunas soluciones, como ya ha encontrado.

¿Solucionó tu problema??

0 / 0