Cómo funcionan las imágenes WebP en WordPress

Ya hemos comentado en más de una ocasión que la velocidad de carga de nuestra web es un factor clave a la hora de posicionarla bien en los buscadores. Y aunque quizá no hace falta que llegues al excelente en Google Speed, cualquier esfuerzo relacionado con la optimización de imágenes es particularmente crítico en la mejora del SEO.

La comunidad de WordPress es muy consciente de ello, y por este motivo, en la última versión 5.8 añadió la funcionalidad de dar soporte al formato de imagen WebP.

Qué son las imágenes WebP

WebP es un formato de imagen que desarrolló Google en 2010 para ser una alternativa a formatos como PNG y JPG, produciendo tamaños de archivo mucho más pequeños y manteniendo cualidades de imagen similares. A diferencia de otros formatos, WebP admite la compresión con y sin pérdidas, así como la transparencia y la animación.

Incluso con estas características, WebP ofrece siempre tamaños de archivos más pequeños que sus alternativas. En un estudio comparativo de Google de estos formatos de imagen, se comprobó que las imágenes con pérdida de WebP ocupaban, por término medio, un 30% menos que las JPG y un 25% menos que las PNG.

Además, Google PageSpeed Insights que es un evaluador del nivel de optimización de tu web, te recomienda como una de las oportunidades para mejorar la velocidad de carga de tu web, que uses los formatos modernos de imagen.

Una de las dudas que te puede surgir cuando te planteas si deberías tener todas las imágenes en WebP es el soporte que actualmente tienen los distintos navegadores. Lo último que querrías es que tus lectores y lectoras no pudieran ver bien las imágenes.

Y la realidad es que el soporte en cada uno de ellos es cada vez mayor. Actualmente, ya estamos hablando de un 95% de soporte.

Cómo convertir imágenes a WebP

Para subir una imagen WebP a la biblioteca, evidentemente, lo primero que debemos tener es dicha imagen en el formato en cuestión. Si te descargas una imagen de un banco de imágenes, seguramente lo descargarás en formato JPEG o PNG. Así que tu primera tarea será convertir la imagen a dicho formato. ¿Qué alternativas tenemos?

Nelio Unlocker

Pásate a WordPress manteniendo tus diseños y contenidos

Mejora hoy mismo el SEO de tu web y acelera su velocidad de carga convirtiendo tus páginas a estándares HTML, CSS y WordPress. No necesitas conocimientos técnicos y solo pagarás por aquello que necesites.

Pruébalo ya

Herramientas de diseño de imágenes

Algunas herramientas de diseño de imágenes, como Sketch, Photoshop de Adobe, o Cloudinary, entre otros, incluyen la opción de guardar cualquier imagen en formato WebP. Es tan sencillo como abrir la imagen que quieres convertir en la herramienta y luego guardarla con el nuevo formato.

Pero si no es tu caso, no te preocupes porque tienes alternativas gratuitas, como veremos a continuación.

Herramienta oficial de Google

Otra opción es la de descargarte la herramienta para Linux, Widows o Mac, cwebp, para convertir cualquier imagen PNG o JPG a WebP. Una vez descargada e instalada, directamente puedes ejecutar en tu ordenador la instrucción de convertir cualquier imagen. Así, por ejemplo, puedes convertir un archivo de imagen PNG en una imagen WebP con un rango de calidad de 80 con el comando:

cwebp -q 80 image.png -o image.webp

Si lo que necesitas es convertir un montón de imágenes a la vez, en este artículo te explica las instrucciones, en un entorno de tipo Unix (de macOs o Ubuntu), para que puedas convertir un gran conjunto de imágenes.

Y en el mismo artículo también te comentan la alternativa de programar la conversión con Node.js utlizando la herramienta imagin-webp.

Conversores online

Otra alternativa si no quieres escribir ni una línea de código, es usar un conversor de imágenes online. Buscando en Google, fácilmente te aparece una gran lista de conversores, incluyendo los siguientes:

• Ezgif Webp,
• Cloudconvert,
• Convertio,
• Online-Convert,
• FreeConvert,
• etc. etc.

En todos ellos, sólo debes subir la imagen, realizar la conversión y descargar el fichero reconvertido.

Plugins de WordPress

Finalmente, como te explico más adelante, verás que también existen plugins que te convierten las imágenes a formato WebP cuando las subes a tu WordPress.

Cómo subir una imagen WebP a la biblioteca de medios

