Cuando hablamos de optimizar una imagen, u optimizar lo que sea, hablamos de buscar el mejor equilibrio posible entre el resultado que buscamos y el coste que tiene.

Optimizamos todos los días y a todas horas, cuando decimos eso de «Voy a nosédonde, y ya hago noséqué, porque me pilla casi de camino». Ir directamente a “nosédonde” posiblemente sea más rápido que desviarse ligeramente para hacer “noséqué” pero, hacer las dos cosas en ese orden es más rápido que hacerlas de manera separada.

Con una imagen pasa lo mismo. Antes de ponernos a lo loco a reducir tamaños hay que pensar cual es el objetivo de esa imagen y qué nivel de calidad será necesario o aceptable para ese objetivo. En una web, el tamaño del archivo es importante. No necesitamos imágenes en alta resolución con una calidad muy alta, si lo que tenemos es, por ejemplo, una tienda de componentes electrónicos. Sin embargo sí será importante una apariencia impecable si lo que vamos a vender es imagen: fotografía, diseño, arquitectura… Incluso, aunque en menor medida, marketing.

El objetivo de la optimización, en cada caso será distinto.

Sobre qué factores podemos actuar para optimizar una imagen

Escoge bien el formato

Escoger el formato correcto es, para mí, un paso crítico a la hora de optimizar una imagen. Existen diferentes formatos de imagen y es arriesgado pensar que un formato sea mejor que otro en todos los casos. La variedad de formatos responde a la necesidad de resolver las muchas necesidades diferentes en al campo de la imagen.

En general, de todas las posibilidades, existen una serie de formatos de imagen más empleados en la web que otros. Por su rendimiento y su extensión en cuanto al uso y compatibilidad, opino que es recomendable ajustarse a éstos.

También tenemos formatos alternativos que podríamos usar en web pero, algunos tienen bastantes limitaciones en cuanto a la compatibilidad con navegadores comunes.

Limpiar los metadatos.

Un fichero de imagen guarda, junto con la imagen, cierta cantidad de información relativa a la historia de la propia imagen. Los metadatos almacenan desde la licencia de uso y el nombre del autor, hasta la velocidad de obturación del objetivo y el modelo de la cámara que tomó la imagen, además de versión del software de la cámara, posición GPS, el sistema operativo, el software de edición…

Es bastante común que limpiar los metadatos antes de subir cuaquier fichero a internet sea una recomendación de privacidad y seguridad bastante básica. Sin embargo, éstos pueden tener utilidad y, en ese caso, puede que no te interese eliminarlos por completo; puedes editarlos para hacer desaparecer todo lo que no te interese hacer público.

La mayoría de las aplicaciones de optimización ya ofrecen limpiar estos datos.

Podemos reducir la profundidad del color.

Si tenemos una imagen que no tiene transparencias, no necesitamos guardar un canal alpha, podemos pasar perfectamente de 32 a 24 bits, lo que en teoría reduciría el tamaño del archivo en torno a un 25%.

Si además nuestra imagen no tiene degradados demasiado grandes, quizás no necesitemos 16 millones de colores y con 16 bits de color sean suficientes.

Si es pequeña, puede ser que con 256 colores, 8 bits, apañemos el asunto. ¿Parecen pocos verdad? Los ficheros GIF solo usan 256 colores distintos y no se ven tan mal. Las pantallas actuales tienen una densidad de píxel tal, que permiten emular colores empleando técnicas como dithering (o tramado).

Reducir el tamaño o resolución de la imagen.

¿Quién va a ver tu imagen? ¿En qué dispositivo? Seguramente tu cámara, o la del fotógrafo que te ha hecho las fotos, tenga resoluciones de 10, 20, 30 megapíxeles… Pero, ¿Puede la pantalla de tus visitantes pintar tantos píxeles? Una pantalla 4K tiene en torno a 8 megapíxeles, una 1080p (full-HD) 2 megapíxeles. ¿Crees que merece la pena enviar 20 megapíxeles por internet?

A la hora de optimizar una imagen ten en cuenta, además, la densidad de píxel de la pantalla. Se dice que el ojo humano no percibe más que 0.2mm. Esto es, dos líneas paralelas a menos distancia que 0.2mm, el ojo las percibirá como una sola más gruesa o de manera muy difusa.

Con esto quiero decir que, incluso aunque el dispositivo tenga una resolución bestial, si su tamaño es pequeño, no tienes por qué guardar información para cada uno de sus píxeles. Los procesadores gráficos son muy listos si necesitan cubrir más píxeles de los que tiene el fichero, encuentran maneras muy buenas de rellenarlos.

Filtros de imagen

Son operaciones dentro del preprocesamiento que se aplican a los píxeles de una imagen digital para optimizarla, enfatizar cierta información o conseguir un efecto especial en ella.

Aplicar algoritmos para reducir el tamaño de la información a guardar.

Sobre una imagen también podemos aplicar operaciones que nos permiten reducir la información que guardamos sobre ella.

Otra técnica es predecir el color de un píxel a partir de algunos píxeles a su alrededor. Estos píxeles también podrían haber sido obtenidos de la misma manera. Evidentemente, hay algunos píxeles clave que no se pueden adivinar y hay que guardarlos.

Indexar los colores

Entre medias de todo lo anterior existe una técnica que permite crear tablas, índices o listas de los colores en una imagen de tal manera que, en lugar de guardar la información de color por cada píxel, lo que se guarda es la posición de la lista que contiene el color. Esto permite que, en la lista tengamos colores guardados en 32 bit, pero cada píxel guardará solamente el índice de la lista que contiene su color. Formatos como GIF o PNG-8 emplean esta técnica. Si tienes una imagen muy grande, pero con pocos colores, la ventaja es evidente.

Engañar al ojo

Todos conocemos alguna de las típicas ilusiones ópticas, o el asunto de aquel famoso vestido que algunos veían negro y azul, otros dorado y blanco, y algunos, dependiendo de la hora del día.

Al ojo y al cerebro, se les puede engañar haciéndoles creer que ven algo que no está. Y es que el cerebro tiene muchas cosas que hacer a lo largo del día y no puede estar pendiente de todos los detalles que pasan por ahí afuera. Suele tomar ciertas referencias y, sacar conclusiones usando los conocimientos que le aporta la experiencia.

Comprimir la imagen

Finalmente, la madre del cordero para optimizar una imagen. Aplicar algoritmos de compresión. Esto es, conseguir que con menos bits, podamos recuperar la información necesaria.

Al igual que disponemos de varios formatos de imagen, existen muchos algoritmos de compresión y todos tienen sus ventajas y sus inconvenientes. Algunos comprimen mejor imágenes, otros texto, otros comprimen un poco peor pero son mucho más rápidos o no producen pérdidas de calidad y compensa.

Una nota sobre esto. Debido cómo el proceso de compresión deja los archivos, si intentamos comprimir un archivo ya comprimido, puede que obtengamos un archivo más grande. Cuando quieras emplear métodos como GZIP para optimizar tu web, intenta excluir formatos como jpeg o png.