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

ARCHIVO JPG ORIGINAL JPG COMPRIMIDO FORMATO WEBP DIFERENCIA %
jpg-to-webp-1.jpg 758 KB 685 KB 109 KB 86%
jpg-to-webp-2.jpg 599 KB 529 KB 58.8 KB 90%
jpg-to-webp-3.jpg 960 KB 881 KB 200 KB 79%
jpg-to-webp-4.jpg 862 KB 791 KB 146 KB 83%
jpg-to-webp-5.jpg 960 KB 877 KB 71.7 KB 93%

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

De PNG a webP

ARCHIVO PNG ORIGINAL PNG COMPRIMIDO FORMATO WEBP DIFRENCIA %
png-to-webp-1.png 44 KB 34 KB 30 KB 32%
png-to-webp-2.png 46 KB 35 KB 33 KB 28%
png-to-webp-3.png 43 KB 31 KB 25 KB 42%
png-to-webp-4.png 30 KB 24 KB 18 KB 40%
png-to-webp-5.png 15 KB 11 KB 8 KB 47%
png-to-webp-6.png 34 KB 24 KB 18 KB 47%
png-to-webp-7.png 15 KB 13 KB 8 KB 47%
png-to-webp-8.png 63 KB 47 KB 44 KB 30%
png-to-webp-9.png 48 KB 36 KB 33 KB 31%
png-to-webp-10.png 17 KB 14 KB 11 KB 35%
png-to-webp-11.png 18 KB 13 KB 9 KB 50%
png-to-webp-12.png 61 KB 45 KB 39 KB 36%
png-to-webp-13.png 32 KB 25 KB 21 KB 35%
png-to-webp-14.png 26 KB 21 KB 17 KB 35%
png-to-webp-15.png 14 KB 12 KB 9 KB 36%
png-to-webp-16.png 36 KB 27 KB 24 KB 33%
png-to-webp-17.png 14 KB 12 KB 8 KB 43%
png-to-webp-18.png 21 KB 18 KB 13 KB 38%
png-to-webp-19.png 42 KB 30 KB 27 KB 36%
png-to-webp-20.png 23 KB 20 KB 18 KB 22%

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.

¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!
VALORA ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
FlojitoNo está malEstá bienMe ha servidoFantástico (19 votos, promedio: 4,74 de 5)
Cargando…

Al dejar una valoración se recopila la IP para evitar fraudes

Autor: Fernando Tellado

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. Mi último libro es WordPress - La guía completa. 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. Sigue a @fernandot en Twitter

Comparte esta entrada en
468 ad

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para saber si ya aceptaste nuestras políticas, si ya estás suscrito a nuestra newsletter, para reconocer el estado de tu sesión si la tuvieses y para servir más rápidos los contenidos.

No se captura IPs ni siquiera para el servicio de Analytics así que tu visita es privada.

JSESSIONID, _cfuid, wpSGCachePypass, mailerlite, gdpr, gawp
mailerlite, _cfuid

Cookies de terceros

Usamos cookies de terceros con servicios, también garantes de tu privacidad, que analizan tus usos de navegación para que podamos mejorar los contenidos, si ya estás suscrito al boletín y los elementos compartidos en redes sociales y el formulario de comentarios.

1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID, disqus_unique, disqusauth
disqus_unique, disqusauth
1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID

Ir al contenido