webp wordpress

WebP y WordPress = ¿mejoran el tiempo de carga y el rendimiento?

Muchos usuarios de WordPress están interesados en el formato de imagen WebP porque combina las ventajas de JPG y PNG. Sin embargo, no sustituye a los dos formatos de imagen habituales. Sin embargo, para los usuarios de WordPress que utilizan muchas imágenes, WebP debería ser especialmente útil. En este artículo explicamos por qué.

En el mundo actual, es cada vez más importante hacer que la experiencia del usuario tusgrupo objetivo sea lo más agradable y fácil posible. Las personas son visuales y suelen absorber más rápido y mejor la información que ven. Un rápido vistazo a una valla publicitaria, desplazarse por una página web antes de que llegue el autobús en cinco minutos. Todos conocemos estas situaciones. 

Dado que las imágenes suelen ocupar más de la mitad del espacio de almacenamiento de un sitio web, existe un gran potencial de optimización en este sentido.

Ahora algunos datos sobre WebP antes de pasar a los temas.

  • WebP es compatible con el formato de vídeo VP8, que es adecuado para pequeñas imágenes animadas, por ejemplo, como las que conocemos de los GIF.
  • El tamaño máximo de la imagen para WebP es de 16.383 x 16.383 píxeles.
  • También se puede ampliar o reducir una imagen WebP, de forma similar a los archivos SVG, pero muchos no lo permiten por razones de seguridad.
Consentimiento*
Este campo es de validación y no debe ser modificado.

Diferencias con respecto a PNG y JPG 

WebP y PNG

Una imagen WebP es hasta aproximadamente un 25-30 por ciento más pequeña que una PNG, sin pérdida de calidad. Al mismo tiempo, los fondos pueden seguir siendo transparentes. Esto sólo varía entre la propia imagen, la profundidad de la imagen, los detalles, el espacio de color, etc. Debido al pequeño tamaño del archivo, el formato WebP aporta una clara ventaja en términos de rendimiento.

Basándose en las dos imágenes, se puede decir que la imagen WebP es un 30,1% más pequeña que la versión PNG. En este caso he elegido el método sin pérdidas y he ajustado deliberadamente el deslizador de calidad al 80%. El 20% restante del 100% apenas se ve, por lo que el 80% es perfectamente suficiente para las aplicaciones en línea. 

Desventajas del formato PNG

Los PNG no son adecuados para los fotógrafos porque crean un archivo de imagen considerablemente más grande. El formato PNG se utiliza sobre todo para las capturas de pantalla porque los PCs guardan las imágenes como PNG. ¿Por qué? - Porque las capturas de pantalla suelen ser una mezcla de imágenes y texto. 

PNG se utiliza, por ejemplo, para imágenes que requieren un fondo transparente. Esto hace que el formato sea muy versátil y popular en el diseño gráfico, donde a menudo confluyen muchos elementos.

PNG está disponible en los formatos PNG 8 y PNG 24. PNG 8 utiliza una profundidad de color de 8 bits y un máximo de 256 colores. PNG 24 utiliza una profundidad de color de 24 bits con hasta 16,7 millones de colores. Así, PNG 24 es comparable al formato JPEG. Sigamos con el formato JPG:

El formato de imagen JPG

En comparación directa con JPG, la imagen WebP es entre un 25 y un 35 % más pequeña, a pesar de la misma calidad de la imagen. No hay nada que decir aquí entre los dos candidatos JPG y WebP - WebP es simplemente la mejor opción.

Sobre la base de las dos imágenes, puede decirse que la imagen WebP es un 24,7 % más pequeña que la versión JPG. En la versión JPG he puesto la calidad en "Alta".

El formato JPG es adecuado si puedes vivir con pérdidas de calidad y si la nitidez y los detalles no son importantes. Este formato se utiliza a menudo para imágenes ricas en color porque la composición de JPG permite representar muchos colores y gradaciones.  

