WordPress :PageSpeed Publica imágenes con formatos de próxima generación

Fecha Publicación:       15 de Abril de 2020
Fecha Modificación:       10 de Agosto de 2022

 

Optimizar WordPress con PageSpeed : Solución a la sugerencia Publica imágenes con formatos de próxima generación  y  Usa un tamaño adecuado para las imágenes  

Las imágenes ralentizan su sitio. Pero las imágenes siguen siendo esenciales por otras razones, por lo que no puede ignorarlas en nombre del rendimiento. Para obtener lo mejor de ambos mundos, puede usar un complemento optimizador de imagen de WordPress para optimizar las imágenes para que ocupen mucho menos espacio

Converter for Media – Convert WebP and AVIF & Optimize Images | Ease image optimization

https://wordpress.org/plugins/webp-converter-for-media/

Optimizar WordPress con PageSpeed :  Este Plugin Converter for Media en su fase Gratuito nos soluciona la recomendación Publica imágenes con formatos de próxima generación

  • Las nuevas imágenes que se agregarán a la biblioteca multimedia se convertirán automáticamente.
  • Nuestro optimizador de imágenes no modifica sus imágenes originales de ninguna manera. Esto significa seguridad para usted y sus archivos.
  • Cuando el navegador carga una imagen, nuestro complemento verifica si es compatible con el formato WebP. Si es así, se carga la imagen en formato WebP.
  • El complemento no realiza redireccionamientos en el modo predeterminado, por lo que la URL es siempre la misma. Solo el tipo MIME de la imagen cambia a image/webp.
  • Sin redirecciones significa que no hay problemas de caché, una operación más rápida y sin problemas de su sitio web. Si desea obtener más información sobre cómo funciona, consulte las preguntas frecuentes del complemento a continuación.
  • No importa si la imagen se muestra como una imgetiqueta HTML o si usa background-image. ¡Funciona siempre!

¿Cómo puedo verificar si el complemento funciona correctamente?

El complemento no cambia las URL de las imágenes, por lo que al mirar la fuente del sitio web, verá las URL de las imágenes predeterminadas todo el tiempo. El complemento crea redirecciones a archivos de salida en formato WebP y AVIF, cambiando el tipo MIME de estas imágenes, pero sin cambiar la URL.

¿Cómo verificar si el complemento funciona correctamente? Es muy simple. Para hacer esto, use una herramienta llamada Dev Tools en su navegador web.

Siga los pasos a continuación:

  • Inicie Dev Tools en su sitio web.
  • Vaya a la pestaña "Red" y active el filtrado para "Img" (Imágenes).
  • Actualice su sitio web.
  • Verifique la lista de imágenes cargadas. Tenga en cuenta la columna "Tipo". En lugar del tipo MIME original para una imagen, será WebP o AVIF.
  • Para ver qué buscar en Dev Tools, consulte nuestro manual .


Además, puede verificar el peso de su sitio web cuando el complemento está activo y todas las imágenes se han convertido y después de que el complemento se haya desactivado temporalmente. ¡La diferencia debe ser muy clara!

El funcionamiento del complemento para usuarios no avanzados puede ser menos comprensible, pero todo está bien. Como resultado, ya sea que su navegador sea compatible con WebP y AVIF o no, todo funciona sin problemas.

Recuerde que solo se admiten archivos de directorios seleccionados en la configuración del complemento. Si se cargan imágenes de otros dominios en su sitio web, el complemento no las admitirá.

¿Por qué algunas imágenes no están en WebP o AVIF?

Si la imagen convertida en formato WebP o AVIF es más grande que la original, el navegador utilizará el archivo original. Este archivo convertido será eliminado. Por lo tanto, también puede ver otros archivos además de WebP y AVIF en la lista. Cuando esto suceda, se le informará durante el proceso de conversión de la imagen.

Si desea forzar el uso de archivos WebP y AVIF, desmarque la opción "Eliminación automática de archivos en formatos de salida más grandes que el original" en la configuración del complemento. Luego haga clic en el botón "Regenerar todo" para convertir todas las imágenes nuevamente.

La solución anterior solo funciona si selecciona el modo de carga de imágenes a través de "htaccess" Se recomienda este modo. Si tiene problemas relacionados con un error de configuración del servidor, consulte este hilo .

Otros  Optimizadores de  Imagenes: 

Imagify , 3) TinyPNG , 4) ShortPixel , 5) Smush , 6) EWWW , 7) Image optimization & Lazy Load by Optimole

Nota : Devemos comprimir nuestras imagenes con el formato  WebP: un formato más eficiente para las imágenes en Internet. 

¿Qué es WebP?

El 30 de septiembre de 2010, Google anunció la publicación de un nuevo estándar abierto para la compresión con pérdida de gráficos de 24 bits en la web. El modelo para este estándar fue el formato de vídeo VP8, desarrollado por la empresa On2 Technologies y que Google había adquirido ese mismo año. A partir de entonces, Google amplió el formato WebP con características tales como un modo de compresión sin pérdida, transparencia (canal alfa) y animaciones. Chrome soporta el formato de compresión desde finales de 2010, pero hasta ahora, al igual que ha ocurrido con Opera, ha tenido que asumir que muchos navegadores solo soporten WebP de forma experimental (como Safari y Firefox, cuyas actualizaciones regulares siguen sin ofrecer soporte). Según sus propias declaraciones, Microsoft estaría trabajando actualmente para darle soporte en su propio navegador Edge.

Puedes visitar nuestro Tutorial como convertir  imagenes a webp con photoshop

 

¿Por qué la puntuación de rendimiento es diferente? Si No he cambiado nada en mi página.

https://developers.google.com/speed/docs/insights/faq

https://developers.google.com/speed/docs/insights/v5/about?hl=es