Su imagen web está innecesariamente hinchada

Las imágenes forman un mayoría de contenido web. Pero muchos sitios web y aplicaciones que navegamos no siempre ofrecen el formato de imagen, el tamaño, la calidad y la dimensión más óptimos.

Como desarrollador, parece ineficiente servir una imagen JPEG de 2000 kb cuando podríamos comprimir imágenes para optimizar el rendimiento sin degradar la calidad visual. No somos nuevos en este tipo de responsabilidad. Pero nuestra productividad terminará siendo cuestionada si no entregamos rápido. Para hacerlo, la comunidad ha ideado varios patrones para ayudar a mejorar la productividad. Revisemos algunos de estos patrones en función de sus categorías:

• Formatos optimizados
• Bibliotecas de terceros
• API de terceros

Formatos optimizados

Es natural utilizar formatos de imagen como PNG, JPEG y GIF. Estos tres han existido durante varios años, pero cada uno tiene características que te harían elegir uno sobre otro en ciertos casos. Se han introducido formatos adicionales y algunos se están estandarizando para brindar una mejor manera de mostrar imágenes en su mejor nivel de optimización.

Ejemplos

• WebP
• JPEG-XR
• GBP

Estos formatos optimizados son, de hecho, un muy buen intento de reducir la sobrecarga de imágenes. Los formatos de imagen son el medio para lograr una optimización y compresión convenientes sin recurrir a soluciones de terceros. Desafortunadamente, la batalla por el formato de imagen continúa, ya que no hay soporte adecuado en todos los navegadores, limitaciones, políticas y otros factores que dificultan garantizar que cada formato de imagen se optimice de manera consistente.

Bibliotecas de terceros

También puede utilizar bibliotecas de terceros para comprimir imágenes. Estas bibliotecas proporcionan un método API expuesto al que puede pasar su archivo de imagen, especificar algún argumento de compresión y obtener una imagen comprimida para su configuración.

• Imagenmin
• JIC

No hay nada de malo en escribir su propia solución, pero también estamos tratando de ahorrar tiempo. Estas bibliotecas están escritas en base a algunos algoritmos estándar, por lo que está bien confiar en ellas hasta cierto punto. Sin embargo, es posible que no le brinden suficiente flexibilidad en términos de cómo se maneja la compresión. Es difícil encontrar una biblioteca de terceros que tome un archivo PNG y entregue una imagen sin pérdidas comprimida de manera óptima.

API de terceros

Hay API de terceros públicas y premium que podrían usarse para procesar una imagen inflada, que luego se le devuelve como una respuesta HTTP. Este es hasta ahora el más fácil de usar porque solo requiere un conocimiento básico de HTTP para comprimir sus imágenes. No depende del idioma ni de la plataforma, lo que lo hace un poco más flexible que los demás.

Ejemplos:

• TinyPNG
• Óptimo
• kraken
• PunyPNG

Además, se encuentra con el mismo problema que con los SDK de terceros: es difícil encontrar una solución todo en uno que sea lo suficientemente flexible para abordar su problema.

Una mejor opción que ofrece CDN

Si bien las plataformas discutidas anteriormente se usan comúnmente para comprimir imágenes, ninguna ofrece una solución integral e inteligente para la compresión y optimización. La entrega y la carga de imágenes pueden incluso volverse más complejas cuando necesita servir sus imágenes a través de una red de entrega de contenido (CDN). Esto añade otra capa de complejidad al problema. Pero, ¿y si hubiera una sola herramienta que pudiera:

1. Cargue, almacene y entregue imágenes a través de CDN
2. Transformar imágenes (dimensión, ajuste de color, etc.)
3. Comprimir imágenes sin pérdidas

