Optimización de la profundidad de la imagen

Algo que aprendí (o, supongo, reaprendí ) este año es lo importante que es prestar mucha atención a la profundidad de bits de las imágenes. En el pasado, solíamos elegir obsesivamente entre una profundidad de color de 2, 4 u 8 bits en nuestros GIF, porque cuando muchos usuarios usaban módems de acceso telefónico para navegar por la web, cada kilobyte contaba.

Ahora que una gran cantidad de nosotros accedemos a la Web a través de banda ancha, ¿adivinen qué? Cada kilobyte todavía cuenta. Porque no todo el mundo tiene acceso a la banda ancha, especialmente en el ámbito móvil; y también, vale la pena aprovechar cualquier momento en el que podamos reducir la representación de la página. Supuse que las herramientas de optimización manejaban cosas tan triviales como la optimización de la profundidad del color para nosotros, pero descubrí que estaba equivocado en ese punto.

Esto es particularmente cierto para los PNG. De forma predeterminada, muchas herramientas de edición de imágenes guardan archivos PNG con una profundidad de color de 2^24, por si acaso.

Para una fotografía, eso tiene cierto sentido (aunque si es una fotografía, probablemente deberías guardarla como JPG o WebP), pero para cosas como logotipos e íconos, son aproximadamente 2^24 colores más de los que vas a usar.

Entonces, en Acorn , mi editor de imágenes preferido,He tenido especial cuidado en reducir la profundidad de bits de los archivos PNG en el cuadro de diálogo de exportación.En muchos casos, he reducido el peso de la imagen en un 80% o más indexando colores en una paleta de 256 valores o menos, sin pérdida de fidelidad visual. (Nuevamente, no estoy hablando de fotografías).

He aquí un ejemplo:

Ese PNG a todo color pesa aproximadamente 379 KB. Restringido a una paleta de 32 colores, tiene 61 KB. Y eso es sólo en el momento de la exportación: una vez que los ejecuto a través de ImageOptim , los tamaños optimizados son 359 KB y 48 KB. Esto supone un ahorro de peso de aproximadamente un 85 %, con sólo reducir la profundidad del color. Y si implementé la imagen y descubrí que necesita algunos colores más, podría volver a ejecutar el proceso para usar 64 colores: el tamaño final, en ese caso, es de 73 KB, lo que sigue siendo un ahorro enorme.

Reducir la profundidad del color a simple vista es claramente más oneroso que lanzar un script de optimización en un directorio de imágenes, pero en mi experiencia, los resultados son mucho más eficientes en términos de peso de la imagen y, por lo tanto, de experiencia del usuario. Y de eso se trata realmente todo esto, ¿no?