En este artículo nos vamos a dar una zambullida en profundidad en los formatos gráficos, usados para diseño web. Además bajaremos al detalle, para comenzar a conocer los formatos nativos de las aplicaciones gráficas más populares.

A lo largo del Manual Curso Práctico de Diseño Web ya hemos abordado este asunto de pasada en diversos artículos y seguro que cualquiera de los lectores ya conoce varias cosas sobre formatos gráficos, pero vamos a agregar información que seguro resultará de gran utilidad y esencial para asentar las bases del aprendizaje de diseño web.

Solo una aclaración antes de comenzar y es que en este artículo no vamos a tratar todavía algunos de los tipos de archivo que se usan en el mundo de la web. Seguro que muchos de vosotros estáis deseando saber más sobre los populares formatos jpg, gif, png, etc. Todos esos los veremos en el artículo Formatos gráficos para las imágenes de la web.

Introducción a los formatos gráficos para diseño web

El almacenamiento de los datos que componen una imagen digital en un archivo binario puede realizarse utilizando diferentes formatos gráficos, cada uno de los cuales ofrece diferentes posibilidades con respecto a la resolución de la imagen, la gama de colores, la compatibilidad, la rapidez de carga, etc.

La finalidad última de un formato gráfico es almacenar una imagen buscando un equilibrio adecuado entre calidad, peso final del fichero y compatibilidad entre plataformas. Para ello, cada formato se basa en una o más técnicas diferentes, que pueden incluir codificación especial, métodos de compresión, métodos de dithering, etc.

Generalmente, todo fichero gráfico comienza con una cabecera (header) de estructura variable, que indica al programa que lo solicite las características de la imagen que almacena (tipo, tamaño, resolución, modo de color, profundidad de color, número de colores de la paleta si la hay, etc).

A continuación se encuentran los datos propios de la imagen, generalmente comprimidos con un algoritmo específico de ese formato, que contienen información sobre el color de cada píxel de la imagen (mapas de bits) o una tabla con las características propias de cada objeto (gráficos vectoriales). En caso de usarse una paleta de colores, la información sobre dicha paleta también deberá estar contenida en el fichero.

La imagen puede estar formada por un número diferente de píxeles, dependiendo de su tamaño y resolución, y tener más o menos colores. En función del número de píxeles y del número de colores la imagen tendrá más o menos calidad, pero cuanto más calidad tenga, más ocupará el fichero necesario para almacenarla. En el caso de los gráficos vectoriales no se definen píxeles individuales, dependiendo la calidad y el peso final del formato concreto en que se almacenen.


Los ficheros gráficos de mapas de bits contienen pues una cabecera, los datos de los píxeles (generalmente comprimidos) y la paleta de colores (salvo si se usan 24 bits por píxel, caso en el que no es necesaria ninguna paleta). Los ficheros vectoriales, una cabecera y una tabla con las características de cada vector componente del gráfico.

Por otra parte, con el paso del tiempo los ficheros gráficos almacenados en nuestro equipo se hacen cada vez más numerosos, haciéndose necesaria una estrategia de gestión de los mismos para conseguir establecer un cierto orden que nos permita saber en todo momento cuántos ficheros tenemos, de qué clase y qué tipo de información contiene cada uno de ellos.

Vamos a estudiar en este capítulo entonces los principales formatos gráficos usados en imagen digital, haciendo incapie en aquellos usados normalmente en las páginas web, así como las diferentes estrategias de gestión que podemos seguir.

Formatos nativos aplicaciones de diseño gráfico

AI (.ai)

El metaformato AI (Adobe Ilustrator) es el utilizado por el programa Adobe Ilustrator para guardar sus ficheros gráficos nativos.

Los ficheros AI admiten cabecera de previsualización (thumbnail) y pueden trabajar con vectores y mapas de bits. Permiten texturas, degradados, fotos integradas o vinculadas a ficheros externos, textos trazados o con fuentes incluidas y manejo de capas y máscaras.

Suele producir ficheros de peso medio, dependiendo del contenido, pero se puede rebajar ya que admite algoritmos de compresión sin pérdidas.

Es un formato muy popular, válido para PC y MAC, apto para intercambiar gráficos entre diferentes aplicaciones, pero teniendo siempre en cuenta la versión de Ilustrator que creó el archivo original, ya que deben de ser versiones compatibles.

CDR (.cdr)

CDR (Corel Draw) es el formato nativo del programa de gráficos vectoriales Corel Draw, siendo válido para PC y MAC.

Es un formato vectorial, pero admite la inclusión de elementos de mapa de bits (integrados o vinculados a ficheros externos), pudiendo llevar además cabecera de previsualización (thumbnail). Junto a AI es uno de los formatos con más posibilidades con respecto al color, a la calidad de los diseños y al manejo de fuentes, pudiendo contener los textos trazados o con fuentes incluidas.

Una de las principales desventajas de este formato es su falta de compatibilidad con el resto de aplicaciones gráficas, al ser éstas incapaces de almacenar imágenes bajo este formato.

DXF (.dxf)

