Formatos de imágenes: ¿cuál usar en cada caso?

Hoy en día todas las personas manejamos imágenes digitales casi a diario. Fotografías que tomamos con nuestro smartphone o nuestra cámara digital, capturas de pantalla de nuestro escritorio o de una ventana, diagramas que podríamos crear para una presentación de diapositivas...

Aunque hay muchos formatos distintos y no todos los formatos son ideales para todos los tipos de imagen o para todos los contenidos: no es lo mismo un logotipo que una fotografía o que un documento escaneado. Por ello vamos a intentar poner algo más de luz sobre los formatos de imagen más habituales y qué formato deberíamos utilizar para cada tipo.

Con pérdida

Algunos de los formatos de imágenes que mencionaremos en este artículo hacen uso de compresión por pérdida. Lo que hacen es descartar cierta información que el programa consideraría "irrelevante" por ser "demasiado detalle" para el ojo humano. De ese modo se reduce el tamaño de los archivos, con una calidad razonable para ciertos tipos de imágenes.

¿Para qué tipos de imágenes son ideales estos formatos? Sobre todo para distribuir y almacenar fotografías, o imágenes con muchas texturas. Sin embargo no es un formato ideal para imágenes con muchas zonas con color plano, o muchos bordes (como por ejemplo, aquellas que tienen mucho texto, particularmente con tipografías delgadas). Cuando esta información se simplifica no da resultados tan buenos como cabría esperar.

JPEG

Es sin duda el formato más conocido por todos. Las fotografías que tomamos con nuestro teléfono se codifican con él, muchas de las imágenes de Internet también... Cuando hablamos de JPG todos sabemos a qué nos referimos.

Aunque, para bien o para mal, no hay una única versión del formato JPG. Podemos hablar del formato original (desarrollado y presentado en 1992), JPEG 2000 (destinado a mejorar al anterior y con algunas características muy interesantes, como la posiblidad de tener una imagen con distintas calidades según la zona) o JPEG XR (más ligero que JPEG 2000, desarrollado por Microsoft y estandarizado en 2010).

Observamos la misma imagen con distintas compresiones.

Aunque la fotografía original ya cuenta con una cierta compresión (que se nota cuando la mostramos a su resolución original y nos fijamos en los bordes), podemos reducirla mucho más, aunque a costa de la calidad.

Si os fijáis, habiendo aumentado muchísimo la compresión (al 50%, por ejemplo), todavía podemos hablar de una calidad aceptable para la Web: archivos de pequeño tamaño que, por tanto, cargarán muy rápidamente, incluso en conexiones móviles. Por contra (y como parece obvio), a mayor compresión, menor calidad en soportes que la requieren. Obviamente no deberíamos imprimir una imagen muy comprimida si no queremos ver píxeles del tamaño de nuestras uñas.

WebP

El origen de este formato está en el códec de vídeo VP8, tecnología desarrollada originalmente por la empresa On2 Technologies y posteriormente adquirida por Google, para liberarlo años después. Google era consciente de que gran parte del ancho de banda consumido en Internet era responsabilidad directa de las imágenes, y por ello aprovechó la tecnología de VP8 para desarrollar un formato pensado directamente para la Web.

En las pruebas que he realizado he observado una reducción del tamaño bastante importante (del orden de entre el 30 y el 60%, sobre todo en fotografías), pero he observado algo todavía más interesante: con altos niveles de compresión apenas se aprecian artefactos (aunque sí se aprecia, como es natural, pérdida de detalle).

Si generamos archivos .webp con distintas calidades utilizando los códecs oficiales, que están disponibles para todos los sistemas operativos, podremos observar por nosotros mismos los resultados: la calidad es "razonable" en todos los casos, pero el tamaño es mucho menor (probad, por ejemplo, con la versión comprimida con el 15% de calidad). Desde mi punto de vista, la superioridad de este formato por encima de JPEG (al menos para la Web) es más que considerable.

Sin pérdida

En ocasiones conviene utilizar un formato que no implica pérdida de información, a pesar de aplicar algún algoritmo de compresión, almacenando en todos los casos la imagen original (aunque con distintos formatos). ¿Qué imágenes deberíamos almacenar en estos formatos? Aquellas que contengan grandes áreas de colores planos, como capturas de pantalla o logotipos.

Podemos almacenar cualquier tipo de imagen en un formato loseless, por supuesto, pero el archivo quizá ocupe demasiado, y no sea tan práctico como parece. Por poner un ejemplo: la fotografía superior, a su resolución original y tras convertirla a formato PNG, ocupa un total de 23 megabytes.

PNG

PNG son las siglas de Portable Network Graphic. Se trata de un formato que no tiene pérdida de información que se planteó como el reemplazo del formato GIF (objeto de litigio por temas de patentes relacionados con el algoritmo de compresión LZW).

