Formatos de imagen

 

Los formatos de imagen más importantes en Internet

Desde los comienzos de Internet, las imágenes forman parte de los componentes que no deben faltar en ninguna página web. Ya se trate de fotos o de gráficos, los elementos visuales captan la atención de las visitas y, en muchos casos, ofrecen un evidente valor añadido, revalorizando los proyectos a la par que destacan la información expuesta en los textos, hacen aclaraciones sobre los contenidos, ofrecen datos adicionales (en el caso, por ejemplo, de las infografías) o actúan como elementos que invitan a la reflexión. Mientras que su importancia queda patente, desde hace años existen ciertas imprecisiones en lo que respecta a los formatos de imagen que se usan. En este sentido, la gran variedad de opciones no les hacen nada fácil a los responsables de las páginas web encontrar el formato adecuado para cada ocasión, lo que adquiere todavía un papel más relevante en el caso de los dispositivos móviles.

¿Qué tipos de formatos gráficos existen?

En la actualidad existen numerosos formatos de imagen para los gráficos bidimensionales y para las fotos, donde las respectivas funciones varían considerablemente. En términos generales se pueden distinguir los tradicionales mapas de bits o gráficos rasterizados y las imágenes vectoriales, que raramente se utilizan. En el caso de los primeros, la imagen se compone de muchos puntos concretos, es decir, de píxeles. Cuanto menor sea la dimensión de dichos píxeles y cuantos más haya, mayor será la resolución o la calidad del archivo de imagen y, por consiguiente, también el tamaño del archivo. La ampliación o reducción del archivo siempre lleva aparejada la correspondiente pérdida de calidad, debido a que, con cada cambio, los píxeles se perciben más claramente como las pequeñas estructuras cuadradas que son.

Este hecho es, a su vez, el mayor signo distintivo de los gráficos vectoriales, que pueden minimizarse o maximizarse de cualquier manera sin que esto afecte su calidad. La razón de ello reside en que las imágenes vectoriales no están compuestas por píxeles individuales, sino que se representan con vectores. A la hora del escalado, las formas que las componen, que contienen los datos exactos sobre el tamaño y la longitud, se adaptan automáticamente a las nuevas dimensiones totales. Sin embargo, cuanto más complejo sea el contenido de la imagen, menos adecuados son los formatos de vectores. Así, aunque se puede imitar una foto con vectores, las incontables facetas, efectos de iluminación y sombras solo se pueden reproducir con píxeles. Para obtener información más detallada sobre las diferencias y similitudes de ambos tipos de gráficos, consulta nuestro artículo comparativo sobre imágenes vectoriales y mapas de bits.

Formatos de imagen para los mapas de bits

Los gráficos rasterizados se utilizan más frecuentemente que las imágenes vectoriales, a pesar de sus desventajas a la hora de escalarse, debido a que se generan con rapidez y son aptos para casi cualquier tipo de situación. Es así como los elementos gráficos de las páginas web se pueden almacenar en formatos de píxeles como el formato JPG o el formato PNG de la misma forma que gráficos más complejos.

El punto fuerte de la representación mediante píxeles reside, no obstante, en la presentación de fotografías, que tienen un papel destacado en el diseño web contemporáneo. Es lo que permite escanear fotos y digitalizarlas como mapas de bits -o también editarlas. Además de los formatos de imagen ya citados, hay otros formatos libres y propietarios, aunque solo algunos pueden utilizarse de manera general.

Formato JPG:

El formato JPG o JPEG hace referencia, en realidad, a una norma (ISO/IEC 10918-1) publicada en 1992 que describe diversos procedimientos para comprimir imágenes. Dado que la norma no contiene disposiciones acerca de cómo se tiene que guardar una imagen, requiere la utilización de un formato adicional, siendo así como se ha establecido como estándar el JPEGFile Interchange Format (JFIF) para todos los navegadores. Otras alternativas menos empleadas son el Still Picture Interchange File Format (SPIFF) y el formato gráfico JPEG Network Graphics (JNG).

