¿WebP y WordPress = mejora del tiempo de carga y el rendimiento?

Stefan Römershäuser Actualizado por última vez el 21.10.2020
8 min.
webp WordPress
Actualizado por última vez el 21.10.2020

Muchos WordPress -los usuarios están interesados en el formato de imagen WebP porque combina las ventajas de JPG y PNG. Al mismo tiempo, sin embargo, no reemplaza los dos formatos de imagen comunes. Para WordPress -Sin embargo, los usuarios que usan muchas imágenes encontrarán a WebP particularmente útil. Por qué es así, lo explicamos en este artículo.

En el mundo actual, cada vez es más importante hacer que la experiencia de los usuarios de los sitios tus web sea lo más agradable y fácil posible. Las personas son visuales y a menudo pueden absorber la información que ven más rápida y fácilmente. Un rápido vistazo a un tablero de publicidad, desplazándose a través de una página web antes de que el autobús llegue 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.

Ahora unos pocos datos más sobre WebP antes de entrar en los temas.

  • WebP soporta el formato de vídeo VP8, que es adecuado para pequeñas imágenes animadas, por ejemplo, como lo 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 escalar una imagen WebP hacia arriba o hacia abajo, similar a los archivos SVG, pero muchos no lo permiten por razones de seguridad.

Los siguientes temas se tratan hoy en este artículo:

  1. Diferencias con JPG y PNG

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

  1. ¿Qué requisitos necesito para el WebP enWordPress ?
  2. ¿Cómo se insertan las imágenes WebP enWordPress ?

- PluginUsar en
- Añade algo a los servidores .htaccesstu
- Archivo function.php tu WordPress -Themes completo. 

  1. Mi conclusión sobre WebP

Diferencias con 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 tiene una clara ventaja en términos de rendimiento.

png vs webp

Basándonos en las dos imágenes, se puede decir que la imagen WebP es más pequeña que la versión PNG, con un 30,1 por ciento. Elegí el método sin pérdidas aquí y deliberadamente puse el deslizador de calidad al 80 por ciento. El 20 del 100 por ciento restante casi nunca se puede ver, por lo que el 80 por ciento es 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 principalmente para las capturas de pantalla porque los PCs guardan las imágenes como PNG. ¿Por qué? - Porque las capturas de pantalla son a menudo 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, ya que muchos elementos a menudo se juntan allí.

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

El formato de imagen JPG

En comparación directa con el JPG, la imagen del 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 entre JPG y WebP - WebP es simplemente la mejor opción.

jpg vs webp

En base a las dos imágenes se puede decir que la imagen de WebP es más pequeña que la versión JPG con un 24,7%. Para la versión JPG puse la calidad a "alta".

El formato JPG es ideal si se puede vivir con pérdidas de calidad y si la nitidez y los detalles no son importantes. El formato se utiliza a menudo para imágenes coloridas, ya que la composición de JPG permite mostrar 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 de los monitores y el dispositivo que utilice para ver las imágenes. Recientemente yo mismo tuve el problema de que mis fotos se veían diferentes en mi pantalla y en el sitio web. 

Supongo que sí: Hoy en día todos los navegadores están en modo sRGB. Así que si creas algo para la web en Photoshop, por ejemplo, pon tu monitor a sRGB. Entonces puedes ver directamente cómo se ve cuando aterrizatus sitio . 🙂 

Espacio de color/profundidad

Aquí es donde se complica un poco. WebP se basa en el algoritmo de compresión de video con pérdida 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, como el JPG. La profundidad de color de PNG va de 8 a 48 bits, aunque esto último tiene poco sentido debido al gran tamaño del archivo, 

Como VP8 bitstream, 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 se deshizo: Veamos primero cómo un monitor muestra una imagen por defecto: Cada color puede ser representado por tres colores (el llamado modelo RGB), es decir, rojo, verde y azul.

Cada color individualmente - es decir, rojo, verde y azul - puede ser registrado en el PC en 1 byte (8 bits). Por lo tanto, un píxel en un monitor tiene 3 bytes (cada byte tiene información sobre los respectivos colores rojo, verde y azul)

El ojo humano es muy sensible al brillo, pero menos sensible a los colores y sus gradaciones. Así, la designación YUV está compuesta por Y = luminancia (brillo) y U y V crominancia media (color). El YUV es por lo tanto como el RGB, que se utiliza para representar un color.

¿Pero por qué lo necesitamos de todos modos?

Porque el tamaño del archivo es importante. En el modelo RGB tenemos que usar 3 bytes (24 bits) para almacenar un color. Con el YUV, por otro lado, el tamaño se reduce a la mitad debido a la forma en que se calcula y luego se almacena. Es complicado, pero creo que en este punto la información es suficiente y aporta algo de claridad.

Apoyo/ayuda

Las estadísticas muestran qué navegador se utiliza con más frecuencia por cada "dispositivo final", como un PC, un tablet o un smartphone. Como WebP no es soportado por todos los navegadores, debe tener esto en cuenta.