Una vez que ya tenemos la imagen en este formato, se supone que ya podemos subirla a nuestro biblioteca de medios de WordPress como es habitual cuando subimos cualquier imagen. Veamos…

Y ¡oh!, tranquilo que este error lo encontrarás todavía con una gran número de servidores de hosting. WordPress tiene una limitación incorporada a los tipos de archivosMIME que puedes subir a tu sitio por razones de seguridad.

MIME son las siglas de Multipurpose Internet Mail Extensions. Los tipos MIME son utilizados por los navegadores y otros dispositivos de Internet para determinar el tipo de contenido asociado a una página.

Por ejemplo, si tienes un archivo .png y un archivo .jpeg en una página, el navegador sabrá por sus tipos MIME (no por su extensión de archivo) que debe tratar ambos archivos como imágenes, en lugar de vídeos u otros tipos de archivos.

Por defecto, WordPress almacena una lista de tipos MIME registrados en wp-includes/functions.php. Sin embargo, no todos los tipos MIME reconocidos se pueden cargar en el Escritorio.

Y si intentas subir un archivo con una extensión fuera de esta lista predefinida, como es el caso de WebP, verás el mensaje de error anterior.

En la documentación de tu empresa de hosting, encontrarás diversas alternativas para modificar cómo permitir que puedas subir este nuevo tipo MIME.

Normalmente es mediante la utilización de un plugin con el que puedes añadir tipos de fichero extra o modificando directamente el fichero.

También puedes personalizar tu WordPress usando el siguiente código:

function nelio_custom_upload_mimes( $existing_mimes ) {
  $existing_mimes['webm'] = 'image/webm';
  return $existing_mimes;
}
add_filter( 'mime_types', 'nelio_custom_upload_mimes' );

O, alternativamente, modificar el fichero wp-config.php, añadiendo la siguiente línea de código:

define('ALLOW_UNFILTERED_UPLOADS', true);

Una vez realizadas las modificaciones pertinentes, ya deberías poder cargar tu imagen. Siguiente intento…

Pues parece ser que tampoco va a poder ser… En este caso, tal y como se comenta en el foro de WordPress, para algunos la solución ha sido asegurarse de que la librería imagick estaba instalada y reiniciar el servidor. Para otros (como ha sido mi caso), la única forma de cargar la imagen ha sido utilizando el enlace del browser-uploader que encuentras en la parte inferir del panel de cargar imágenes. Voilà! Ya tengo mi imagen WebP cargada en mi biblioteca de medios.

Si bien es cierto que la primera vez que usas una nueva funcionalidad recién sacada del horno tienes muchos puntos de encontrarte con algún problemilla, ya ves, que ya tienes la opción de subir imágenes WebP en la biblioteca de medios de tu WordPress.

Plugins de WordPress para convertir las imágenes a WebP

Ya te he comentado el ahorro de espacio y carga que supone tener las imágenes en este formato WebP. Y el problema nos surge al pensar en cómo convertir todas las imágenes que tenemos ya subidas en nuestro servidor. La buena noticia, como una gran mayoría de veces en WordPress, es que disponemos de varios plugins que nos pueden hacer este trabajo.

Y no sólo esto, algunos de ellos, antes de cargarte cualquier imagen a tu biblioteca, pueden forzar la conversión de la imagen a WebP, sin que tengas que preocuparte de realizarla tu anteriormente. Algunos de los más conocidos son:

• EWWW Image Optimizer
• WebP Express
• ShortPixel
• Imagify
• Optimole
• WebPConverter for Media

Finalmente, comentar que las principales empresas de hosting de WordPress son muy conscientes de la importancia de tener optimizadas las imágenes en tu web. Por este motivo, algunas de ellas ya ofrecen directamente su plugins incorporados en sus servidores que se encargan de automáticamente generar las imágenes que subes a la biblioteca a WebP para que siempre se sirvan esas a los navegadores que las soportan. Este es el caso, por ejemplo, del plugin de SG Optimizer de Siteground.

Conclusión

Aunque todavía es un poco reciente para adoptar como único estándar de imágenes, el formato WebP tiene cada vez más impulso. Y seguramente estamos más cerca de lo que creemos de que se adopte masivamente en WordPress y los navegadores.

Nos alegramos de que WordPress no se quede atrás y que todos podamos optimizar el SEO de nuestras webs dando soporte al formato de imagen WebP.

Imagen destacada de marina en Unsplash.