Los formatos de imagen más im­po­r­ta­n­tes en Internet

Desde los comienzos de Internet, las imágenes forman parte de los co­m­po­ne­n­tes 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, re­va­lo­ri­za­n­do los proyectos a la par que destacan la in­fo­r­ma­ción expuesta en los textos, hacen acla­ra­cio­nes sobre los co­n­te­ni­dos, ofrecen datos adi­cio­na­les (en el caso, por ejemplo, de las in­fo­gra­fías) o actúan como elementos que invitan a la reflexión. Mientras que su im­po­r­ta­n­cia queda patente, desde hace años existen ciertas im­pre­ci­sio­nes 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 re­s­po­n­sa­bles 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 di­s­po­si­ti­vos móviles.

Los gráficos ra­s­te­ri­za­dos se utilizan más fre­cue­n­te­me­n­te que las imágenes ve­c­to­ria­les, a pesar de sus de­s­ve­n­ta­jas 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 re­pre­se­n­ta­ción mediante píxeles reside, no obstante, en la pre­se­n­ta­ción de fo­to­gra­fías, que tienen un papel destacado en el diseño web co­n­te­m­po­rá­neo. Es lo que permite escanear fotos y di­gi­ta­li­zar­las como mapas de bits -o también editarlas. Además de los formatos de imagen ya citados, hay otros formatos libres y pro­pie­ta­rios, aunque solo algunos pueden uti­li­zar­se de manera general.

El formato JPG o JPEG hace re­fe­re­n­cia, en realidad, a una norma (ISO/IEC 10918-1) publicada en 1992 que describe diversos pro­ce­di­mie­n­tos para comprimir imágenes. Dado que la norma no contiene di­s­po­si­cio­nes acerca de cómo se tiene que guardar una imagen, requiere la uti­li­za­ción de un formato adicional, siendo así como se ha es­ta­ble­ci­do como estándar el JPEG File In­te­r­cha­n­ge Format (JFIF) para todos los na­ve­ga­do­res. Otras al­te­r­na­ti­vas menos empleadas son el Still Picture In­te­r­cha­n­ge File Format (SPIFF) y el formato gráfico JPEG Network Graphics (JNG).

El formato de co­m­pre­sión JPG modifica la es­tru­c­tu­ra 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 co­n­ve­r­sión del espacio cromático RGB al esquema de color YCbCr y el de­no­mi­na­do filtro paso bajo, donde se filtran las fre­cue­n­cias más altas para disminuir el tamaño de los archivos. En función del grado de co­m­pre­sión escogido, el proceso está ligado a una pérdida de calidad, debido a que no se puede mantener la totalidad de la in­fo­r­ma­ción de la imagen. Según las es­ta­dí­s­ti­cas de W3Techs, alrededor de tres cuartas partes de las páginas web hacen uso del formato JPG, lo que se atribuye a la efi­cie­n­cia del tamaño de los archivos asociada a la co­m­pre­sión.

Apli­ca­ción re­co­me­n­da­da: al­ma­ce­na­mie­n­to y pu­bli­ca­ción de fotos.