Tiene algunas posibilidades interesantes, como la introducción de un valor alpha para cada píxel, permitiendo que cada píxel tenga un nivel distinto de transparencias. Esta característica se puede observar, por ejemplo, en las capturas de pantalla de ventanas creadas por OS X o por KDE. Podéis verlo a la derecha: la sombra es transparente, de manera que podríamos poner otra imagen detrás de esta, y la sombra se seguiría apreciando.

BMP

Todos los usuarios de Windows estoy seguro de que conocemos el formato BMP, por ser el formato en el que se guardaban por defecto las imágenes de Paintbrush/Paint. A pesar de que las imágenes en el formato BMP ocupan mucho en todos los casos, sí que hacen uso de una cierta compresión llamada RLE (Run Length Encoding). Por resumir y simplificar, imaginad que tenemos una secuencia de este tipo: AAAAAAAAAAAABBBBBBBBB. Podríamos simplificarla diciendo "hay doce A y nueve B", con algo del tipo 12A9B.

Por tanto, si hay muchos colores cambiantes en píxeles consecutivos (por ejemplo, con un degradado, o una fotografía), la compresión no es efectiva, y la imagen puede considerarse loseless y sin compresión. Para que os hagáis una idea: la imagen superior, codificada en formato BMP, ocupa un total de 50MB (dedicando 24 bits a cada píxel).

¿Tiene alguna ventaja este formato? Absolutamente ninguna, salvo el bajo coste computacional para ordenadores muy antiguos (siempre que no haya que redimensionar nada).

RAW

No podemos dejar de lado los formatos RAW, utilizados sobre todo por las cámaras fotográficas profesionales pero extendiéndose cada vez más a otros dispositivos (hasta el punto de que, por ejemplo, algunos modelos Lumia con PureView pueden almacenar sus fotografías en alguno de estos formatos).

Digo siempre "estos formatos" porque cada fabricante tiene su propio formato. Identificados con extensiones DNG, NEF, ORF o simplemente RAW, habitualmente es necesario procesarlos para obtener una imagen más "normal" (en formato JPG, por ejemplo), dado que estos archivos contienen la información captada por el sensor de la cámara, en crudo (como curiosidad: raw es la palabra inglesa para crudo).

¿Qué utilidad tienen estos formatos? Sobre todo el archivo de los archivos originales de las fotografías por parte de usuarios de equipos fotográficos de altas prestaciones. No voy a meterme en las razones; ya lo hacen, magistralmente, mis compañeros de Xataka Foto.

Vectores: SVG

Todas las imágenes de las que hemos hablado hasta el momento tienen algo en común: están compuestas por píxeles (de uno u otro modo), y eso suele implicar que si aplicamos un zoom superior al 100% empecemos a ver los píxeles de un tamaño mayor al que están pensados.

Este problema no lo tienen las imágenes realizadas con vectores. Una imagen vectorial, en lugar de estar compuesta por píxeles, está compuesta por elementos geométricos (líneas, polígonos, círculos/elipses, curvas...) que un motor se encarga de renderizar.

El formato más extendido es SVG, un formato basado en XML y que hoy está admitido por prácticamente todos los navegadores modernos.

Si utilizáis uno de ellos, a la derecha de estas líneas deberíais ver una estrella de cinco puntas con los colores de Genbeta (se trata de uno de los ejemplos de W3Schools). El código XML, de hecho, está insertado en esta misma página, y no en otro fichero aparte como suele ocurrir con las imágenes de otros formatos (aunque sea técnicamente posible introducirlo en la misma página).

Además, si ampliáis esta página con el gesto o el atajo de teclado que corresponda, veréis como no aparecen bordes de sierra ni pixelaciones en la imagen. Podemos ampliar y reducir indefinidamente la imagen. Este tipo de formatos (hay bastantes más, aparte del SVG, como los formatos propietarios de Microsoft y Adobe) son especialmente adecuados para gráficos simples (o no tan simples), como logotipos o símbolos.

Hay más formatos

Por supuesto, existen más formatos aparte de los que he mencionado en este artículo. Algunos de ellos están en desuso, y otros son propietarios de ciertas aplicaciones. Estos son los más relevantes y conocidos por todos.

La clave, realmente, es utilizar el formato correcto para cada tipo de gráfico y aplicación concreta, y ofrecer (en caso de que sea necesario) una versión alternativa. Por ejemplo: ofrecer imágenes WebP a los usuarios de los navegadores modernos, pero mantener imágenes JPEG para aquellos usuarios que no quieran/puedan actualizarse, al menos como medida temporal.

En Genbeta | Cómo funcionan los formatos de imagen y en qué los mejora WebP
En Xataka Foto | Curso de Fotografía: 37. Tipos de archivos fotográficos