Su imagen web está innecesariamente hinchada

Su imagen web está innecesariamente hinchada

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

Como desarrollador, parece ineficaz ofrecer una imagen JPEG de 2.000 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. Repasemos algunos de estos patrones según 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 existen desde hace 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 proporcionar una mejor manera de mostrar imágenes en su mejor nivel de optimización.

Ejemplos de

  • WebP
  • JPEG-XR
  • BPG

Estos formatos optimizados son, de hecho, un muy buen intento de reducir la hinchazón de la imagen. Los formatos de imagen son el medio para lograr una optimización y compresión convenientes sin tener que recurrir a soluciones de terceros. Desafortunadamente, la batalla del formato de imagen continúa, ya que no hay un 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 de API expuesto al que puede pasar su archivo de imagen, especificar algún argumento de compresión y obtener una imagen comprimida devuelta para su configuración.

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 ellos 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 ofrezca 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. Hasta ahora, este es 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:

Además, se encuentra con el mismo problema que con los SDK de terceros: es difícil encontrar esa 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 completa e inteligente para la compresión y optimización. La entrega y 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 agrega otra capa de complejidad al problema.

Pero, ¿y si hubiera una sola herramienta que pudiera:

  1. Cargue, almacene y envíe imágenes a través de CDN
  2. Transformar imágenes (dimensión, ajuste de color, etc.)
  3. Comprime imágenes sin pérdida

Cloudinary es esa solución. Es una herramienta integral de administración de imágenes que aborda rápida y fácilmente sus inquietudes sobre imágenes, eliminando los desafíos y riesgos del almacenamiento y la administració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 darle control sobre la calidad de sus imágenes, al mismo 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 funciones están basadas en URL, lo que significa que simplemente necesita modificar la URL para lograr las configuraciones que necesita. También puede utilizar los SDK proporcionados si prefiere no realizar manipulación de URL.

Transformación de la calidad de la 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 aproximadamente 569 KB. 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

El 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 123kb. Acabamos de eliminar 446 kb, que es un gran ejemplo de lo que queremos decir con el título de este artículo: «Su imagen web está innecesariamente hinchada».

Vamos a profundizar en 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

Bajé la calidad a 40 y reduje el tamaño a 38 KB, sin embargo, la calidad visual de la imagen es parcialmente degradado. A estas alturas, podría imaginarse el ancho de banda que estaría desperdiciando debido a la falta de compresión.

Probemos con el 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 certeza que el 40 por ciento sea 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 45 KB. 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 renderiza la imagen:

http://res.cloudinary.com/demo/image/upload/f_auto/woman

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 utilizar formatos de imagen, bibliotecas de terceros y API para optimizar las imágenes, pero es posible que no sean tan flexibles como necesita.

Cloudinary 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 la optimización y compresión de imágenes.

Usted puede Regístrese para obtener una cuenta gratuita de Cloudinary y compruebe lo fácil que es optimizar imágenes con su solución basada en URL.

#imagen #web #está #innecesariamente #hinchada

Publicaciones Similares

Deja una respuesta

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