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

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

ARCHIVOJPG ORIGINALJPG COMPRIMIDOFORMATO WEBPDIFERENCIA %
jpg-to-webp-1.jpg758 KB685 KB109 KB86%
jpg-to-webp-2.jpg599 KB529 KB58.8 KB90%
jpg-to-webp-3.jpg960 KB881 KB200 KB79%
jpg-to-webp-4.jpg862 KB791 KB146 KB83%
jpg-to-webp-5.jpg960 KB877 KB71.7 KB93%

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

De PNG a webP

ARCHIVOPNG ORIGINALPNG COMPRIMIDOFORMATO WEBPDIFRENCIA %
png-to-webp-1.png44 KB34 KB30 KB32%
png-to-webp-2.png46 KB35 KB33 KB28%
png-to-webp-3.png43 KB31 KB25 KB42%
png-to-webp-4.png30 KB24 KB18 KB40%
png-to-webp-5.png15 KB11 KB8 KB47%
png-to-webp-6.png34 KB24 KB18 KB47%
png-to-webp-7.png15 KB13 KB8 KB47%
png-to-webp-8.png63 KB47 KB44 KB30%
png-to-webp-9.png48 KB36 KB33 KB31%
png-to-webp-10.png17 KB14 KB11 KB35%
png-to-webp-11.png18 KB13 KB9 KB50%
png-to-webp-12.png61 KB45 KB39 KB36%
png-to-webp-13.png32 KB25 KB21 KB35%
png-to-webp-14.png26 KB21 KB17 KB35%
png-to-webp-15.png14 KB12 KB9 KB36%
png-to-webp-16.png36 KB27 KB24 KB33%
png-to-webp-17.png14 KB12 KB8 KB43%
png-to-webp-18.png21 KB18 KB13 KB38%
png-to-webp-19.png42 KB30 KB27 KB36%
png-to-webp-20.png23 KB20 KB18 KB22%

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.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(32 votos, promedio: 4.7)

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

19 comentarios en “Como usar archivos webP en WordPress para mejorar los tiempos de carga (actualizado 2020)”

  1. El inconveniente es precisamente la compatibilidad, y este es para mi un grandísimo inconveniente. En lo particular prefiero esperar que se convierta en un estándar soportado por la mayoría de navegadores ya que para entonces estoy seguro que WordPress añadirá la compatibilidad por defecto; mientras tanto considero que es limitar mucho el publico objetivo a cambio de ahorrarse unos cuantos KB, o mejor dicho, bastantes KB, aunque al menos si me preguntan a mi, creo que en estos momentos no compensa el ahorro.

    Saludos!!

      1. De hecho si WordPress añadiese compatibilidad por defecto sería un revulsivo gigantesco para este formato, que la cuota de mercado que tiene WordPress es increíble… vamos que es un referente sin duda alguna, y de que es un formato increíble, lo es sin duda alguna, especialmente al compararlo con JPG un ahorro de aproximadamente 80/90% hablamos de cantidades que ya mejorarían el SEO de cualquier página prácticamente de inmediato.

        PD: Eso sí, por curiosidad acabo de convertir con https://webp-converter.com/ un JPG de 842 KB (sí, bastante grande, era por probar nada más…) a WebP sin perdida de calidad (calidad 100, por defecto es 90) y me lo dejo en un archivo de 1.06 MB, en calidad 90 me lo dejo en 384 KB, que de todos modos no se nota la diferencia, pero pues en teoría redujo la calidad… usando https://compressor.io/compress (que hasta el momento es el que he notado que reduce más el peso sin reducir tanto la calidad) me deja un JPG de 295 KB e igualmente no se nota perdidas (claro, es una imagen bastante grande…).

        1. Juan Carlos Lopez Castillo

          Hola Javier, trata de probar bajando directamente desde google el compilador https://developers.google.com/speed/webp/download, yo he realizado varias prueba y esta funcionado perfecto, inclusive te comento que la calidad por defecto del copilador es de 75%, todas las imágenes la baje a 50% y la fotos de cabecera las baje al 75% por defecto y de 600K de mi pagina la baje a 360kb

          -q …………. quality factor (0:small..100:big), default=75

          Ejemplo
          cwebp.exe -q 25 archivo-origen.jpg -o archivo-destino.jpg

          La intención es que puedas bajar el copilador y asi elijes la opcion de calidad -q, que mas ye convenga.

          Saludos

      2. También depende del servidor web, por ejemplo, LiteSpeed. Todo el mundo que está es servidores web con LiteSpeed y utilizando el plugin de caché de LiteSpeed que hay en el repositorio, puede utilizar sin ningún problema WebP. El servidor web sabe si el navegador del visitante es compatible con WebP, y le manda la imagen WebP o la original, ya que el mismo plugin se encarga de tener ambos tipos de imagen (los transforma en sus propios servidores).

  2. Estuve probando la función, pero al hacer el cambio en el htaccess me arroja un error 500, así que tuve que revertir los cambios. Mi pregunta es, al utilizar el plugin WP Webp y el cache enabler, igual debo habilitar las opciones del EWWW Image Optimizer (dicho sea de paso lo vengo utilizando ya un buen tiempo); o sólo debo instalar esos dos plugins si hacer los cambios en el EWWW. Muchas gracias por su ayuda.

  3. Carlo Bentivegna

    Para cuando photoshop me permita guardarlo en ese formato lo implementaré, me parece increible que pueda comprimir tanto desde hace años han habido muy pocos formatos que hayan mejorado los ya conocidos, solo han cambiado sistemas de codificaciones.

  4. Johana Grafico

    Instalé este plugin EWWW Image Optimizer y me pide que active una API paga, además me pide que le diga supongo que al cpanel que active la funcion exd() algo asi para convertir las imagenes a webp, esto es muy complicado para mi que de programación no se mucho casi nada

  5. No concuerdo con la postura de «esta bueno pero aun no hay compatibilidad». Entiendo que el articulo es de hace un año y probablemente en ese entonces no habia la misma compatibilidad que hay ahora con el formato. Pero es que gracias a diversos plugins (Optimole, ShortPixel, EWWW, WebP Express y otros) podes servir la imagen correspondiente a cada navegador de acuerdo a su compatibilidad, por lo que en realidad no hay problema de compatibilidad, si alguien ingresa desde Safair (que aun no parece tener planes de soportar webp) se le muestra JPG o PNG y listo. Sin embargo los usuarios de otros navegadores como Chrome, Firefox y Opera, entre otros, se veran beneficiados.

    No veo razones para no implementar esto.

      1. Coincido con @aluknot:disqus Fernando, que los navegadores no sean compatibles no es un problema, el plugin WebP Express le mostrará al navegador incompatible JPG en vez de WebP…no veo el problema….

  6. Primero, que buen artículo Fernando. Bien explicado y con todas las soluciones a la mano. ¡Gracias!… segundo, yo ya estoy aplicando los beneficios del formato a mi Marketplace ya que se hace indispensable en proyectos que requieren comprimir imágenes sin perder calidad. Ademas, si nos quedamos en la falta de compatibilidad temporal… nunca daremos el salto a lo nuevo.

  7. Carlos Garcia Rodriguez

    Hola.

    Muy bueno el artículo pero creo que hay algo equivocado en el filtro que adjuntas:
    $existing_mimes['webm'] = 'image/webp';
    creo que habría que cambiarlo por
    $existing_mimes['webp'] = 'image/webp';

    Un saludo y muchas gracias!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido