Como usar archivos webP en WordPress para mejorar los tiempos de carga

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 los iPhone o en Firefox ¿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)

En NGINX

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:

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.

Para ello mi elección 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 imagenes 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 el plugin WP webp, que mediante el JavaScript WebPJS mostrará la imagen en webp si el navegador es compatible y sino la imagen en JPG.

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.

¿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 este artículo para mejorar la calidad del blog ...

FlojitoNo está malEstá bienMe ha servidoFantástico (6 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

9 comentarios

  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!!

    Publica una respuesta
    • Opino igual. Y por otro lado, ayudará a su implantación si WordPress decide añadir compatibilidad, ahora mismo somos un revulsivo del mercado

      Publica una respuesta
      • 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…).

        Publica una respuesta
  2. Es un formato fantástico. Pero sin compatibilidad en los principales navegadores de escritorio y smartphone…

    Publica una respuesta
  3. No le veo ninguna utilidad mientras no los navegadores no incorporen este formato…

    Publica una respuesta
  4. 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.

    Publica una respuesta
  5. 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.

    Publica una respuesta

Envía un comentario

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