Photoshop: Optimizar imágenes para acelerar tu sitio

Con algunos conocimientos básicos en la compresión y optimización de las imágenes, es posible reducir significativamente el tamaño de una imagen mientras aumentamos su calidad.

Minimizar los tiempos de carga hará más rápida y placentera la experiencia del visitante. Por eso en esta nota te contamos cómo optimizar las imágenes de nuestro sitio con Photoshop para lograr un mejor desempeño.

“Guardar para web & Dispositivos” en Photoshop

La primera clave para una mejor optimización de las imágenes es ajustar cómo se guardan las imágenes web desde Photoshop. Si estás acostumbrado a las típicas funciones “Guardar” o “Guardar como”, es tiempo de aprender un truco nuevo:

“Archivo > Guardar para Web & Dispositivos…” es la funcionalidad que deberías comenzar a utilizar al guardar tus imágenes para la web. Trabajar desde esta herramienta te brindará mucho control extra sobre tu imagen, con pre-visualizaciones de cómo lucirá una imagen luego de la compresión.

Utilizar la función “Guardar para Web” nos permitirá un mejor control sobre la compresión de la imagen.

Existen 3 formatos que son de los que más hablaremos y los que más se utilizan:

• * .jpg - Se pierde calidad, formato genial para las fotografías
• * .png (8-bit) - Tipo de compresión sin pérdida, rango de color limitado
• * .gif - sin pérdida con rango de color limitado como .png de 8-bit, pero .png es usualmente una mejor elección

Habrá instancias en las que necesitarás utilizar.png de 24-bit. Por ejemplo:  es el único tipo de archivo comunmente soportado con un canal alpha para transparencia de imagen en la web. Casi siempre será más grande que cualquier otro formato dado que es un tipo de compresión sin pérdida que soporta un rango de color más amplio.

Compresión .jpg

El formato de imagen .jpg calza mejor en aquellas imágenes que poseen un amplio rango de colores en las que no hay ejes finos o transiciones afiladas. Debido a su algoritmo de compresión, funciona muy bien con fotografías. Es posible reducir significantemente el tamaño del archivo usando JPG mientras se mantiene la calidad de la imagen alta. En la imagen de abajo, por ejemplo, existe una diferencia difícilmente percibible entre la imagen guardada en calidad máxima y el .jpg guardado como calidad “High” (o 60%). Y a pesar de eso, la imagen tiene casi ¼ del tamaño de la original.

A la izquierda se encuentra la imagen de máxima calidad utilizando “Guardar para Web” en Adobe Photoshop (74.9 KB). En el medio está la misma imagen guardada como calidad alta, a pesar de que hay una pequeña diferencia notable a la vista, ¡El tamaño del archivo fue reducido a 19.6 KB! En el lado derecho está la misma imagen guardada como calidad baja, con fallas muy notables (6.29 KB).

Con la compresión .jpg posees la habilidad de prácticamente ajustar la calidad de la imagen a gusto, a cambio del tamaño del archivo. Con las fotografías seguramente encontrarás que la calidad de 60-70% funciona bien. Si hay texto en la imagen, notarás más defectos dada la agudeza de los ejes, y puede que necesites mejorar la calidad.

Compresión .gif y .png

Los formatos de imagen .gif y .png de 8-bit son mejores para imágenes con rangos de color limitados (pueden mostrar hasta 256 colores), donde hay grandes áreas de colores uniformes. En estas instancias, .png y .gif usualmente producirán una representación de la imagen original cercana a la perfección. El uso típico de estos formatos incluye íconos, ítems de interfaz e imágenes en las que el texto necesita ser representado con precisión.

A menudo, el formato .png de 8-bit compresionará mejor que .gif. Ambos formatos soportan pixeles transparentes (no confundir con transparencia alpha que es soportado por .png 24-bit).

Ambos, .gif y .png de 8-bit, utilizan compresión sin pérdida, pero están restringidas a un número de colores limitado. Estos tipos de compresión serán mucho más altos en calidad, y mucho más pequeños en tamaño de archivo de acuerdo a la limitación de color de la imagen. Estos formatos suelen ser muy buenos para interfaces y textos donde una compresión con pérdida como .jpg requeriría que fueran guardados en una calidad mucho más alta para lograr verse igual (es decir, archivos más grandes).

El tamaño de la imagen verdaderamente importa

La compresión de una sola imagen puede no variar mucho, pero si lo vuelves una práctica común a todas las imágenes de tu sitio, terminarás ahorrando una gran cantidad de ancho de banda. Al utilizar archivos más pequeños, puedes lograr que las páginas carguen más rápido y mejorar muchísimo la experiencia del usuario.

Y como sabemos, el tiempo de carga es un factor determinante en cuando a la retención de los usuarios. Así que optimizar tus imágenes, no sólo es una buena forma de aumentar la velocidad de tu sitio, sino su popularidad también.

Fuente: Ux Booth