Como usar archivos webP en WordPress para mejorar los tiempos de carga (actualizado 2022)

Hoy vamos a conocer un formato de archivos de imagen que dentro de poco será un auténtico estándar, pues no solo es que Google sea su benefactor, que influye, sino que tiene enormes virtudes que ayudan a optimizar los tiempos de carga de cualquier web.

¿Qué es el formato webP?

Es un formato de archivos de imagen desarrollado por Google que ofrece altísima compresión de imágenes con y sin pérdida para utilizarlas en webs.

Una imagen en formato webP puede pesar hasta un 40% menos que la misma imagen en JPEG manteniendo una calidad de visualización perfecta.

Esto hace que, sin pérdida de calidad, podamos ofrecer una gran experiencia visual en nuestras webs al tiempo que conseguimos un rendimiento y tiempos de carga fantásticos.

El formato webP lo desarrolló Google en 2010 y aún no ha conseguido una implantación global a pesar de sus ventajas.

Ventajas de webP

• Menores tamaños/peso de archivos de imagen
• Cualquier formato puede convertirse a webP
• Mayor calidad que otros formatos, a pesar de un peso menor
• Mejoras de SEO al conseguir tiempos de carga de página menores
• Comparado con JPEG su peso es un 35% menor
• Comparado con PNG su peso es un 45% menor

Desventajas de webP

• WordPress no es compatible con webP por defecto, al no ser un tipo MIME incluido nativamente por defecto.
• Pocos navegadores aún compatibles con webP. Solo Chrome y Opera (en sus versiones de escritorio y móvil) son actualmente compatibles, y solo en sus últimas versiones. El resto de navegadores mostrarán un marcador de posición de imagen rota. Vale que Chrome es el 70% del mercado de navegadores pero nadie quiere que sus imágenes no se vean en IE y Edge, o en los iPhone y ordenadores Mac ¿verdad?

¿De verdad es tan bueno webP?

Mira el resultado de estas pruebas, que supera ampliamente la compresión promedio indicada antes.

De JPG a webP

WebP ofreció una disminución media del 85.87% en tamaño de archivo.

De PNG a webP

WebP ofreció una disminución media de un 42.8% en tamaño de archivo.

¿Por qué es importante la implantación de webP?

Que se popularice webP, o cualquier otro formato que lo mejore es vital para el desarrollo de la red, pero sobre todo para que la navegación sea cada vez más rápida.

Según httparchive, en agosto de 2016 las imágenes son más del 64% del peso de una web promedio. Normalmente suelen pesar más que todo tu CSS, JS y HTML combinados.

Luego, elegir un método de optimización de imágenes como webP, que ofrezca calidad y poco peso es crucial para reducir la carga de una web, pues cuanto menos pese normalmente menos tardará en cargarse completamente.

Y esto no es solo para tus visitantes, pues Google ya ha anunciado que la velocidad de carga de las páginas es un factor de puntuación en los resultados de búsqueda.

Cómo usar webP en WordPress

Si ya estás convencido vamos a ver cómo utilizar ya webP en WordPress, empezando por el principio.

Añade compatibilidad de webP a WordPress

Lo primero es hacer que WordPress reconozca y permita subir archivos webP, pues si no hacemos nada lo que veremos será esto:

Para ello hay que añadir algo de código al archivo de configuración de tu servidor para que se permita escribir y re-escribir en archivos webP.

En Apache (.htaccess)

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTP_ACCEPT} image/webp
	RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
	RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
	Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

En NGINX

# http config block
map $http_accept $webp_ext {
    default "";
    "~*webp" ".webp";
}
# server config block
location ~* ^/wp-content/.+\.(png|jpg)$ {
    add_header Vary Accept;
    try_files $uri$webp_ext $uri =404;
}

Una vez guardados los cambios WordPress ya reconocerá y permitirá usar los archivos webP.

Añade el nuevo tipo MIME

A continuación habría que permitir a WordPress que suba archivos webP. Para ello añadiremos el siguiente código a nuestro plugin de personalizaciones o al archivo functions.php del tema activo:

function mi_nuevo_mime_type( $existing_mimes ) {
	// añade webp a la lista de mime types
	$existing_mimes['webp'] = 'image/webp';
	// devuelve el array a la funcion con el nuevo mime type
	return $existing_mimes;
}
add_filter( 'mime_types', 'mi_nuevo_mime_type' );

De todos modos, el mejor modo de usar webP en WordPress no es subirlos directamente sino convertir tus actuales archivos JPG y PNG, para así optimizar lo que ya tienes, y de paso facilitar la carga de archivos, que podrás seguir haciendo en tu formato habitual.

Instala un plugin que convierta a webP

Lo siguiente es instalar un plugin que no solo convierta cada nuevo archivo que subamos a webP, sino que también lo haga con los actuales.

Uno muy completo es el plugin gratuito EWWW Image Optimizer.

Una vez instalado y activo ve a Ajustes > EWWW Image Optimizer. Una vez en la pantalla pulsa en la pestaña Ajustes WEBP.

Como ves en la pantalla anterior, hay que activar los ajustes de conversión a webP, que por defecto vienen inactivos.

A partir de ahora el plugin convertirá tus imágenes subidas a webP y también podrás hacer conversiones masivas de las imágenes existentes a este formato de imagen.

Hasta aquí ya hemos hecho mucho, y lo primero es que WordPress pueda usar los archivos webP optimizados desde nuestras subidas de JPG, PNG, etc.

Comprobar si funciona es fácil. Copia la URL del webp generado en la optimización, que verás en la biblioteca de medios.

Y pega la URL al insertar una imagen en una entrada y verás que ya se muestra.

También en tu contenido.

Caché para imágenes WebP

Una vez hecho lo anterior ¿qué pasa con la caché? ¿quién le dice a WordPress qué navegador es compatible para mostrarle las versiones WebP de las imágenes convertidas?

Pues para eso tenemos el plugin Cache Enabler, que entre sus ajustes incluye uno para crear una versión de caché específica para que se muestren las imágenes webP a los navegadores compatibles.

Instala un plugin que lo haga todo

Otro modo es usar plugins como WebP Express, que mediante WebP Convert mostrará la imagen en WebP si el navegador es compatible y sino la imagen en JPG.

Otra opción muy buena, sin tener que configurar casi nada, es WebP Converter for Media, es poco más que activar, elegir un par de ajustes y ya.

De paso añade la compatibilidad MIME para poder subir imágenes en WebP a WordPress.

Jetpack

Pues sí, mira por donde el módulo Photon de Jetpack es compatible con imágenes webP y las mostrará desde los servidores de alta velocidad de wordpress.com si está activo.

SG Optimizer

Y, por supuesto, si tienes tu web alojada en SiteGround, el plugin SG Optimizer lo hace todo automático y muy fácil, además de optimizar tu web en todos los aspectos.

Cómo servir gratis imágenes WebP en SiteGround

¿Debería entonces usar el formato webP en WordPress?

Como habrás visto, aún no es algo banal el uso de webP en WordPress y, bajo mi punto de vista, hasta que WordPress no incluya soporte nativo del formato, pero sobre todo, hasta que la mayoría de los navegadores no sean compatibles, creo que es mejor de momento no hacer experimentos con el formato.

Hay muchas otras cosas que hacer para optimizar WordPress con las herramientas y formatos disponibles. Ya implantaremos (masivamente) webP cuando esté realmente adoptado por WordPress y los navegadores.

Que este artículo te sirva para aprender, conocer más posibilidades, y sobre todo para irte preparando para las tecnologías que serán estándar en unos meses o años.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)