Unapequeña nota: el aspecto final de las imágenes en la pantalla depende de muchos factores: por ejemplo, la resolución de la pantalla (HD, QHD, UHD/4K, 8K, etc.), la configuración de la pantalla como sRGB, Adobe RGB, el modo de visualización respectivo de los monitores y el dispositivo final con el que se ven las imágenes. En los últimos días, yo mismo tuve el problema de que mis imágenes se veían diferentes en mi pantalla y en el sitio web. 

Espacio de color/profundidad

Aquí es donde la cosa se complica un poco. WebP se basa en el algoritmo de compresión de vídeo con pérdidas VP8, con una compresión de hasta 24 bits y un tamaño máximo de 16.383 x 16.383 píxeles. Por lo tanto, siempre tiene una profundidad de color de 24 bits, al igual que el JPG. La profundidad de color de PNG oscila entre los 8 y los 48 bits, siendo esta última la que tiene menos sentido debido al gran tamaño del archivo,

Como flujo de bits VP8, la generación sin pérdidas de imágenes WebP sólo funciona con el formato de imagen de 8 bits, también conocido como formato de imagen YUV420.

El formato YUV420 desglosado: Veamos primero cómo un monitor muestra una imagen por defecto: Cada color puede representarse con tres colores (el llamado modelo RGB), es decir, rojo, verde y azul.

Cada color por separado, es decir, el rojo, el verde y el azul, puede registrarse en el PC en 1 byte (8 bits). Por lo tanto, UN píxel de un monitor tiene 3 bytes (cada byte tiene información sobre el color rojo, verde y azul respectivo).

El ojo humano es muy sensible a la luminosidad, pero menos a los colores y sus gradaciones. Así, la denominación YUV se compone de Y = luminancia (brillo) y U y V significan crominancia (color). El YUV es, por tanto, como el RGB, con el que se representa un color.

¿Pero por qué lo necesitamos de todos modos?

Porque el tamaño del archivo es importante aquí. En el modelo RGB tenemos que utilizar 3 bytes (24 bits) para almacenar un color. Mientras que con YUV, el tamaño se reduce a la mitad debido a la forma en que se calcula y se almacena. Es complicado, pero creo que en este momento la información es suficiente y aporta algo de claridad.

Soporte/Apoyo

Las estadísticas muestran qué navegador es el más utilizado por cada "dispositivo final", como el PC, la tableta o el smartphone. Dado que WebP no es soportado por todos los navegadores, debes estar atento a esto.

Por supuesto, se puede ver que los "dispositivos móviles" están más en el punto de mira, lo que también explica que se proporcione una mejor compatibilidad con WebP para el smartphone. Por lo tanto, asegúrese de comprobar las estadísticas de usuarios de tuy ver desde qué navegador y dispositivo recibe más visitantes.

La siguiente lista muestra las versiones de los navegadores y los dispositivos finales que ya pueden disfrutar de WebP.

Soporte actual para navegadores de escritorio

  • Firefox desde la versión 65.xOpera desde la versión 39.xChrome desde la versión 23.xEdge desde la versión 17.xInternet Explorer desde la versión 11.x

Soporte actualizado para dispositivos móviles

  • Navegador Android a partir de la versión 5.6 (Chromium 67)Android Chrome a partir de la versión 73.xOpera Mini todas las versionesOpera Mobile a partir de la versión 12.xAndroid Firefox a partir de la versión 66.xInternet Explorer Mobile a partir de la versión 11.x

WebP VP8 (imágenes animadas)

  • Google Chrome (Escritorio y Android) desde la versión 32.xMicrosoft Edge desde la versión 18.xFirefox desde la versión 65.xOpera desde la versión 19.x

Actualmente no he podido encontrar soporte de WebP para otros navegadores y dispositivos.

Requisitos de WebP en WordPress

Hasta ahora, ninguna, pero... Por desgracia, la mala noticia es que WordPress no admite actualmente imágenes WebP por sí mismo. Por lo tanto, pasamos al siguiente punto.