Por supuesto, es obvio que los "dispositivos móviles" están más en el punto de mira, lo que también explica por qué se proporciona un mejor soporte de WebP para el teléfono inteligente. Así que asegúrate de revisar las estadísticas de tu usuarios y ver desde qué navegador y dispositivo recibes más visitas.

La siguiente lista muestra qué versiones de navegadores ya se benefician de WebP y en qué dispositivos finales. 

Soporte actual para el Navegador de Escritorio

- Firefox desde la versión 65.x
- Opera desde la versión 39.x
- Cromo de la versión 23.x
- Borde 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 (Cromo 67)
- Android Chrome de la versión 73.x
- Opera Mini todas las versiones
- Opera Mobile a partir de la versión 12.x
- Android Firefox desde la versión 66.x
- Internet Explorer Mobile a partir de la versión 11.x

WebP VP8 (Imágenes animadas)

- Google Chrome (Desktop y Android) a partir de 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

No pude encontrar soporte WebP para otros navegadores y dispositivos en este momento.

¿Qué requisitos necesita WebP enWordPress ?

Hasta ahora ninguno, pero... La mala noticia es que WordPress actualmente no hay apoyo independiente para las imágenes de WebP. Por lo tanto, ahora llegaremos al siguiente punto.

Posibilidades de integrar el WebP enWordPress :

  1. PluginUsar en

El Plugins(ShortPixelVersión Gratuita), Optimus (Versión de Pago) o el Optimizador de Imagen EWWW (Versión Gratuita) son adecuados para este propósito. 

Optimus:

Optimus WebP

Desafortunadamente WebP sólo está soportado por la versión pagada de Optimus. Como el cacheo del lado del servidor RAIDBOXES ya está integrado, no necesitas un "Cache Enabler"Plugin, como recomienda aquí Optimus.

ShortPixel:

Pixel WebP corto

En ShortPixelpuede marcar la casilla como se muestra arriba. Pero antes de eso, reiniciaría todas las imágenes que tienes al original y luego Pluginlas optimizaría todas a la vez con el. Entonces también deberías ver al mismo tiempo que tienes diferentes tipos de archivos de tus fotos.

Optimizador de imagen EWWW:

Ewww Optimizador de Imagen WebP
  1. WordPress Hacer ajustes en el .htacceso de

Algunos hoster tienen la posibilidad de cambiar algo en el archivo .htaccess, bloqueado deliberadamente por razones de seguridad. Si te alojas en un servidor Apache, puedes hacer los siguientes ajustes:


    Reescribir el motor en
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    Regla de Reescritura ^(wp-content/uploads.+)\N-(jpe?g|png)$ $1.webp
[T=imagen/webp,E=aceptación:1]



    Cabecera apéndice Vary Aceptar env=REDIRECT_accept

AñadirTipo imagen/webp .webp

Y en un níngulo:

# Bloque de configuración http
map $http_accept $webp_ext {
por defecto "";
"~*webp" ".webp"
}
# Bloque de configuración del servidor
location ~* ^/wp-content/.+\.(png|jpg)$ {
add_header Vary Accept;
try_files $uri$webp_ext $uri =404;

Por RAIDBOXES cierto, esta regla de reescritura ya está apoyada por nosotros. 

¿Dónde puedo encontrarla?

El archivo se encuentra en el servidor web en el que se WordPress instaló. El directorio raíz es el directorio principal donde se encuentra el dominio en el anfitrión de la web. Si no puedes verlo, tienes que poner la "máscara de archivo remoto" en -la para que puedas ver los archivos ocultos. Por supuesto, esto requiere que tengas derechos de acceso o incluso que lo alojes tú mismo y uses un programa FTP como FileZilla. 

Hay una tercera - y algo complicada - manera de añadir algo a tu WordPress -Themes archivo function.php para que puedas subir fotos en formato WebP por defecto. Cómo funciona esto, puedes averiguar por ejemplo en este artículo leer.

Conclusión

Desafortunadamente, WebP no es todavía tan común como JPG y PNG, pero sin duda será más importante en el futuro. Después de todo, la WebP puede utilizarse para mejorar el rendimiento tus sitio y, por lo tanto, la experiencia del usuario y la satisfacción de los visitantes del sitio tus web.

Plugin ¿Sí? ¿No?

Hay muy buenasPlugins, que te quitan el trabajo de los hombros con el soporte de WebP y también optimizan las tu imágenes. Yo personalmente usé el Plugin Optimus para esto. De lo contrario, valdría la pena considerar incluirlo sitio como código, sobre todo porque te ahorrarías uno Plugin más. Pero, en general, está bien aconsejado con uno Plugin para este asunto.

¿Para quién es adecuado WebP de todos modos?

En principio, la WebP es útil para todossitio . El formato es especialmente adecuado para sitios web con muchas imágenes. Por ejemplo, para los fotógrafos que quieren mantener la calidad de su imagen lo más alta posible, pero aún así dan gran valor a un tiempo de carga rápido. Pero también otros WordPress -usuarios 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 clientes y fans potenciales sea lo más agradable posible.

¡Espero que hayan disfrutado del artículo y espero 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 será publicada. Los campos obligatorios están marcados con * marcado.