¿Qué es el Formato webP en WordPress?

En el día de hoy, vamos a conocer un formato de archivo de imagen que, posiblemente, dentro de poco tiempo, se convertirá en un nuevo estándar. Y no solo porque Google sea su creador, lo cual influye, sino por sus grandes virtudes, las cuales ayudan a optimizar los tiempos de carga de cualquier web sin que perdamos calidad en nuestras imágenes. Se trata del formato webP. ¡Vamos a verlo!

¿Qué es el formato webP?

Como decíamos anteriormente, es un formato de archivo de imagen desarrollado por Google, el cual nos brinda una altísima compresión de imágenes sin pérdida de calidad para poder utilizarlas en webs.

Una imagen en formato JPG puede pesar en webP hasta un 26% menos sin pérdida de calidad, mientras que, si elegimos la opción de “supercompresión” y “con pérdidas”, el tamaño de este se reduce normalmente entre un 34%-45%.

¿Qué ventajas otorga usar el formato webP?

• Las ventajas son varias, entre ellas encontramos las siguientes:
• Mejoras en el apartado SEO al tener imágenes con pesos reducidos, por lo que el tiempo de carga de nuestra web es más bajo.
• Menor peso de archivos de imagen.
• Cualquier formato puede convertirse a webP.
• Reducción del tamaño de ficheros PNG en hasta un 40%.
• Reducción del tamaño de ficheros JPG en hasta un 45%.

Desventajas de usar el formato webP

A pesar de todo, el formato webP también presenta una serie de desventajas, entre las cuales encontramos las siguientes:

• WordPress no es compatible aún con webP, dado que, este MIME no ha sido incluido nativamente por defecto aún.
• Actualmente, son pocos los navegadores compatibles con este formato.  Tan solo Chrome y Opera en sus últimas versiones lo soportan, tanto en su versión móvil como en escritorio.    Y, aunque Chrome y Opera formen casi el 70% de los navegadores usados, estoy seguro de que no querrás perder al 30% restante de usuarios, ¿verdad?

Pero… ¿De verdad es tan bueno el formato webP?

Imagen tomada por Christophe Mehay bajo licencia GFDL

Observa la fotografía. ¿Eres capaz de apreciar alguna diferencia?

Si observas bien, podrás ver que la imagen sin ninguna pérdida y en formato PNG tiene un tamaño de 1,5 MB, sin embargo, en formato webP se reduce a 95,7KB.

Probablemente, también te habrás dado cuenta de que el tamaño en JPG es menor que en formato webP, pero claro, la calidad (represantada con la Q de Quality) de la imagen en formato webP es mucho mayor que la de JPG.

¿Cómo se diferencia el tamaño en distintos formatos?

Veamos a continuación cuánto ocupan diferentes imágenes en distintos formatos:

De JPG a webP

De PNG a webP

De GIF a webP

¿Qué tan importante sería la estandarización del formato webP?

Tanto si se populariza el formato webP, como cualquier otro formato que sea mejor que éste, la ventaja para todas las personas dedicadas al desarrollo web sería muy grande, puesto que, una web con peso liviano es sinónimo de carga rápida y, por lo tanto, un paso adelante en la mejora de nuestro SEO.

¿Cómo puedo usar el formato webP en WordPress?

Como mencionamos al comienzo del post, WordPress, por defecto, no permite que se suban imágenes con este tipo de formato, ya que éste no ha sido incluido aún como nativo actualmente.

Sin embargo, podemos hacer que WordPress soporte este tipo de ficheros añadiendo unas cuantas líneas de código en varios archivos. Si estás pensando en usar el formato webP en tu servidor, aquí te decimos como hacerlo.

1. En el caso de que utilices como servidor web Apache, deberás añadir lo siguiente a tu fichero .htaccess:

 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 mod_headers.c>
 Header append Vary Accept env=REDIRECT_accept
 </IfModule>
 AddType image/webp .webp

2. En el caso de que utilices NGINX, deberás añadir lo siguiente:

 # 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 añadidas estas líneas de código al fichero correspondiente, deberemos añadir el nuevo tipo de MIME. Para ello, nos dirigiremos al archivo functions.php de nuestro tema activo y añadiremos las siguientes líneas de código:

 function mime_type_webp( $existing_mimes ) {
     $existing_mimes['webm'] = 'image/webp';
     return $existing_mimes;
 }

 add_filter( 'mime_types', 'mime_type_webp' );

Convertir imágenes a formato webP mediante plugin

Si no quieres añadir nada de código o simplemente no puedes, no pasa nada, puedes usar un plugin en su lugar. Concretamente, puedes usar el plugin EWWW Image Optimizer, el cual es gratuito.

Una vez instalado y activado, dirígete a Ajustes > EWWW Image Optimizer > y activa las 3 casillas. ¡No olvides guardar los cambios cuando acabes! Y, finalizados estos pasos, el plugin convertirá automáticamente las fotos tanto que ya están subidas como las que subas al formato webP.

Conclusión

Como has visto, el formato webP presenta unas ventajas que lo hacen muy tentador para su uso, pero, en mi opinión, no recomendaría su uso aún, al menos no hasta que WordPress de un soporte nativo y, sobretodo, no hasta que sea compatible con la mayoría de los navegadores.