Otro de los formatos más im­pla­n­ta­dos en la red es PNG (Portable Network Graphics), un formato de imagen universal re­co­no­ci­do por el World Wide Web Co­n­so­r­tium (W3C) que apareció por primera vez en la red en 1996. Como al­te­r­na­ti­va a GIF (Graphic In­te­r­cha­n­ge Format) moderna y no sujeta a ninguna patente, el formato PNG destaca por la po­si­bi­li­dad de comprimir imágenes sin pérdidas y de ofrecer una pro­fu­n­di­dad 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 ani­ma­cio­nes. PNG soporta tanto la tra­n­s­pa­re­n­cia como la se­mi­tra­n­s­pa­re­n­cia (gracias al canal alfa integrado), lo que se puede aplicar para todo tipo de imágenes, y por el en­tre­la­za­do, que permite la co­m­po­si­ción acelerada de los archivos de imagen durante el proceso de carga. Los me­ca­ni­s­mos de co­rre­c­ción del color o del brillo ga­ra­n­ti­zan que los archivos de imagen en formato PNG tengan más o menos la misma apa­rie­n­cia en los di­fe­re­n­tes sistemas. Para comprimir un gráfico en formato PNG se pueden utilizar he­rra­mie­n­tas como pngcrush. A causa del proceso de co­m­pre­sión sin pérdidas, los archivos son re­la­ti­va­me­n­te más grandes, de modo que el formato no resulta tan adecuado para la pre­se­n­ta­ción de fo­to­gra­fías como lo es, por ejemplo, JPG. El formato PNG también ofrece la po­si­bi­li­dad de reducir el espacio cromático (de 1 a 32 bits por píxel). Apli­ca­ción re­co­me­n­da­da: al­ma­ce­na­mie­n­to y pu­bli­ca­ción de imágenes y gráficos pequeños (logotipos, iconos, barras, etc.), gráficos con tra­n­s­pa­re­n­cia, fotos sin pérdidas.

El portal online Co­m­pu­Se­r­ve creó el Graphics In­te­r­cha­n­ge Format, GIF, en 1987 como al­te­r­na­ti­va de color al por aquel entonces formato de blanco y negro X BitMap (XBM). Al contrario que otras so­lu­cio­nes exi­s­te­n­tes en aquella época, como PCX o MacPaint, los archivos GIF requerían un espacio de al­ma­ce­na­mie­n­to menor debido a la eficiente co­m­pre­sión LZW (co­m­pre­sión de datos con el algoritmo Lempel-Ziv-Welch), razón por la que el formato gozó de una gran po­pu­la­ri­dad 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 co­n­ve­r­ti­do en el formato favorito para crear pequeñas ani­ma­cio­nes.

Toda la in­fo­r­ma­ció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 vi­sua­li­za­ción de fo­to­gra­fías. Cada uno de los datos puede definirse, además, como tra­n­s­pa­re­n­te, aunque, al contrario que en el formato PNG más moderno, la se­mi­tra­n­s­pa­re­n­cia no es posible, de manera que un píxel se visualiza o no.

Apli­ca­ción re­co­me­n­da­da: creación de ani­ma­cio­nes, clip arts o logotipos en los que una menor pro­fu­n­di­dad de color no plantea ningún problema.

TIFF (Tagged Image File Format) es un formato gráfico que se utiliza para la tra­n­s­mi­sión de datos impresos y de imágenes de alta re­so­lu­ción. Fue de­sa­rro­lla­do en 1986 por Microsoft en co­la­bo­ra­ción con Aldus, que hoy pertenece a Adobe, y ha sido op­ti­mi­za­do para integrar la se­pa­ra­ción de color y los perfiles de color (perfiles ICC) de las imágenes es­ca­nea­das. TIFF también soporta el modelo de color CMYK y permite una pro­fu­n­di­dad de color de hasta 16 bits para cada canal de color (la pro­fu­n­di­dad total asciende a 48 bits). Desde 1992 se puede comprimir el formato sin pérdidas con la ayuda del me­n­cio­na­do algoritmo LZW que también se utiliza en GIF.

Gracias a sus ca­ra­c­te­rí­s­ti­cas, 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 im­po­r­ta­n­te que el tamaño de los archivos. Es por este motivo que es empleado por las edi­to­ria­les y los medios impresos, así como también en el archivo de gráficos mo­no­cro­má­ti­cos, como podría ser el caso de los dibujos técnicos. Para el al­ma­ce­na­mie­n­to y la pre­se­n­ta­ción de in­fo­r­ma­ción geo­grá­fi­ca basada en retículas (mapas, vistas aéreas, etc.) se ha es­ta­ble­ci­do el formato GeoTIFF, que está provisto de etiquetas adi­cio­na­les.

