Pregunta sobre AMP de Wordpress:

la imagen webp no se carga

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

Deja una respuesta 0

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *