Clase 8 – Optimización de imágenes

Con el objetivo de encontrar un equilibrio entre peso y calidad de las imágenes es que se lleva a cabo el proceso de optimización. La idea es disminuir el peso de éstas, ya que ralentizan la carga del sitio y con ello el riesgo de sufrir una mala experiencia para el usuario.

Componentes de la optimización

Peso: es el tamaño en memoria que pesa el archivo. Se mide en KB, MB, GB. El peso está influido por la dimensión del archivo y la calidad de la imagen.

Dimensión: Es el tamaño físico del archivo en pixeles. Por ejemplo:5000 px de ancho x 2500 px de alto. Al reducir la dimensión de la imagen, el peso se reduce inmediatamente ya que se reduce la cantidad de pixeles.

Calidad: Es el nivel de nitidez o granularidad de una imagen. Tener mayor resolución se traduce en obtener una imagen con más detalle o calidad visual.

Resolución: Es la cantidad de pixeles o puntos por pulgada que debe tener la imagen. Para digital utilizamos siempre 72 x 72 pixeles.

Tipos de archivos

PNG produce imágenes de mayor calidad, pero también tiene un tamaño de archivo mayor. Fue creado como un formato sin pérdida sin embargo puede ser levemente optimizado. En un inicio fue utilizado para reemplazar el formato gif, que producía un “pixeleo” entre el color y la transparencia.

JPEG Permite altas posibilidades de compresión de imágenes ya que permite reducir la calidad (bajar la nitidez) y reducir las dimensiones (tamaño en pixeles).

GIF sólo utiliza 256 colores como colores en la imagen. Es la mejor opción para imágenes animadas. Sólo se utiliza compresión sin pérdidas.

SVG Es un tipo de archivo vectorial, como AI o EPS, que puede ser interpretado por los navegadores web (Chrome, Safari, Etc.). Al ser vectorial es muy liviano y permite escalabilidad (agrandamiento) casi infinito. Hoy se le utiliza en reemplazo del png para imágenes con fondo transparente ya que permite el canal alfa.

WebP Es un formato de compresión de imágenes creado por Google. Permite reducir el peso reduciendo la calidad de las imágenes JPG y GIF, incluso de GIF animados. Permite una compresión hasta de un 20% solamente al cambiar el formato de archivo, sin pasar por el proceso de reducción de calidad. Al ser un formato de uso reciente (2019) tiene algunas desventajas en su implementación. Para ser usado en Photoshop se debe descargar un plugin. En su defecto es posible utilizar el transformador de archivos XnConvert.

¿Qué formato de imagen debo elegir en el 2021? 

Elige

Cuando tengas que…

Como por ejemplo en…

SVG

usar imágenes planas con transparencia

logotipos o íconos

JPG

usar imágenes complejas y/o de gran tamaño

cualquier tipo de fotografía

GIF

mostrar un loop en movimiento evitando la activación de un video

una demostraciones de pantalla o un gif viral

WEBP

reducir aún más el tamaño de un JPG o PNG.

reemplazo de un JPG o un GIF

Créditos: Soledad Moris (profesora Bootcamp Diseño UX/UI Talento Para Chile)

Conclusión

El usuario debe tener siempre la mejor experiencia posible y en este sentido la carga del sitio web no debe afectar dicho tema. Para esto es imprescindible tener fotografías que se adapten al estándar para no afectar el tiempo que toma desde que ingresó la url hasta que ve nuestro sitio web.

Enlaces relacionados

https://imagecompressor.com/