El formato DXF (Drawing Interchange Format) es un formato vectorial que la empresa Autodesk lanzó para permitir el intercambio de archivos de dibujo entre los diferentes programas de CAD. Soporta hasta 256 colores (8 bits).

Existen dos versiones de DXF (ASCII y binario), que no utilizan ningún algoritmo de compresión. Los ficheros de la versión ASCII contienen números y órdenes a realizar escritos en codificación ASCII, por lo que pueden ser abiertos y leídos con cualquier editor de texto, como el Notepad de Windows. Esta información indica la ubicación de puntos flotantes matemáticos o floating points, utilizados para exhibir la imagen en pantalla. Este sistema, más lento que el de otros formatos, requiere hardware avanzado para poder funcionar correctamente.

Los ficheros en formato DXF son reconocidos por la mayoría de sistemas CAD y por algunos programas de diseño gráfico vectorial, como Corel Draw y Adobe Ilustrator, que pueden manejarlo sin mayores dificultades.

No son soportados por ningún navegador web.

DRW (.drw)

Formato grafico vectorial usado por diferentes programas que funcionan bajo DOS y Windows, como Micrografx Designer o Windows Draw. Los gráficos .drw pueden ser incluidos en presentaciones creadas con PowerPoint, en diagramas de Microsoft Visio 2000 o en documentos de Microsoft Word.

No es soportado por ningún navegador web.

EMF (.emf)

EMF (Enhanced MetaFile) es un metaformato gráfico vectorial de 32 bits, reconocido por casi todas las aplicaciones de diseño gráfico y compatible con los sistemas operativos Windows, pudiendo ser usado en las aplicaciones del paquete Office.

Junto a las características propias de los formatos vectoriales presenta la ventaja adicional de que sus ficheros pueden ser creados rápidamente, ya que lo que se encola en la impresora son comandos de dibujo, con lo que se puede evitar la sobrecarga en el caso de impresión remota de ficheros gráficos.

Además, este formato es más eficiente porque genera un archivo relativamente pequeño y genérico, que es compatible con todas las impresoras.

Como desventaja, los archivos de formato EMF no contienen la misma cantidad de detalles que los de otros tipos de formatos gráficos vectoriales, como los archivos DWF.

Por lo que respecta a la web, es soportado por Internet Explorer, aunque hay algunos gráficos que no son interpretados correctamente.

FH10 (.fh10)

Formato nativo del programa de gráficos vectoriales Frenad 10, válido para PC y MAC. Puede llevar cabecera de previsualización (thumbnail) y se puede comprimir, dependiendo el tamaño final del contenido.

Puede llevar las fotos integradas o vinculadas a ficheros externos y textos trazados o con fuentes incluidas.

Es posible importarlo a diferentes programas gráficos, como Macromedia Flash o Adobe Ilustrator, pero no es soportado por ningún navegador web.

PCX (.pcx)

PCX es el formato nativo del programa gráfico PC Paintbrush, de la empresa Z-Soft. Es uno de los formatos de mapa de bits más conocidos, que soporta en sus últimas versiones imágenes de hasta 24 bits en color (unos 16,8 millones de colores), no presentando limitaciones respecto al tamaño de las imágenes.

Usa un algoritmo de compresión RLE de codificación sencilla y alta velocidad de descompresión, orientado más a la rapidez de acceso que a la reducción de tamaño de los archivos.

Su principal ventaja es la compatibilidad, ya que multitud de aplicaciones gráficas lo soportan (la gran mayoría de los programas de desktop publishing y de tratamiento de imágenes), siendo utilizado por las aplicaciones de dibujo de Windows.

Actualmente está en desuso en el campo multimedia, pero no así en el terreno profesional, donde se sigue utilizando con frecuencia.

PIC (.pic)

PIC es un formato utilizado en muchas aplicaciones gráficas que funcionan bajo MS-DOS y Windows, como PC Paint y Pictor.

Este formato puede almacenar una imagen de mapa de bits con dos posibilidades: 256 colores a una resolución máxima de 320 x 200 píxeles y 16 colores a una resolución de 640 x 480 píxeles. También puede almacenar una secuencia de imágenes en cada fichero, siendo en este caso sólo posible imágenes en tonos de gris.

Los datos de la imagen en el fichero vienen expresados como una matriz de bytes sin comprimir, en la que se almacena por filas el valor de los píxeles de la imagen o imágenes que lo forman.

Hay que tener mucho cuidado al manejar ficheros con extensión .pic, ya que es utilizada por diferentes programas gráficos que producen ficheros incompatibles entre sí, como Lotus 1-2-3, Dr-Halo y Micrografx.

Las principales desventajas de este formato son la escasez de colores posibles en altas resoluciones y la incompatibilidad entre formatos PIC, que hacen que sea uno de los menos utilizados en la actualidad.

PSD (.psd)

PSD (Photoshop Digital Format) es el formato de mapa de bits (aunque con funcionalidades avanzadas) nativo del programa de tratamiento de imágenes Adobe Photoshop, válido para MAC y PC.

