Sigue este blog vía RSS, en el Fediverso en @acambronero@www.blogpocket.com, o vía email.

You don’t speak Spanish? Explore a selection of Blogpocket posts in English

Cómo servir imágenes WebP

WP-AL-DIA-1024x576 Cómo servir imágenes WebP

Servir imágenes, en el formato de nueva generación WebP, en tu sitio web, es una manera de optimizar el rendimiento del mismo. El recurso de esta semana es un plugin de WordPress para convertir automáticamente tus archivos jpg, png, etc. a WebP, a la vez que los presenta cuando son solicitados.

WP al día

El contenido de este post se publicó originalmente el 6 de junio de 2022 en nuestra newsletter WP al día.

imágenes en formatos de próxima generación: WebP y AVIF

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

Este plugin convierte las imágenes de tu sitio web al formato WebP y los usuarios reciben automáticamente imágenes nuevas, mucho menos pesadas que las originales. Con ello se puede ganar más de la mitad del peso de la página sin perder calidad. 

Cuando el navegador carga una imagen, el plugin verifica si es compatible con el nuevo formato WebP. Si es así, se carga la imagen. En caso contrario, se carga la original. En algunos casos, la imagen convertida puede ser mayor en peso que la original y entonces se carga ésta.

Las imágenes de la biblioteca de medios no se alteran. La conversión masiva con un clic solo debes realizarla la primera vez y las nuevas imágenes se van convirtiendo a medida que se van subiendo a la librería multimedia. Si borras el plugin, todas las imágenes convertidas se eliminan.

Otro formato de próxima generación es AVIF. El formato AVIF solo lo puedes utilizar en la versión Pro del plugin. El formato AVIF es el sucesor de WebP. AVIF permite alcanzar niveles aún más altos de compresión de imágenes y la calidad de AVIF es aún mejor que en WebP.

Naturalmente, hemos probado a servir imágenes en formato WebP en entornos de test; e, incluso, en la web de Blogpocket. Ahí, las imágenes, en png y jpg, penalizaban el rendimiento sobre todo en dispositivos móviles (a pesar de estar optimizadas). Con WebP hemos logrado un Lighthouse de 80% en móvil y un 100% en escritorio. Todavía hay margen de mejora en móvil pero en escritorio el resultado es espectacular

GTMETRIX-BLOGPOCKET-2022-1024x642 Cómo servir imágenes WebP

¿Cómo saber si el plugin está funcionando? Una manera sencilla es comprobando que en GTmetrix o Lighthouse desaparece el mensaje de «servir imágenes en formato de próxima generación».

Antes de emplear este plugin, revisa si tu hosting te provee de alguna herramienta para llevar a cabo esta conversión automáticamente. Por ejemplo, SiteGround lo incluye en su plugin SG Optimizer. 

También tienes que tener cuidado si tu servidor es Nginx, porque entonces tendrás que aplicar algunos cambios antes de poder utilizar el plugin. 

Por qué recomiendo el plugin Converter for Media: Un sitio web mejor optimizado también afecta a tu ranking en Google. 
La optimización de las imágenes es muy importante. Y porque tratamos, además, de conseguir sitios web sostenibles. Y para esto es preciso aligerar y alcanzar niveles óptimos de rendimiento.

Más información: Cómo optimizar imágenes para WordPress en 2022 – Y uso de WebP.

Responder en Mastodon (requiere usuario en esa plataforma)

Puedes usar tu cuenta de Mastodon para responder a este post de

Copia y pega esta URL (https://www.blogpocket.com/?p=71921) en el campo de búsqueda de la interfaz web de tu servidor Mastodon.

Icono de Mastodon

Deja una respuesta

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

Información básica sobre protección de datos Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a GreenGeeks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido