Los formatos de las imágenes

Hace poco leía un artículo de Cosas Sencillas donde se mostraban una serie de resultados con respecto a qué tipo de formato de imagen emplear para hacer una captura de la pantalla.

El estudio había sido realizado por Digital Inspiration y señalaba algo que, en realidad es bastante conocido si tenemos algo de experiencia en esto de editar o manipular imágenes pero, que podría extenderse un poco más ya que los formatos de las imágenes son algo fundamental a la hora de incluirlas en una página web.

Hay varios motivos para deteminar cuál es el formato que vamos a usar y, en realidad, no hay reglas en uno u otro sentido, basta tomar la decisión que dependerá de lo que queremos mostrar y de cómo queremos mostrarlo. Un detalle que no es menor es que los formatos GIF permiten transparencias (que ciertas partes se fundan con el fondo) pero, como contrapartida, la cantidad de colores de un GIF está limitada a 256 y por lo tanto, se pierde cierta definición. Por el contrario, el formato PNG también admite transparencias y mucho más sofisticadas sin llimitar la cantidad de colores pero, su tamaño es bastante mayor y, en Internet Explorer esta transparencias no se muestra correctamente salvo que se utilice algún hack o script.

Un ejemplo con la misma imagen guardada en los dos formatos. Como el tamaño es pequeño, no parece haber una gran diferencia pero, eso cambia sustancialmente si la imagen es más grande:

GIF: 9536 bytes 256 colores	PNG: 23109 bytes 6173 colores
IMAGEN: 600x600	IMAGEN: 600x600

Parece un poco obvio, a mayor calidad, mayor volumen de información y por lo tanto, archivos de mayor tamaño lo que significa tiempos de carga superiores y para peor ... no hay reglas fijas. El tamaño de ese archivo, no depende exclusivamente del formato con que la guardemos, depende mucho de la imagen en si misma, de la cantidad de colores que tenga, de cómo esten distribuidos, etc.

Por ejemplo, estas dos imágenes se verán iguales, solo tienen dos colores así que da lo mismo cualquier formato. El archivo GIF tiene 949 byes, es pequeño pero, el PNG es aún más pequeño ya que tiene nada más que 245 bytes ¿Por qué? porque, para decirlo sin demasiadas explicaciones técnicas, el formato PNG "comprime" la imagen al igual que el GIF pero lo hace de una manera mucho más eficiente. La diferencia más importante al elegir un formato es justamente esa, la compresión, la forma en que se guarda la información.

El formato tradicional de Windows es el BMP y en principio, no tiene compresión ni limitaciones en la cantidad de colores. Son los llamados mapas de bits (BitMaP o Bit Mapped Picture). Para explicarlo rápidamente, cada pixel de la imagen es un número que codifica el color y si tiene más de 256 colores, cada pixel requiere tres números así que una imagen de 250x150 ocupará 112500 bytes más uns cuantos extras que conforman el header o encabezado que lo identifica. Podríamos usar este formato en una página web pero, su volumen es muy importante así que no conviene; sin embargo, esa no-compresión es la que le da la máxima calidad ya que un punto de color jamás cambiará.

¿Cómo es esto? Es sencillo, la compresión de una imagen hace que "pierda calidad" en ese sentido, la que mayor pérdida tiene es el formato JPG que es el más extendido. Sin duda, es el que genera los archivos más pequeños pero también es el que "deforma" las cosas y eso es muy improtante a la hora de elegirlo.

El formato a elegir, dependerá del tipo de imagen a mostrar y no queda otro remedido que probar. Todos tienen sus ventajas y desventajas, lo único que importa es conocer esos beneficios y limitaciones:

PNG: 705 bytes	GIF: 2104 bytes
JPG: 6137bytes	BMP: 112854 bytes

¿Se notan las diferencias? En este caso, los BMP no son evaluables ya que Blogger los convierte a JPG así que, podemos obviarlos pero, si ampliamos, vamos a ver la diferencia entre los formatos PNG y JPG:

Pero, como todo comenzó con la captura de pantallas, sería bueno terminar con eso.

Lo más sencillo que podemos hacer para capturar la pantalla es utilizar el teclado. CTRL + PrintScreen captura el contenido de la ventana del monitor; ALT + PrintScreen captura sólo la ventana activa. En ambos casos, se guarda en el portapeles. Si queremos editar esa imagen necesitamos pegarla en algún editor.

Una forma más sencilla es utilizar algún software y ya que estamos, otro artículo de Digital Inspiration nos muestra un programa gratuito y muy interesante: Cropper es un visor que permite hacer capturas de pantalla y guardarlas en diferentes formatos. Al activarlo, se muestra una ventana semitransparente totalmente configurable que podemos dimensionar y ajustar con el mouse o con el teclado lo que la hace muy precisa. Luego, basta un doble click para guardarla en formatos PNG, JPG o BMP, imprimirla o copiarla al portapapeles

Las opciones permiten establecer las carpetas por donde se va a guardar, el nombre de esas capturas, el formato y tamaño por defecto e incluso crear miniaturas o reemplazar las funciones de la tecla PrintScreen.

La última versión puede descargarse desde acá.