Si has dado últimamente una pasada por Google PageSpeed Insights es posible que hayas recibido el mensaje Publica imágenes con formatos de próxima generación como oportunidad de mejora, en el que te dice que los formatos como JPEG 2000, JPEG XR y WebP se descargan más rápido y consumen menos recursos que JPG o PNG.

Pues sí: estamos a punto de ver un salto radical en un tipo de archivos cuyos formatos llevaban décadas sin cambiar, algo insólito en un mundo como el digital. Pero llegó la hora: si no habías oído hablar de WebP y compañía, a partir de ahora tendrás que empezar a adaptar tu web, porque las imágenes con formato de próxima generación ya han llegado.

Qué son las imágenes con formato de próxima generación: JPEG 2000, JPEG XR y WebP

Puede que ni siquiera hayas oído hablar de ellos antes, en especial de WebP, pero te aseguro que eso va a cambiar: dentro de poco no sólo lo oirás hasta en la sopa (como decimos por aquí) sino que, junto con JPEG 2000 y JPEG XR se convertirá en el formato estándar para imágenes web. Y es que los formatos de imagen de próxima generación ya están aquí.

Y ya era hora: el estándar JPEG fue creado en 1992 (su última versión es de 1994), mientras que el estándar PNG se aprobó en 1996. Eso quiere decir que utilizamos formatos que fueron establecidos hace aproximadamente veinticinco años. Está claro que, en la era en que los ordenadores cuánticos son ya una realidad, algo tenía que cambiar en el campo de los formatos de imagen.

Los nuevos formatos de imagen

Y bien, el cambio ya ha llegado. JPEG 2000, JPEG XR y WebP son formatos de archivo de imagen modernos, con unas capacidades de compresión mayores que los formatos tradicionales (JPEG, PNG, GIF) y con menos pérdida de calidad. En una palabra: imágenes de mayor calidad con menos peso. Justo lo que cualquier webmaster busca (ya sabes, menor peso = carga más rápida).

Y entonces, ¿por qué narices no estamos ya todos usándolos? Pues porque hay que desarrollar nuevo software que maneje estos estándares (este paso ya está dado), hacer que se extiendan y vencer la resistencia a «lo malo conocido».

Y justo Google está ahora en ese momento de hacer que se extiendan, bien metido en su papel de abanderado de los avances en tecnología web.

Las imágenes WebP

Y, aunque todos ellos son formatos con estas características, por el nombre ya se puede ver que los dos primeros (JPEG 2000 y JPEG XR) son evoluciones del estándar JPEG, pero ¿qué narices es WebP.

Pues WebP es, ni más ni menos, el formato de imagen open source de… ¡Google! Sí, amigo. Y ya sabes que a Google le encanta que utilicemos sus tecnologías (como AMP) en nuestros sitios web y, quizá (intuyo), eso le ablanda un poquito el corazón a la hora de posicionarlas en los resultados de búsqueda. Al fin y al cabo en eso cada gotita cuenta.

Las imágenes WebP tienen extensión .webp y hay, en realidad, diversas variaciones del estándar, en función de si la reducción de calidad es recuperable (lo que se conoce como lossless, como en el PNG) o no lo es (lo que se llama lossy, como en el actual JPEG). Pero, en resumen y sin entrar en detalles técnicos, las imágenes WebP codifican las imágenes con la misma calidad que JPEG o PNG pero con un peso entre el 25% y el 34% menor que éstas, y además, al contrario que JPEG, soportan transparencias y, como GIF, soportan animaciones.

Calcula: el peso de las imágenes de tu web reducido entre una cuarta parte y un tercio (de media), sin pérdida de calidad, y con transparencia y animaciones nativas. Todo lo que hacen JPEG, PNG y GIF, en un sólo formato y con menos peso.

El soporte para WebP en navegadores

Sé que lo quieres y, como dije más arriba, el software ya existe; ahora volveremos sobre esto y sobre cómo implementarlo en WordPress. Pero primero las malas noticias: no todos los navegadores soportan el formato WebP.

Siendo un formato de Google, huelga decir que Chrome lo soporta plenamente, tanto en su versión para escritorio como en la app para móviles, al igual que el navegador de Android. También Opera lo soporta plenamente. Firefox ha comenzado a soportarlo (¡por fin!) a finales de 2018, aunque a día de hoy (marzo de 2019) de momento sólo en la versión de escritorio, sin embargo la funcionalidad está ya disponible en la versión beta de su app para Android, así que llegará en breve.

En Internet Explorer el formato está soportado en escritorio, pero todavía no en su versión para móviles. Safari por su parte parece no enterarse de la película, como si la cosa no fuera con él.

Pero vamos, que un formato con estas características y respaldado por Google, ¿alguien piensa que no va a convertirse en un estándar, más bien pronto que tarde?

Imágenes WebP en WordPress

Y aquí llegamos a lo que más nos interesa: ¿cómo narices hago para implementar las imágenes WebP en WordPress?

Qué se necesita para mostrar imágenes con formato de próxima generación en WordPress

Según lo dicho hasta aquí, habría que:

• Añadir el formato de archivo WebP a los formatos permitidos por WordPress para poder subirlos a la biblioteca de medios, ya que actualmente (versión 5.1) este formato no está reconocido
• Convertir las imágenes que ya tienes subidas a WebP
• Determinar si el navegador del cliente es capaz de soportar este formato de archivo
• Si no lo es, mostrarle la versión en JPEG o PNG en lugar de la imagen en WebP