Apli­ca­ción re­co­me­n­da­da: tra­n­s­mi­sión de imágenes de calidad y con alta re­so­lu­ción para las im­pre­sio­nes

Adobe ofrece, entre otros, el formato pro­pie­ta­rio PSD (Photoshop Document) para el al­ma­ce­na­mie­n­to de proyectos gráficos de­sa­rro­lla­dos con Photoshop. Este se destaca por el hecho de asegurar la in­fo­r­ma­ció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, de­s­pla­za­do o eliminado, así como cada uno de los elementos. En un mismo archivo PSD pueden guardarse tanto las capas como los co­rre­s­po­n­die­n­tes datos de imagen sin pérdidas. Este formato de imagen resulta es­pe­cia­l­me­n­te práctico en el caso de los gráficos con un elevado valor de re­co­no­ci­mie­n­to, como los logotipos o los banners, que tienen que adaptarse rá­pi­da­me­n­te y según se necesite a cada una de las pla­ta­fo­r­mas y tamaños de pantalla. Las imágenes en formato PSD pueden abrirse solo con Adobe Photoshop sin ningún tipo de li­mi­ta­cio­nes, por lo que el in­te­r­ca­m­bio entre las apli­ca­cio­nes de Windows y macOS funciona a la pe­r­fe­c­ción. De este modo, este formato gráfico puede ser de­no­mi­na­do, en cierto modo, como un formato que funciona en cualquier sistema. PSD funciona, pri­n­ci­pa­l­me­n­te, como formato de al­ma­ce­na­mie­n­to durante el proceso de edición. Para llevar a cabo la edición en Internet, el archivo co­rre­s­po­n­die­n­te debe co­n­ve­r­ti­r­se al formato PNG o a JPG antes de subirlo al servidor, ya que el al­ma­ce­na­mie­n­to sin pérdidas de los datos de imagen y de todos los niveles permite mo­di­fi­car­los 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 he­rra­mie­n­ta web como Zamzar. Apli­ca­ción re­co­me­n­da­da: al­ma­ce­na­mie­n­to temporal y reedición de gráficos más usados a menudo, patrones de diseño

BMP (Windows Bitmap) fue de­sa­rro­lla­do para sistemas ope­ra­ti­vos Microsoft e IBM y publicado en 1990 con Windows 3.0 como formato de al­ma­ce­na­mie­n­to para mapas de bits con una pro­fu­n­di­dad 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.

Apli­ca­ción re­co­me­n­da­da: al­ma­ce­na­mie­n­to de fotos/gráficos en el ámbito offline

Las imágenes ve­c­to­ria­les están es­pe­cia­l­me­n­te indicadas para su apli­ca­ción en páginas web, ya que no necesitan tanto espacio de al­ma­ce­na­mie­n­to como los mapas de bits. Los formatos para ello no describen cuáles son los po­r­ce­n­ta­jes de color que un píxel tiene en cada imagen, sino los objetos de los que se compone la imagen. Se engloban aquí las su­pe­r­fi­cies redondas y torcidas, el texto, las líneas rectas y dobladas, etc., y su posición, sus di­me­n­sio­nes, sus colores y otras ca­ra­c­te­rí­s­ti­cas. En co­m­bi­na­ción con el aspecto ya me­n­cio­na­do del escalado sin pérdidas, la rea­li­za­ción de elementos web re­s­po­n­si­vos y sin barreras se convierte en un juego de niños. Además, en los archivos con formatos ve­c­to­ria­les se pueden hacer cambios en todo momento, aunque el nivel de co­m­ple­ji­dad aumenta co­n­si­de­ra­ble­me­n­te con la pro­gre­si­va di­fi­cu­l­tad de los archivos de imagen. Otra ventaja frente a los mapas de bits es la po­si­bi­li­dad de generar ani­ma­cio­nes con Ja­va­S­cri­pt.