Formas de integrar WebP en WordPress:

  1. Utilizar un plugin

Los plugins ShortPixel (versión gratuita), Optimus (versión de pago) o EWWW Image Optimizer (versión gratuita) son adecuados para este fin.

Optimus:

Optimus WebP

Lamentablemente, WebP sólo es compatible con la versión de pago de Optimus. Dado que Raidboxes ya tiene integrado el almacenamiento en caché del lado del servidor, no necesita un plugin "Cache Enabler" como recomienda Optimus.

ShortPixel:

WebP de píxeles cortos

En ShortPixel puede marcar la casilla como se muestra arriba. Pero primero resetearía todas las imágenes que tengas al original y luego las optimizaría todas a la vez con el plugin. Entonces también debería ver al mismo tiempo que tiene diferentes tipos de archivo de sus imágenes.

Optimizador de imágenes EWWW:

Eww Image Optimizer WebP
  1. Hacer ajustes en el .htaccess de WordPress

Algunos proveedores de hosting han bloqueado deliberadamente la posibilidad de cambiar algo en el archivo .htaccess por razones de seguridad. Si alojas en un servidor Apache, puedes hacer el siguiente ajuste:

<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

Y en un 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;

Por cierto, Raidboxes ya soporta esta regla de reescritura por defecto.

¿Dónde puedo encontrarlos?

El archivo se encuentra en el servidor web en el que se instaló WordPress. El directorio raíz es el directorio principal donde se encuentra el dominio en el alojamiento web. Si no puede verlo, debe establecer la "máscara de archivos remotos" en -la para que también pueda ver los archivos ocultos. Por supuesto, esto supone que tienes derechos de acceso o incluso que te alojas tú mismo y utilizas un programa FTP como FileZilla.

Existe una tercera -y algo complicada- posibilidad de añadir algo en el archivo function.php de tu tema de WordPress para que puedas subir imágenes en formato WebP por defecto. Puedes leer cómo funciona en este artículo.

¿Para quién es adecuado WebP?

En principio, WebP es útil para cada sitio. Por supuesto, este formato es especialmente adecuado para sitios web con muchas imágenes. Por ejemplo, para los fotógrafos que quieren mantener una calidad de imagen lo más alta posible, pero que siguen dando mucha importancia a un tiempo de carga rápido. Pero otros usuarios de WordPress, como los creativos o los que tienen algo que mostrar de forma pictórica, también deberían hacer todo lo posible para que la experiencia de usuario de sus potenciales clientes y seguidores sea lo más agradable posible.

Conclusión sobre WebP y WordPress

Desgraciadamente, el WebP no es todavía tan común como el JPG y el PNG, pero sin duda será cada vez más importante en el futuro. Al fin y al cabo, WebP puede mejorar el rendimiento tussitio y, por tanto, la experiencia del usuario y la satisfacción tusdel grupo objetivo.

Plugin: ¿sí o no?

Hay excelentes plug-ins que hacen el trabajo de soporte de WebP por ti y tambiénoptimizan las imágenes de tu. Personalmente, he utilizado el plugin Optimus para esto. De lo contrario, sin duda valdría la pena considerar la posibilidad de incluirlo en el sitiocomo código, sobre todo porque así se ahorraría un plugin más. Pero, en definitiva, es aconsejable utilizar un plugin para este fin.

Espero que haya disfrutado del artículo y espero que me dé su opinión.

tuPreguntas sobre WebP y WordPress

¿Qué preguntas tienes para Stefan? No dude en utilizar la función de comentarios. ¿Quiere estar informado de los nuevos artículos sobre marketing online? Entonces síganos en Twitter, Facebook, LinkedIn o a través de nuestro Newsletter.

¿Te ha gustado el artículo?

Con tu valoración nos ayudas a mejorar aún más nuestro contenido.

Escribe un comentario

Tu dirección de correo electrónico no se publicará.