nublado es esa solucion. Es una herramienta integral de gestión de imágenes que aborda rápida y fácilmente sus problemas de imagen, eliminando los desafíos y riesgos del almacenamiento y la gestión de imágenes. Cloudinary también aborda de manera inteligente nuestros desafíos de compresión de imágenes. Utiliza funciones de transformación de imágenes para brindarle control sobre la calidad de sus imágenes, al tiempo que le brinda la opción de seleccionar automáticamente la calidad y el formato. Lo más interesante de Cloudinary es que todas estas características están basadas en URL, lo que significa que simplemente debe modificar la URL para lograr las configuraciones que necesita. También puede usar los SDK proporcionados si prefiere no manipular la URL.

Transformación de calidad de imagen

La siguiente imagen de una mujer se entregó usando Cloudinary (el mecanismo de carga no está cubierto, pero puede leer sobre eso) aquí):

Se entrega con esta URL:

http://xn--diseopaginaswebya-ixb.es/wp-content/uploads/2021/12/Su-imagen-web-esta-innecesariamente-hinchada.jpg

Esta imagen pesa alrededor 569kb. Esta no es una mala calidad, pero podemos hacerlo mejor. Veamos cuánto podemos ajustar esta imagen sin perder calidad visual:

http://xn--diseopaginaswebya-ixb.es/wp-content/uploads/2021/12/1639981286_94_Su-imagen-web-esta-innecesariamente-hinchada.jpg

los q La propiedad de transformación toma una variedad de valores, uno de los cuales es un rango de 1 a 100 que indica la calidad en porcentajes. Esto es lo que hemos aplicado arriba y la imagen se recortó a 123 kb. Acabamos de eliminar 446kb, que es un gran ejemplo de lo que queremos decir con el título de este artículo: «Su imagen web está innecesariamente hinchada». Seamos duros con esta imagen y veamos qué es lo peor que puede pasar:

http://xn--diseopaginaswebya-ixb.es/wp-content/uploads/2021/12/1639981286_711_Su-imagen-web-esta-innecesariamente-hinchada.jpg

Acabo de bajar la calidad a 40 y reduje el tamaño a 38kbsin embargo, la calidad visual de la imagen es parcialmente degradado. A estas alturas, puede imaginar el ancho de banda que estaría desperdiciando debido a la falta de compresión. Probemos con un 10 por ciento.

http://xn--diseopaginaswebya-ixb.es/wp-content/uploads/2021/12/1639981287_493_Su-imagen-web-esta-innecesariamente-hinchada.jpg

Ahora la imagen es visualmente pobre. Esto no significa que podamos decir con seguridad que el 40 por ciento es el punto perfecto. Podría ser 30, podría ser 20, pero no sabemos exactamente Para encontrar una calidad perfecta, podemos usar el auto valor de calidad en lugar de un valor rígido:

http://xn--diseopaginaswebya-ixb.es/wp-content/uploads/2021/12/1639981287_566_Su-imagen-web-esta-innecesariamente-hinchada.jpg

El valor automático produce una imagen que pesa 45kb. Esto es más fácil y rápido que usar un valor rígido y adivinar la tasa de compresión perfecta.

Formatos automáticos

Además de las transformaciones de calidad, también puede definir la transcodificación automática de sus imágenes. Esto permite a Cloudinary elegir un formato de imagen adecuado y óptimo para el navegador que representa la imagen:

http://xn--diseopaginaswebya-ixb.es/wp-content/uploads/2022/12/Su-imagen-web-esta-innecesariamente-hinchada.jpeg

Los navegadores, como Chrome, admiten formatos específicos, como WebP, para mejorar el rendimiento. Cloudinary siempre sabe cuándo y cómo hacerlo mejor sin perder la calidad visual de la imagen.

Conclusión

Las imágenes de su sitio web pueden estar infladas u optimizadas hasta cierto nivel. Puede usar formatos de imagen, bibliotecas de terceros y API para optimizar las imágenes, pero es posible que no sean tan flexibles como necesita.

nublado ofrece una solución integral de administración de imágenes que entrega y transforma imágenes a través de API basadas en URL. Puede utilizar las funciones de transformación para optimizar y comprimir imágenes. Puedes Regístrese para obtener una cuenta gratuita de Cloudinary y vea lo fácil que es optimizar imágenes con su solución basada en URL.