En co­la­bo­ra­ción con los fa­bri­ca­n­tes de software Aldus y Altsys, Adobe de­sa­rro­lló y publicó en 1987 el formato de imágenes ve­c­to­ria­les EPS (En­ca­p­su­la­ted Po­st­S­cri­pt). El nombre de dicho formato está re­la­cio­na­do con el hecho de que los archivos se guardan en el lenguaje de de­s­cri­p­ción de páginas Po­st­S­cri­pt, que po­si­bi­li­ta la edición de páginas complejas en im­pre­so­ras láser y en unidades de ex­po­si­ción. Para tales fines, Po­st­S­cri­pt describe los elementos de la página impresa como líneas, círculos, imágenes, etc., y ofrece in­fo­r­ma­ción sobre su posición. EPS amplía, además, esta in­fo­r­ma­ción sobre las imágenes con datos precisos sobre el tamaño de salida, la llamada bounding box. Op­cio­na­l­me­n­te, los archivos EPS contienen una vista previa con menor re­so­lu­ción que puede hacer las veces de marcador de po­si­cio­nes. El formato de imagen de Adobe describe cada uno de los objetos in­de­pe­n­die­n­te­me­n­te de los di­s­po­si­ti­vos de salida po­s­te­rio­res, lo que permite el in­te­r­ca­m­bio entre los di­fe­re­n­tes medios de salida.

EPS se solía utilizar, sobre todo, en los medios impresos, pero fue su­s­ti­tui­do por el formato sucesor PDF (Portable Document Format), que resulta más apto para el envío de correos ele­c­tró­ni­cos debido al tamaño inferior de los archivos. Para los proyectos web resultan igua­l­me­n­te aptos tanto el histórico EPS como el moderno PDF, que se utiliza más para el in­te­r­ca­m­bio o pre­se­n­ta­ción de do­cu­me­n­tos de texto.

Apli­ca­ción re­co­me­n­da­da: de­s­cri­p­ción de im­pre­sio­nes más complejas (el formato se ha quedado obsoleto)

Mientras que muchos otros formatos de imágenes ve­c­to­ria­les, como el formato Al (Adobe Illu­s­tra­tor Artwork), no resultan apro­pia­dos para el entorno web, el formato SVG (Scalable Vector Graphics), re­co­me­n­da­do por W3C, confirma las im­pre­sio­na­n­tes ventajas de los archivos de imagen ve­c­to­ria­les. La es­pe­ci­fi­ca­ción para la de­s­cri­p­ción de imágenes ve­c­to­ria­les bi­di­me­n­sio­na­les, que se basa en el lenguaje XML, se convierte en una seria al­te­r­na­ti­va a los gráficos ra­s­te­ri­za­dos tra­di­cio­na­les desde que muchos na­ve­ga­do­res soportan HTML5, sobre todo en el caso de las páginas web móviles y re­s­po­n­si­vas. En este sentido, los archivos SVG ofrecen, además de una es­ca­la­bi­li­dad sin pérdidas y de un volumen de datos a menudo muy bajo, estas ventajas:

• Todos los atributos de las pre­se­n­ta­cio­nes, 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 co­rre­s­po­n­die­n­te puede marcarse y adaptarse como archivo aparte o di­re­c­ta­me­n­te en el documento HTML.
• Se pueden animar de di­fe­re­n­tes formas (SMIL, Ja­va­S­cri­pt, 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 reac­cio­nar a las pe­ti­cio­nes 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 es­ta­dí­s­ti­ca de W3Techs me­n­cio­na­da an­te­rio­r­me­n­te muestra que SVG no se utiliza en la mayoría de los proyectos web, al contrario que los gráficos ra­s­te­ri­za­dos. Para obtener in­fo­r­ma­ción po­r­me­no­ri­za­da sobre cómo se lleva a cabo la in­te­gra­ción de imágenes ve­c­to­ria­les SVG, visita nuestra guía.

Apli­ca­ción re­co­me­n­da­da: gráficos técnicos o in­ter­ac­ti­vos (logotipos, botones, iconos, etc.)