El formato de compresión JPG modifica la estructura habitual de las imágenes de píxeles de manera que cada 8 x 8 píxeles se agrupan en un bloque que en cada paso se recalcula como conjunto. En este proceso se da, por ejemplo, una conversión del espacio cromáticoRGBal esquema de colorYCbCr y el denominado filtro paso bajo, donde se filtran las frecuencias más altas para disminuir el tamaño de los archivos. En función del grado de compresión escogido, el proceso está ligado a una pérdida de calidad, debido a que no se puede mantener la totalidad de la información de la imagen. Según las estadísticas de W3Techs, alrededor de tres cuartas partes de las páginas web hacen uso del formato JPG, lo que se atribuye a la eficiencia del tamaño de los archivos asociada a la compresión.

Aplicación recomendada: almacenamiento y publicación de fotos.

Formato PNG

Otro de los formatos más implantados en la red es PNG (Portable Network Graphics), un formato de imagen universal reconocido por el World Wide Web Consortium (W3C) que apareció por primera vez en la red en 1996. Como alternativa a GIF (Graphic Interchange Format) moderna y no sujeta a ninguna patente, el formato PNG destaca por la posibilidad de comprimir imágenes sin pérdidas y de ofrecer una profundidad de color de hasta 24 bits por píxel (16,7 millones de colores) con un canal alfa de 32 bits. Al contrario de GIF, con el formato PNG no se pueden generar animaciones.

PNG soporta tanto la transparencia como la semitransparencia (gracias al canal alfa integrado), lo que se puede aplicar para todo tipo de imágenes, y por el entrelazado, que permite la composición acelerada de los archivos de imagen durante el proceso de carga. Los mecanismos de corrección del color o del brillo garantizan que los archivos de imagen en formato PNG tengan más o menos la misma apariencia en los diferentes sistemas. Para comprimir un gráfico en formato PNG se pueden utilizar herramientas como pngcrush. A causa del proceso de compresión sin pérdidas, los archivos son relativamente más grandes, de modo que el formato no resulta tan adecuado para la presentación de fotografías como lo es, por ejemplo, JPG. El formato PNG también ofrece la posibilidad de reducir el espacio cromático (de 1 a 32 bits por píxel).

Aplicación recomendada: almacenamiento y publicación de imágenes y gráficos pequeños (logotipos, iconos, barras, etc.), gráficos con transparencia, fotos sin pérdidas.

Formato GIF

El portal online CompuServe creó el Graphics Interchange Format, GIF, en 1987 como alternativa de color al por aquel entonces formato de blanco y negro X BitMap (XBM). Al contrario que otras soluciones existentes en aquella época, como PCX o MacPaint, los archivos GIF requerían un espacio de almacenamiento menor debido a la eficiente compresión LZW (compresión de datos con el algoritmo Lempel-Ziv-Welch), razón por la que el formato gozó de una gran popularidad en los comienzos de Internet. JPG y PNG han tomado la delantera como formatos de imagen y gráficos, aunque desde la versión GIF89a (1989), el formato puede agrupar varias imágenes en un único archivo, lo que lo ha convertido en el formato favorito para crear pequeñas animaciones.

Toda la información cromática de GIF se coloca en una tabla, la paleta de colores. Esta tabla contiene hasta 256 colores (8 bits), de modo que este formato de imagen no es apto para la visualización de fotografías. Cada uno de los datos puede definirse, además, como transparente, aunque, al contrario que en el formato PNG más moderno, la semitransparencia no es posible, de manera que un píxel se visualiza o no.

Aplicación recomendada: creación de animaciones, clip arts o logotipos en los que una menor profundidad de color no plantea ningún problema.

Formato TIFF

TIFF (Tagged Image File Format) es un formato gráfico que se utiliza para la transmisión de datos impresos y de imágenes de alta resolución. Fue desarrollado en 1986 por Microsoft en colaboración con Aldus, que hoy pertenece a Adobe, y ha sido optimizado para integrar la separación de color y los perfiles de color (perfiles ICC) de las imágenes escaneadas. TIFF también soporta el modelo de color CMYKy permite una profundidad de color de hasta 16 bits para cada canal de color (la profundidad total asciende a 48 bits). Desde 1992 se puede comprimir el formato sin pérdidas con la ayuda del mencionado algoritmo LZW que también se utiliza en GIF.

