Las imágenes son esenciales en la web y han sido una forma poderosa de comunicar información desde los inicios de internet. Es importante que los desarrolladores sepamos optimizarlas para mejorar la usabilidad, la accesibilidad y la eficacia de nuestros sitios web.
En este artículo, exploraremos los tipos de imagen y cúal es el mejor uso que se le puede dar a cada formato para mejorar la experiencia de nuestros usuarios 😺✨.
Antes de arrancar con cada formato de imágen, es necesario conocer el concepto de lossless y lossy.
Lossless o "sin perdida"
Son formatos de imagen que utilizan algoritmos de compresión que permiten que la imagen se comprima sin comprometer la calidad. Sin embargo, debido a que los archivos sin pérdida son más grandes en tamaño, pueden afectar el tiempo de carga de un sitio web.
Son útiles cuando se requiere una alta calidad de imagen, como en fotografías de alta resolución, diseño gráfico y arte digital.
Lossy o "con perdida"
Son un tipo de formato de imagen en el que se comprimen y eliminan datos de la imagen durante el proceso de compresión para reducir el tamaño del archivo. Una imagen lossy puede reducir el número de colores para reducir el tamaño del archivo.
Son útiles cuando se trabaja con imágenes de baja resolución, gráficos simples y animaciones.
Ahora sí, los formatos de imagen 👀✨:
JPG/JPEG
Es un tipo de imagen de tipo lossy, es ideal para las imágenes fijas y fotografías.
GIF
Es un tipo de imagen de tipo lossless, son animaciones simples, son muy llamativas en sitios web personales.
PNG
Es un tipo de imagen de tipo lossless, es ideal para los logos, ya que permite el uso de transparencia.
Cómo optimizar imágenes en la web? 🤔
El tamaño ideal para imágenes en la web es 70 kb, esto puede ser difícil de lograr debido a que muchos dispositivos generan imágenes de más de 10 mb. Afortunadamente, existen algoritmos que pueden reducir el tamaño de las imágenes, lo que hace que la creación de sitios web accesibles sea más fácil. A continuación, comparto algunas páginas que utilizo para este fin en mi día a día:
Tiny PNG
Mejora el tamaño de las imagenes, comprimiendolas, reduciendo el número de colores, los cambios son imperceptibles a nivel visual para el ser humano.
Verefix
Los metadatos son información adicional que se envía con los archivos, pero que no está relacionada con el contenido. En el caso de las imágenes, esta información puede incluir la fecha de captura, el dispositivo utilizado, entre otros detalles. Como desarrolladores, podemos prescindir de esta información, por lo que existen páginas como Verefix que permiten eliminar los metadatos de las imágenes.
Espero que la información de este post les ayude con la optimización de las imágenes en sus sitios web 😺✨.
Top comments (1)
¡Gracias por leer mi blog! Si te gustó lo que leíste y crees que mi trabajo merece una nominación para los Github Stars, te agradecería muchísimo que me nominaras.
Para hacerlo, simplemente sigue estos pasos:
Visita la página de nominación de Github Stars: stars.github.com/nominate/
Ingresa mi nombre de usuario de Github (@wildchamo) y la razón por la que crees que merezco la nominación.
Si lo deseas, puedes compartir mi blog o alguna de mis publicaciones en tus redes sociales para que más personas puedan conocer mi trabajo.
Tus nominaciones significan mucho para mí y me ayudan a seguir creando contenido valioso y de calidad. ¡Gracias por tu apoyo!