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

Stefan Römershäuser Última actualización 21.10.2020
8 min.
webp wordpress
Última actualización 21.10.2020

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 tus los visitantes del sitio web 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. El rápido vistazo a una valla publicitaria, el desplazamiento 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 representar 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 más sobre WebP antes de pasar a los temas.

  • WebP es compatible con el formato de vídeo VP8, que es adecuado, por ejemplo, para pequeñas imágenes animadas 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.
  • Además, puedes aumentar o reducir la escala de una imagen WebP, de forma similar a los archivos SVG, pero muchos no lo permiten por razones de seguridad.

En este artículo cubrimos hoy los siguientes temas:

  1. Diferencias con respecto a JPG y PNG

- Comparación del tamaño de los archivos
- Espacio de color/profundidad
- Apoyo/Apoyo

  1. ¿Qué requisitos necesito para WebP en WordPress ?
  2. ¿Cómo puedo insertar imágenes WebP en WordPress ?

- Utilice un Plugin
- Añadir algo al archivo .htaccess del servidor tu
- Function.php archivo tu WordPress -Themes añadir.

  1. Mi conclusión sobre WebP

Diferencias con respecto a PNG y JPG

WebP y PNG

Una imagen WebP es hasta un 25-30 por ciento más pequeña que una PNG, sin pérdida de calidad. 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.

png vs webp

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 control 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 mucho 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 imagen y texto. 

El 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.

jpg vs webp

Basándonos en las dos imágenes, podemos decir que la imagen WebP es un 24,7% más pequeña que la versión JPG. Para la versión JPG he puesto la calidad en "Alta".

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

Una pequeña pista:

El aspecto final de las imágenes 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, adobeRGB, el modo de visualización respectivo de los monitores, así como el dispositivo con el que se ven las imágenes. Recientemente, yo mismo tuve el problema de que mis imágenes se veían diferentes en mi pantalla y en el sitio web. 

Mi consejo: Hoy en día todos los navegadores están en modo sRGB. Así que si creas algo para la web en Photoshop, configura tu monitor en sRGB. Así podrás ver directamente cómo queda cuando aterriza en tus sitio . 🙂 .

Espacio/profundidad del color

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. Así que 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, aunque este último tiene poco 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: En primer lugar, veamos cómo un monitor muestra una imagen por defecto: Cada color puede representarse con tres colores (conocido como modelo RGB), es decir, rojo, verde y azul.

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

El ojo humano es muy sensible a la luminosidad, pero menos a los colores y sus gradaciones. Así, el término 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.

Apoyo/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 tu y ver desde qué navegador y dispositivo recibe más visitantes.

La siguiente lista muestra qué versiones de navegadores y qué dispositivos pueden ya disfrutar de WebP.

Soporte actual para navegadores de escritorio

- Firefox a partir de la versión 65.x
- Opera a partir de la versión 39.x
- Chrome a partir de la versión 23.x
- Edge a partir de la versión 17.x
- Internet Explorer a partir de 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.x
- Opera Mini todas las versiones
- Opera Mobile a partir de la versión 12.x
- Android Firefox a partir de la versión 66.x
- Internet 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.x
- Microsoft Edge desde la versión 18.x
- Firefox desde la versión 65.x
- Opera desde la versión 19.x

Por el momento no he podido encontrar soporte para WebP en otros navegadores y dispositivos.

¿Cuáles son los 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 incluir WebP en WordPress :

  1. Utilizando un Plugin

Por ejemplo, se puede utilizar Plugins ShortPixel (versión gratuita), Optimus (versión de pago) o EWWW Image Optimizer (versión gratuita). 

Optimus:

Optimus WebP

Lamentablemente, WebP sólo es compatible con la versión de pago de Optimus. Por cierto, dado que RAIDBOXES ya tiene integrado el almacenamiento en caché del lado del servidor, no necesita un "Cache Enabler" Plugin, como recomienda aquí Optimus.

ShortPixel:

WebP de píxeles cortos

En ShortPixel puedes marcar la casilla como puedes ver arriba. Pero antes de eso, yo reajustarí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. Haga los ajustes en el .htaccess de WordPress

Algunos hoster han bloqueado deliberadamente la capacidad de cambiar cualquier cosa en el archivo .htaccess por razones de seguridad. Si está alojado en un servidor Apache, puede 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 encontrarla?

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 puedes verlo, tienes que poner la máscara de archivos remotos en -la para 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.

Hay una tercera -y algo complicada- posibilidad de añadir algo en el archivo function.php de tu WordPress -Themes para que puedas subir imágenes en formato WebP por defecto. Cómo funciona esto, se puede leer por ejemplo. en este artículo artículo.

Conclusión

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 tus sitio y, por tanto, la experiencia del usuario y la satisfacción de los visitantes del sitio web tus .

Plugin ¿Si | No?

Hay muy buenos Plugins, que hacen el trabajo por ti en el soporte de WebP y también optimizan las imágenes de tu . Personalmente, he recurrido a Plugin Optimus para esto. De lo contrario, sin duda valdría la pena considerar la posibilidad de incluirlo en el sitio como código, sobre todo porque así se ahorraría un Plugin más. Pero en definitiva, estás bien asesorado con un Plugin para este asunto.

¿Para quién es adecuado el WebP?

WebP es en principio útil para cualquier 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 también otros usuarios de WordPress , como los creativos o los que tienen algo que mostrar en forma pictórica, deberían hacer todo lo posible para que la experiencia de usuario de sus potenciales clientes y seguidores sea lo más agradable posible.

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

Stefan es un blogger en ciernes con su sitio web aspiring-artist.com Hace un blog sobre arte, realiza WordPress sitios para otros aspirantes a artistas y es consultor. Porque los artistas también necesitan un sitio web individual y un logo y una marca significativa. - Aspirar a la grandeza

Artículos relacionados

Comentarios sobre este artículo

Escribe un comentario

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