Un poco más sobre las imágenes y los formatos

La página de la Wikipedia donde se habla de cómo hacer que las imágenes pesen poco es una recomendación de Tony de Cosas Sencillas que dejó como aporte en una entrada reciente. Sin duda es interesante así que vamos a ver si podemos sacarle partido ya que lo mejor conocer como funcionan las cosas es lo mejor para poder elegir adecuadamente.

En realidad, los consejos para obtener imágenes de menos peso son relativos. De alguna manera hay una ecuación general que en principio podría definirse como "a menor peso, menor calidad". Es que, los formatos de imágenes pueden (o no) admitir algún tipo de compresión y los formatos usuales (tanto de imágenes como de video) JPEG (JPG), FLV (FLash) y MPEG (MPG) son un ejemplo de esa pérdida. Sin embargo, otros algoritmos de compresión dicen no tener una pérdida de calidad o por lo menos, esa pérdida es pequeña; ese es el caso de los formatos PNG.

¿Qué significa eso de la compresión? En la realidad, el ojo humano sólo capta un número limitado de colores así que una forma de comprimirlos es eliminar algunos.

Fíjense que el fondo de esta imagen parece uniforme y sin embargo, hay cinco colores diferentes:

De los tres formatos de archivo más utilizados en la web, el JPEG es el que más comprime y por lo tanto, es el que mayor pérdida tiene. Como esa compresión puede ser establecida por nosotros, la pérdida variará y habrá una relación directa con el tamaño del archivo generado. El formato GIF se comprime pero no tiene pérdida aunque está limitado a 256 colores. El formato PNG, sin duda, es el mejor y por eso se ha extendido tanto pero claro, todos poseen ventajas y desventajas así que la elección dependerá del uso y de gustos personales.

Lo más común es que las fotos (sobre todo a partir de las cámaras digitales) se muestren en formato JPEG ya que ocupan poco espacio. Las cámaras suelen "engañarnos" ya que la pérdida no se produce cuando las previsualizamos sino cuando las guardamos en la PC y luego, cambiarlas de formato no hará que mejoren. Se recomienda entre un 50 y un 70% de compresión para tener un balance adecuado entre calidad y peso.

Si hablamos de dibujos lineales, logos e imágenes detalladas, el formato JPEG no es el adecuado ya que los resultados serán entre malos y pésimos; aparecerán manchas y colores poco definidos.

Bien dicen que el formato GIF y el PNG son "casi intercambiables" ya que los PNG fueron inventados para reemplazarlos. Ambos tienen la posibilidad de trabajar con varias profundidades de color pero los PNG pueden tener paletas de colores mucho más amplias. Son los formatos que se utilizan para gráficos y dibujos lineales. El único problema de los PNG es que no pueden ser visualizado directamente por navegadores web antiguos y las transparencias no son soportadas por Internet Explorer.

La Wikipedia dice que hay un programa gratuito llamado OptiPNG que permite obtener la máxima compresión de archivos de formato PNG sin perder calidad (el programa está en inglés y funciona tanto en Linux como en Windows).

El problema más común con las imágenes es que al cambiarlas de tamaño suelen "deformarse" o perder tanta definición que simplemente se hacen irreconocibles. Hay una regla elemental: una imagen "grande" de mala calidad será una imagen de cualquier otro tamaño de mala calidad. Lo malo no mejora.

Para reducir el tamaño, lo mejor es comenzar con una buena imagen de 24 bits y luego, guardarla con una profundidad de 8 bits (256 colores) de tal forma, se reducirán las pérdidas. En el caso de los JPG, cada modificación sumará una pérdida de calidad así que lo ideal es siempre partir de la imagen original y si es algo "importante" mantenerla a buen resguardo y usar copias de diferentes tamaños.

En los últimos tiempos, ha aparecido una nueva opción que apunta a ser el modelo del futuro. Se trata de los llamados gráficos vectoriales SVG (Scalable Vector Graphics); un formato que, a diferencia de otros, es de uso libre, no tiene patentes y aparece con la idea de reemplazar los formatos de Macromedia Flash e integrarse a la tecnología de AJAX lo que permitiría crear páginas dinámicas muy flexibles.

Los gráficos SVG son curiosos ya que, en realidad, son archivos de tipo XML (textos similares a los códigos de una página web) y tienen la particularidad de ser "escalables" es decir, pueden mostrarse en diferentes tamaños y mantener siempre la misma calidad. Incluso, hay una variante llamda SMIL (Synchronized Multimedia Integration Language) que permite crear presentaciones o animaciones que incluyen multimedia (imágenes y sonidos).

Este ejemplo de una imagen en formato SVG puede verse en una ventana modal o abrirla completa en una nueva pestaña.

Las imágenes SVG están aprobadas por la W3C y los navegadores más modernos las soportan (Firefox, Safari, Opera, Konqueror, Amaya); en Internet Explorer no está integrado por defecto pero hay un plugin de Adobe que puede agregarse para visualizarlos.

Para quien quiera experimentar, hay un software libre llamado Inkscape que permite crear y editar este tipo de gráficos.

Aquí hay dos ejemplos más:

Comparación entre formatos: Imagen formato SVG (original 1.063×638 79 KB). Ver en una nueva pestaña.

Mapa de Kosovo muy detallado: Imagen formato SVG (original 1.777×1.830 3,71 MB). Ver en una nueva pestaña.

También es muy interesante ver una página que utiliza esta tecnología