Gracias a sus características, TIFF se ha impuesto como un estándar común para las imágenes en el que la calidad desempeña un papel más importante que el tamaño de los archivos. Es por este motivo que es empleado por las editoriales y los medios impresos, así como también en el archivo de gráficos monocromáticos, como podría ser el caso de los dibujos técnicos. Para el almacenamiento y la presentación de información geográfica basada en retículas (mapas, vistas aéreas, etc.) se ha establecido el formato GeoTIFF, que está provisto de etiquetas adicionales.

Aplicación recomendada: transmisión de imágenes de calidad y con alta resolución para las impresiones

Formato PSD

Adobe ofrece, entre otros, el formato propietario PSD (Photoshop Document) para el almacenamiento de proyectos gráficos desarrollados con Photoshop. Este se destaca por el hecho de asegurar la información relativa a las capas, los canales o los vectores, lo que permite la posterior edición de los mismos. De esta manera se pueden editar las capas que se han añadido, duplicado, ocultado, desplazado o eliminado, así como cada uno de los elementos. En un mismo archivo PSD pueden guardarse tanto las capas como los correspondientes datos de imagen sin pérdidas. Este formato de imagen resulta especialmente práctico en el caso de los gráficos con un elevado valor de reconocimiento, como los logotipos o los banners, que tienen que adaptarse rápidamente y según se necesite a cada una de las plataformas y tamaños de pantalla.

Las imágenes en formato PSD pueden abrirse solo con Adobe Photoshop sin ningún tipo de limitaciones, por lo que el intercambio entre las aplicaciones de Windows y macOS funciona a la perfección. De este modo, este formato gráfico puede ser denominado, en cierto modo, como un formato que funciona en cualquier sistema. PSD funciona, principalmente, como formato de almacenamiento durante el proceso de edición. Para llevar a cabo la edición en Internet, el archivo correspondiente debe convertirse al formato PNG o a JPG antes de subirlo al servidor, ya que el almacenamiento sin pérdidas de los datos de imagen y de todos los niveles permite modificarlos de manera eficiente, pero también lleva aparejado un gran volumen de datos. Para convertir un gráfico PSD tan solo es necesario contar con una herramienta web como Zamzar.

Aplicación recomendada: almacenamiento temporal y reedición de gráficos más usados a menudo, patrones de diseño.

Formato BMP

BMP (Windows Bitmap) fue desarrollado para sistemas operativos Microsoft e IBM y publicado en 1990 con Windows 3.0 como formato de almacenamiento para mapas de bits con una profundidad de color de hasta 24 bits por píxel. El formato de imagen sin comprimir asigna a cada píxel un valor cromático, por lo que los archivos suelen ser muy grandes, motivo por el que el formato no es adecuado para su uso en páginas web.

Aplicación recomendada: almacenamiento de fotos/gráficos en el ámbito offline.

Formatos de imagen vectoriales: aún no tan populares en la web

Las imágenes vectoriales están especialmente indicadas para su aplicación en páginas web, ya que no necesitan tanto espacio de almacenamiento como los mapas de bits. Los formatos para ello no describen cuáles son los porcentajes de color que un píxel tiene en cada imagen, sino los objetosde los que se compone la imagen. Se engloban aquí las superficies redondas y torcidas, el texto, las líneas rectas y dobladas, etc., y su posición, sus dimensiones, sus colores y otras características. En combinación con el aspecto ya mencionado del escalado sin pérdidas, la realización de elementos web responsivos y sin barreras se convierte en un juego de niños. Además, en los archivos con formatos vectoriales se pueden hacer cambios en todo momento, aunque el nivel de complejidad aumenta considerablemente con la progresiva dificultad de los archivos de imagen. Otra ventaja frente a los mapas de bits es la posibilidad de generar animaciones con JavaScript.

Formato EPS

