Optimización de imágenes en la web 🦏✨
Tags: webdev, frontend
Published: 2023-03-24 23:21:28

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.

![jpg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f68ky6wp2eq6z0p6w7a1.jpg)


## GIF
Es un tipo de imagen de tipo **lossless**, son animaciones simples, son muy llamativas en sitios web personales.

![GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8sck4kfpungmn5y8b088.gif)


## PNG
Es un tipo de imagen de tipo **lossless**, es ideal para los logos, ya que permite el uso de transparencia.


![Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f987o81bln2d7o6hs7mm.png)

## 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. 

![SS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5g3nroyhcssjr2o50lm.png)

##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.

![SS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nsg29fi43lpd72530j4h.png)


Espero que la información de este post les ayude con la optimización de las imágenes en sus sitios web 😺✨.