Si tienes un sitio web creado con WordPress en el que utilizas algunas imágenes, es muy probable que tengas que revisar el peso, calidad u optimización de las mismas. Hoy te hablo sobre las imágenes webp en WordPress.
Como ya te conté en el artículo donde hablaba sobre LiteSpeed caché para WordPress, uno de las metas más anheladas por todo webmaster es conseguir que su sitio web cargue en el menor tiempo posible.
Gran parte de responsabilidad en el tiempo de carga la tienen las imágenes de tu sitio web. A medida que las imágenes sean más grandes o tengan mayor resolución, tardarán más tiempo en descargarse del servidor y, por tanto, en mostrarlas a tu visitante.
Formatos de las imágenes
Hasta ahora estábamos acostumbrados a trabajar con varios tipos de imágenes: JPG, GIF, PNG… Cada uno de estos formatos te ofrecen distintas características.
Por ejemplo, el formato PNG se suele utilizar para conseguir imágenes con más colores y de mayor calidad, sin embargo, los archivos con esta extensión, suelen pesar demasiado.
Por contra, las imágenes con extensión JPG ocupan menos y tardan menos en descargarse, pero la imagen tiene pérdida de calidad al mostrarse en pantallas de un ordenador o dispositivos móviles.
La ventaja es que estos formatos de imágenes «estándar» son compatibles con todos los navegadores web y, por tanto, las imágenes se muestran al usuario sin ningún problema.
Nuevo formato webp
Aunque ahora se está escuchando hablar más sobre este formato de imágenes webp, lo cierto es que se está utilizando desde finales del año 2010.
Fue en ese año cuando Google compró otro estándar de formato de vídeo VP8 y, a partir de él, creó este nuevo formato para imágenes que permite una mayor compresión sin pérdida, canal alfa (para la transparencia de imágenes) e incluso la posibilidad de imágenes animadas (que hasta ahora nos permitía el formato GIF).
Desde ese mismo año, el navegador Chrome es compatible para mostrar este tipo de imágenes. Pero la mala noticia es que, aún a día de hoy, otros muchos navegadores no soportan el formato webp. En el momento de escribir este artículo, Safari y FireFox lo están probando en fase beta.
Imágenes webp en WordPress
Una vez puesto en antecedentes, seguro que te estás preguntando cómo puedes comprimir las imágenes de tu WordPress sin perder calidad, para que se puedan descargar más rápidamente.
Convertir imágenes a webp manualmente
Existen distintas herramientas online que permitirán subir tu imagen con extensión PNG, GIF, JPG… y descargarla en pocos segundos convertida a webp.
Subir imágenes webp a WordPress
Por defecto, WordPress no está preparado para subir este tipo de archivos desde la galería de medios, por lo que, para poder subirlos directamente, necesitarás tener instalado este plugin.
Recuerda que, si utilizas directamente imágenes webp, prácticamente sólo las podrán ver los usuarios que utilicen Opera o Chrome.
Convertir imágenes webp en WordPress
Aparecen algunos plugins en el repositorio de WordPress que anuncian que, tras su instalación, convierten a formato webp toda la galería de medios de tu WordPress de forma automática, aunque lo cierto es que, después de haber hecho algunas pruebas, la mayoría de ellos no cumple lo que promete.
Optimizar imágenes webp en WordPress
También existe la posibilidad de instalar estos plugins de optimización de imágenes, que pueden comprimirlas a formato webp y mostrarlas únicamente a los usuarios que utilicen un navegador compatible.
Plugins para optimizar WordPress
También puedes utilizar alguno de estos plugins «todo en uno» que se encargan de optimizar tu instalación de WordPress para que cargue en menos tiempo.
Entre sus funciones de optimización también está la de comprimir imágenes a formato webp
Comprimir imágenes antes de subirlas a WordPress
Otra opción consistiría en comprimir las imágenes en formato PNG (compatibles con todos los navegadores, pero optimizándolas antes manualmente).
Para ello puedes utilizar, por ejemplo, la herramienta iLoveIMG, que es gratuita y te permite, además, redimensionar, recortar, editar, convertir, poner marca de agua, etc etc.
Conclusión
Los formatos de imágenes webp en WordPress sin duda harán mejorar la reputación de tu sitio tanto en Google como en otras herramientas de medición de optimización.
Sin embargo tienes que tener claro que aún no es compatible con muchos navegadores web, por lo que mi recomendación es que no subas directamente las imágenes en este formato, sino que, si quieres utilizarlas, te valgas de un plugin de optimización de imágenes o subas las imágenes ya optimizadas en formato PNG.
En el caso concreto de este blog, las imágenes están subidas en formato PNG y el propio plugin LiteSpeed realiza una doble optimización: por un lado mejora la imagen manteniendo el formato PNG y por otro lado la duplica en formato webp. Dependiendo del navegador del visitante, muestra una u otra.
¿Y tú cómo lo haces? ¿Prefieres optimizar las imágenes PNG al máximo o utilizas los formatos webp?
Deja tu comentario debajo y comparte tu experiencia con otros usuarios!
Hola.
Que opinas de los plugins de WordPress Imagify o WebP Express que sirven para convertir las imagenes JPG y PNG a WebP?
Saludos.
Hola Marco!
Los plugins que comentas también los puedes utilizar dependiendo del número de imágenes (y miniaturas de esas imágenes) que haya en tu sitio web. Ten en cuenta que las versiones gratuitas están limitadas a un número máximo de imágenes que procesar cada cierto tiempo…
Un saludo!
gracias
Hola!
Sabes no puedo subir ninguna imagen en wordpress dice que la cantidad de escritura es mucha supuse que pesaba pero no la verdad como que me dice si hay accesso y lo que me tiene en nada es eso quisiera sabe r como subir una imagen trate con jp o gif , pg y nada
hi, por lo visto ios tiene bloqueado este avance, ya pude subir archivos webp al woocommerce pero no se si es el tema que no permite trabajar con estas imágenes, las herramientas de zoom no funcionan. Debería subirse todo en webp y un puglin que convierta a jpg cuando la pagina sea abierta desde un celular Iphone. (mi humilde opinión).
Buen día, gracias por la explicación! Yo tengo el litespeed instalado y veo que las imágenes están ya comprimidas en la galería. Sin embargo cuando analizo las publicaciones, las mismas no se sirven con el formato webp (aún teniendo el switc de reemplazo de imágenes en ON).
El pagespeed me sigue mostrando la sugerencia de publicar imágenes de proxima generación. tendrás alguna sugerencia? Muchas pracias!!
Hola Ariel!
Recuerda que no todos los navegadores están preparados para mostrar imágenes webp.
Además, debes asegurarte de tener contratado el hosting en un servidor LiteSpeed.
Después debes buscar la opción «Optimización de imágenes» dentro del plugin LiteSpeed Caché y conectar tu servidor con tu web para que las convierta.
En cualquier caso, no debes fiarte 100% de lo que te diga Pagespeed. Utiliza por ejemplo la herramienta de Pingdom o GTmetrix para ver los contenidos y tipos de carga.
Un saludo!
Muchas Gracias!
Hola Juanma:
Tengo una duda respecto a este comentario del artículo:
«En el caso concreto de este blog, las imágenes están subidas en formato PNG y el propio plugin LiteSpeed realiza una doble optimización: por un lado mejora la imagen manteniendo el formato PNG y por otro lado la duplica en formato webp. Dependiendo del navegador del visitante, muestra una u otra.»
¿Es el plugin el que detecta con que navegador se esta visualizando la web, para así saber que formato de imagen mostrar?
Un saludo y gracias.
Hola Carlos!
En realidad, el plugin de caché LiteSpeed lo que hace es optimizar varias versiones de cada imagen (entre ellas una jpg, otra en webp, etc).
En este caso, se almacenan en la memoria caché dos versiones de la página: una con la imagen en webp y otra en jpg.
Dependiendo del navegador desde el que se hace la llamada al servidor, se muestra una versión u otra de la página solicitada.
A grandes rasgos funciona así. Espero haber resuelto tu duda,
Un saludo!