El formato de imágenes WebP fue anunciado por Google en 2010, es un excelente formato alternativo a PNG o JPEG. Está diseñado para utilizar un algoritmo de compresión mejor optimizado que JPG y PNG para reducir el tamaño de los archivos con una mínima pérdida de calidad.
WebP admite la codificación en formatos sin pérdida y con pérdida, lo que lo hace versátil para cualquier tipo de medio visual.
WEBP IMAGE
JPG y PNG son los dos formatos de imagen más utilizados en Internet. En general, PNG es un formato de compresión de mayor calidad y es más adecuado para ciertos usos.
Mientras que los JPG suelen tener menor calidad y menor tamaño de archivo, pero son más rápidos de cargar y es el formato más utilizado. Sin embargo, un formato de imagen emergente moderno llamado imágenes WebP también está ganando popularidad.
Echemos un vistazo a qué son exactamente las imágenes WebP y cómo funcionan.
POR QUÉ DEBERÍAS UTILIZAR IMÁGENES WEBP
- Razón principal: el formato sin pérdida de imágenes WebP puede comprimir imágenes hasta un 26% más en comparación con PNG, mientras que las imágenes con pérdida de WebP son un 25-34% más pequeña en tamaño con una calidad equivalente en comparación con JPG.
- Transparencia: PNG y GIF admiten transparencia, pero no JPEG. WebP puede hacer eso y aún ofrecer imágenes más pequeñas que PNG o GIF
- Animación: WebP también puede hacer esto y, en muchos sentidos, un formato superior al GIF (admite más colores, transparencia alfa, mejor compresión)
Como la idea principal de WebP es reducir el tamaño de los archivos y mejorar el tiempo de carga de la imagen.
Esto puede aumentar drásticamente la velocidad de carga del sitio web, la experiencia del usuario y la clasificación general del sitio web en los resultados de búsqueda. Y Google favorece los sitios web más rápidos y de mejor rendimiento que los más lentos.
Aunque todavía no todos los navegadores son compatibles con WebP, sigue siendo una buena idea utilizarlos. Las versiones actuales de Firefox, Chrome, Opera y Edge son compatibles con imágenes WebP. Actualmente, el navegador Safari no lo admite.
¿NUEVO FORMATO?
WebP es un nuevo formato de imagen moderno. Aplica compresión sin pérdida y con pérdida para imágenes en la web. Básicamente, ¡hace que nuestros archivos sean aún más pequeños para la web! En comparación con un PNG, ahorra alrededor del 26% y entre el 25 y el 34% en JPEG.
Lo bueno es que admite la transparencia como lo hacen los PNG. Y a precios exiguos.
Lo que significa que un PNG convertido a WebP es 3 veces más pequeño en promedio.
USAR IMÁGENES WEBP
Si tú objetivo principal es reemplazar todas las imágenes del sitio con una variante de WebP, debes hacer:
- <! – antes ->
- <img src = «cat.jpg» alt = «un lindo gato» />
- <! – después ->
- <img src = «cat.webp» alt = «un lindo gato» />
Lo hicimos, lo ejecutamos en Chrome y funciona, así que hecho, ¿verdad?
Pero unos 15 minutos después, vimos que todas las imágenes desaparecieron de otra de las computadoras. Vimos el navegador que se estaba usando y, después de una pequeña batalla para averiguar qué es un navegador, resulta ser Internet Explorer ¡El problema!
¡No lo comprobamos!
¿Ahora qué? Tú y tu compañero desarrollador quieren un sitio web rápido, pero no debería desperdiciarse para todos los demás usuarios de navegadores no modernos. El soporte del navegador para WebP no es malo, pero desafortunadamente, aún no es totalmente compatible.
Ahí es donde el elemento <picture> resulta útil. Podemos convertir nuestras etiquetas <img> para que formen parte de un elemento <picture>.
- <imagen>
- <source type = «image / webp» srcset = «cat.webp»>
- <img src = «cat.jpg» alt = «Un gato super lindo»>
- </imagen>
Muy genial. Dado que los navegadores analizarán esto de arriba a abajo, si son compatibles con el formato WebP, elegirán esa imagen; de lo contrario, recurrirán a JPG en este caso. Es importante saber que el elemento de imagen necesita la etiqueta <img> y usará ese texto alternativo para mostrar en cualquiera de las fuentes.
PROBANDO NUESTRO RESPALDO DE SOPORTE
Podrías pensar, genial, lo tenemos funcionando ahora, pero ¿cómo puedo probar esto? Afortunadamente para nosotros, Chrome 88 envió una excelente opción de reproducción de formato de imagen moderno.
Puedes encontrar esta opción en tus herramientas de desarrollo de Chrome en la pestaña Representación.
Para aquellos lectores que no están familiarizados con el término: WebP es un formato de imagen relativamente nuevo desarrollado por Google para ayudar a acelerar la web. Fue diseñado para utilizar un algoritmo de compresión mejor optimizado y más agresivo que JPEG y PNG, con el objetivo de crear archivos más pequeños sin una pérdida significativa de calidad.
Los tamaños de archivo más pequeños, por supuesto, significan tiempos de carga más rápidos y un menor uso de datos, los cuales son amados por los visitantes del sitio web.
Varios factores diferentes determinan exactamente cuánto más pequeño es un archivo de imagen WebP que su contraparte JPEG.
Google afirma que la reducción promedio de tamaño asciende a entre el 25 y el 35 por ciento. La compañía también afirma que cuando convirtieron las miniaturas de YouTube de JPEG a WebP, el resultado fue un aumento del 10 por ciento en la velocidad de carga de la página.
Los tamaños de archivo de imagen WebP también son alrededor de un 26 por ciento más pequeños que sus contrapartes PNG.