Actualmente no es posible subir archivos WebP a la biblioteca de medios de WordPress

El primer punto es bastante sencillo: se puede conseguir usando el filtro upload_mimes. En cuanto a convertir las imágenes que ya están subidas (si no, de poco sirve hacer la adaptación), existen conversores online como éste, y existe un plugin para Photoshop. Cualquiera de las dos opciones requiere un trabajo manual, que casi ni se plantea si la web ya tiene unos pocos cientos de imágenes en la biblioteca de medios.

En cuanto al resto, es necesaria bastante programación específica en JavaScript para poder conseguirlo. Afortunadamente, esta programación ya está disponible a través de…

WP Smush Pro

Pues sí, WP Smush Pro ya tiene integrado por completo (aunque de momento sólo en fase beta, pero ya disponible en la versión actual del plugin) el soporte para WebP en todos sus niveles:

• Permite la subida de archivos WebP a la biblioteca de medios
• Incorpora una herramienta de conversión de imágenes de la biblioteca a formato WebP, incluso en modo bulk (en lotes)
• Detecta si el navegador del visitante tiene soporte para WebP
• Sirve la imagen WebP si es así, y la versión en formato tradicional en caso contrario

Todo hecho, pero con una pega: estos dos últimos puntos se ejecutan desde la CDN de Smush Pro, lo que quiere decir que sí o sí es necesario que tengas una licencia válida para el plugin (no basta con tener el plugin en sí, sino que es necesario tener la licencia y renovarla año tras año).

Alternativas a WP Smush Pro: implementando WebP en WordPress

Vamos a ver qué alternativas tenemos a esto, ya que haberlas, haylas.

Habilitar la subida de archivos WebP

En primer lugar, hay que habilitar la subida de archivos WebP a la biblioteca de medios de WordPress. Decía que es fácil de conseguir usando el filtro upload_mimes. Aquí tienes el código necesario para ello:

add_action( 'init', function() {

	add_filter( 'upload_mimes', 'ejr_mimes_webp' );
}, 10 );

function ejr_mimes_webp( $mimes ) {

	$mimes['webp'] = 'image/webp';
	return $mimes;
}

Si no sabes dónde va un código así, echa un vistazo a estas entradas:

Convertir las imágenes a WebP y mostrarlas cuando sea posible

Resuelto el tema de subir imágenes WebP a la biblioteca de medios, tenemos también que ocuparnos de las que ya estén subidas anteriormente, ya que convertirlas manualmente no es una opción nada cómoda.

Para ello podemos ayudarnos del plugin gratuito WebP Express, que permite convertir las imágenes a WebP al subirlas a la biblioteca de medios y dispone también de herramienta para conversión en lotes. De hecho, WebP Express convierte (o, mejor dicho, permite convertir) todas las imágenes de tu instalación, incluidas las que establecen plugins y plantilla desde sus propios directorios.

En la columna de la derecha puedes ver el porcentaje de reducción de tamaño de las imágenes convertidas a WebP

WebP Express es, en realidad, una herramienta integral para la gestión de imágenes WebP en WordPress (como su propio nombre indica) y se ocupa también de mostrar la versión WebP de la imagen cuando detecta un navegador que soporta el formato, y la versión en PNG/JPG cuando el formato de próxima generación no está soportado.

Cachés diferentes según el soporte para WebP

Llegados a este punto, ya puedes mostrar imágenes en WebP en WordPress a los visitantes de tu web cuyos navegadores soporten este formato de imagen de próxima generación, y en el formato tradicional (JPG o PNG) a los que no lo soporten.

Pero hay una pequeña pega: ¿qué pasa con la caché? Ahora ya no podemos simplemente cachear la web, ya que mostraríamos la misma versión cacheada a todos los visitantes, independientemente de si su navegador tiene o no soporte para WebP.

Esto lo podemos resolver con ayuda del plugin de caché Cache Enabler, que incluye una opción específica (en Ajustes > Cache Enabler) para guardar una caché con imágenes WebP que será mostrada a los navegadores compatibles, y otra sin este formato para mostrarla a los que no lo sean.

Conclusiones

Como has visto, el uso de WebP aún no está maduro en WordPress y habilitarlo requiere un poco de trabajo, aunque creo que en un plazo de tiempo relativamente corto WordPress lo soportará de forma nativa.

¿Merece la pena hacerlo ya? Bueno, depende de muchas cosas, y tendrás que sopesarlo en tu caso particular. Sobre todo vas a tener muchos beneficios en el SEO (a Google le encanta ver «sus cosas» en nuestras webs), así que si tu estrategia se basa en el posicionamiento orgánico (y los usuarios de Safari no son tu público objetivo) deberías planteártelo seriamente.

Si no es así, quizá prefieras esperar a que todos los navegadores lo soporten plenamente (ya ves que, aparte de Safari, eso es casi cosa hecha) y/o que WordPress lo incorpore a su core (esto puede tardar un poquito más) y que la funcionalidad de doble caché sea incorporada al menos por los principales plugins. En cualquier caso, ten presente que más pronto que tarde lo tendremos aquí.