En colaboración con los fabricantes de software Aldus y Altsys, Adobe desarrolló y publicó en 1987 el formato de imágenes vectoriales EPS (Encapsulated PostScript). El nombre de dicho formato está relacionado con el hecho de que los archivos se guardan en el lenguaje de descripción de páginas PostScript, que posibilita la edición de páginas complejas en impresoras láser y en unidades de exposición. Para tales fines, PostScript describe los elementos de la página impresa como líneas, círculos, imágenes, etc., y ofrece información sobre su posición. EPS amplía, además, esta información sobre las imágenes con datos precisos sobre el tamaño de salida, la llamada bounding box. Opcionalmente, los archivos EPS contienen una vista previa con menor resolución que puede hacer las veces de marcador de posiciones. El formato de imagen de Adobe describe cada uno de los objetos independientemente de los dispositivos de salida posteriores, lo que permite el intercambio entre los diferentes medios de salida.

EPS se solía utilizar, sobre todo, en los medios impresos, pero fue sustituido por el formato sucesor PDF (Portable Document Format), que resulta más apto para el envío de correos electrónicos debido al tamaño inferior de los archivos. Para los proyectos web resultan igualmente aptos tanto el histórico EPS como el moderno PDF, que se utiliza más para el intercambio o presentación de documentos de texto.

Aplicación recomendada: descripción de impresiones más complejas (el formato se ha quedado obsoleto)

Formato SVG

Mientras que muchos otros formatos de imágenes vectoriales, como el formato Al (Adobe Illustrator Artwork), no resultan apropiados para el entorno web, el formato SVG (Scalable Vector Graphics), recomendado por W3C, confirma las impresionantes ventajas de los archivos de imagen vectoriales. La especificación para la descripción de imágenes vectoriales bidimensionales, que se basa en el lenguaje XML, se convierte en una seria alternativa a los gráficos rasterizados tradicionales desde que muchos navegadores soportan HTML5, sobre todo en el caso de las páginas web móviles y responsivas. En este sentido, los archivos SVG ofrecen, además de una escalabilidad sin pérdidas y de un volumen de datos a menudo muy bajo, estas ventajas:

• Todos los atributos de las presentaciones, como colores, tipos de letra, etc., se pueden manipular con CSS.
• Los scripts pueden acceder al contenido por medio de la interfaz DOM (Document Object Model).
• Las máquinas pueden leer los gráficos SVG.
• El código correspondiente puede marcarse y adaptarse como archivo aparte o directamente en el documento HTML.
• Se pueden animar de diferentes formas (SMIL, JavaScript, CSS).

El formato SVG supone una elección excelente, sobre todo para los gráficos que contienen símbolos (p. ej., logotipos) o que deben reaccionar a las peticiones de los usuarios (diagramas dinámicos) de la página web. Este formato de imagen vectorial también resulta ideal en el caso de los gráficos técnicos. La estadística de W3Techs mencionada anteriormente muestra que SVG no se utiliza en la mayoría de los proyectos web, al contrario que los gráficos rasterizados. Para obtener información pormenorizada sobre cómo se lleva a cabo la integración de imágenes vectoriales SVG, visita nuestra guía.

Aplicación recomendada: gráficos técnicos o interactivos (logotipos, botones, iconos, etc.)

Los cuatro formatos gráficos más populares: tabla comparativa 

	JPG	PNG	GIF	SVG
Esquemas de color	RGB, escala de grises, CMYK	RGB, escala de grises, colores indexados	Colores indexados	RGB, nombres de color de SVG
Número de colores	Hasta 16,7 mill.	Hasta 18 trillones	Hasta 256	Hasta 16,7 mill.
Canales de color	Tres	Tres (más un canal alfa)	Uno	Tres (más un canal alfa)
Profundidad de bits	8 bits por canal	1–16 bits por canal	1–8 bits	8 bits por canal
Compresión	Alta, con pérdidas	Alta, sin pérdidas	Escasa	Ninguna
Tamaño de los archivos	Muy pequeño	Pequeño	Grande	Individual
Animaciones	No	No	Sí	Sí
Adecuado para	Fotos	Imágenes y gráficos de pequeña envergadura (p. ej., logotipos), fotos sin pérdidas	Animaciones	Todo tipo de gráficos (logotipos, iconos, diagramas, etc.)