Es un formato sin compresión, por lo que no produce pérdidas de calidad, y admite todos los Modos de Color, canales alfa, tintas Planas, guías, trazados, selecciones, textos, capas simples y de ajuste y máscaras.

Soporta hasta 32 bits de profundidad de color en cualquier modo de color, produciendo imágenes de alta calidad que se pueden exportar, sin pérdida de calidad, a programas de auto edición y diseño como PageMaker, QuarkXpress, Ilustrator, etc. Incluso existen programas como CorelDraw que pueden abrir ficheros PSD manteniendo la estructura de capas original.

TGA (.tga)

El formato TGA (TrueVision Targa) es un formato gráfico de mapa de bits desarrollado por la empresa Truevision para las tarjetas Targa y Vista, válido para PC y MAC, que permite guardar imágenes monocromáticas (2 bits) y con diferentes niveles de profundidad de color (8, 16, 24 y 32 bits), utilizando o no una paleta gráfica. Puede trabajar en Escala Grises, Color Indexado, RGB (16 y 24 bits sin canales alfa) y RGB de 32 bits (un solo canal alfa).

Permite almacenar los archivos comprimidos o sin comprimir, aunque la mayoría de programas que lo soportan solo pueden abrir archivos TGA sin compresión, siendo entonces el que el peso de los ficheros es muy elevado.

Este formato está especialmente indicado para retocar diseños profesionales que se vayan a reproducir en pantalla, debido a que la amplia gama de colores produce un efecto muy realista y sumamente elaborado. También es muy útil cuando se trabaja con escáneres de alta calidad y para la exportación de imágenes a edición profesional vídeo. Sin embargo, en impresión es poco usado, ya que con profundidades de color de 16 bits o menos las imágenes pierden detalles.

Las principales desventajas de este formato son el tamaño de los archivos, que ocupan bastante más espacio que otros formatos de igual calidad, y que no guarda muchos detalles a veces necesarios, como la resolución que soporta.

TIFF (.tif / .tiff)

El formato TIFF (Tagged Image File Format) es un formato de mapa de bits desarrollado por Aldus Corporation capaz de almacenar imágenes en blanco y negro (1 bit), escala de grises (9 bits), RGB (24 bits), CMYK (32 bits) con más de diez técnicas de compresión disponibles (sin compresión, LZX, JPEG, MAC Packbit, etc.) y Color Lab.

Soporta el algoritmo de compresión sin pérdidas LZW, almacenando las imágenes en una serie de bloques que pueden contener información sobre la imagen en sí, su tamaño, su manejo del color, información a las aplicaciones que utilicen ese archivo, texto e incluso una miniatura (thumbnail), pequeña representación de la imagen, a la cual el programa accede rápidamente y no pierde tiempo descomprimiendo toda la imagen.

Es válido para PC y MAC, siendo soportado por multitud de programas gráficos de pintura e ilustración, por lo que es muy utilizado para intercambiar archivos entre diferentes aplicaciones y plataformas.

Es uno de los formatos más utilizados en artes gráficas, así cómo en fotografías en las que queremos que no haya ninguna perdida, bien para imprimirla o bien para interpolarla para aumentar su resolución. También es el formato más usado cuando se trabaja con escáneres, debido a su útil manejo del color.

Como desventajas, no tiene soporte para vectores ni texto, por lo que todos los tipos deben ser convertidos a mapas de bits antes de aplicarse al archivo. También, que debido a la flexibilidad que presenta respecto a los sistemas de compresión y a la compatibilidad entre aplicaciones, los programas diseñados para leer archivos TIFF deben disponer de la misma flexibilidad para entender los datos contenidos en ellos, lo que desafortunadamente no siempre ocurre.

WMF (.wmf)

WMF (Windows MetaFile Format) es un metaformato de 16 bits de los sistemas operativos Windows, siendo un estándar de intercambio de gráficos entre las diferentes aplicaciones Microsoft (Word, Excel, Access, etc.).

WMF es un formato vectorial (aunque no basado en curvas de Bézier) y escalable, que funciona copiando en un archivo los comandos para realizar la imagen en cuestión, ahorrando con ello una cantidad considerable de espacio. Teóricamente puede almacenar cualquier elemento gráfico, ya sean imágenes bitmap, textos o gráficos vectoriales complejos.

Gracias a su facilidad de manejo, hay muchas aplicaciones que lo utilizan en la actualidad, siendo compatible con la mayoría de programas vectoriales. Con la aparición del sistema operativo Windows 95 se creó un nuevo formato, EMF, que ampliaba las capacidades del WMF.

Más formatos importantes

Recuerda que esta lista es solo relativa a los formatos nativos de muchas de las aplicaciones de diseño gráfico más usadas, pero en general en cuanto a formatos gráficos hay muchos más usados en muchos otros contextos.

Para completar esta información revisa también el próximo artículo, donde vamos a explorar los formatos gráficos específicos de la web, soportados por los navegadores para la construcción de sitios, es decir, los correspondientes jpg, png, gif y otros adicionales no tan conocidos pero que están ganando peso recientemente.