domingo, 29 de noviembre de 2009

Qué formato o tipo de imagen es mejor para cada trabajo gráfico

Cuando usamos un editor de imágenes –no hace falta fijarse sólo en el Photoshop, cualquiera nos vale- vemos que nos da diferentes opciones a la hora de guardar nuestros archivos. Incluso los editores más sencillos como el Paint de Microsoft nos permitirán la elección entre varios tipos de imagen al pulsar la opción “guardar como”.


¿De dónde salen todos estos formatos?¿Cuál es mejor o nos conviene más?¿Tiene sentido usar una opción que no sea “JPEG”? En este artículo trataremos de responder estas preguntas realizando un recorrido por los principales tipos de imagen y los usos para los que fueron creados.


Mapa de bits frente a imagen vectorial.


Para empezar hay que decir que existen dos tipos de imágenes digitales –o sea, de las que visualizamos en las pantallas del ordenador-: las imágenes basadas en mapas de bits y las imágenes vectoriales. La mayoría de las imágenes digitales que encontraremos cotidianamente, entre ellas todas las fotografías, dibujos e ilustraciones que vemos en las páginas web, pertenecen al primer grupo, el basado en mapas de bits. El nombre les viene debido a que sus archivos contienen datos que establecen una distribución de puntos de color (píxeles) en una rejilla rectangular (cuyo tamaño también determinan) a la manera de un mapa. Un ordenador (con su software por defecto, sin instalar nada especial) es capaz de leer estos datos devolviendo al usuario una imagen en pantalla.


Las imágenes vectoriales están basadas en relaciones geométricas (vectores, polígonos y curvas), y los ordenadores comunes no son capaces de devolver una imagen con estos datos (con la excepción del formato SVG, del que hablaremos más tarde). Necesitaremos un software especial para poder verlas y editarlas (Adobe Illustrator, Freehand, etc…): son los conocidos como programas vectoriales. Otra opción consiste en rasterizar esa imagen con algún programa de edición gráfica como el Photoshop, pero entonces la habremos convertido en un mapa de bits, perdiendo las ventajas del formato vectorial. Estas ventajas consisten fundamentalmente en que, como sus archivos establecen relaciones entre formas geométricas, a la hora de imprimir podemos usar las medidas que queramos (incluso kilómetros si disponemos de papel suficiente). Las imágenes de mapas de bits tienen un tamaño concreto, que si ampliamos será a costa de perder resolución y calidad en la imagen. Si ampliamos demasiado se harán incluso visibles los puntos de color que la conforman, creándose el típico efecto de pixelado.


Aspecto de una imagen vectorial

Imagen diseñada con un programa vectorial, ya rasterizada a mapa de bits. 


Por contra las imágenes vectoriales no pueden contener el nivel de detalle de un mapa de bits al estar formadas por geometrías (menos calidad en degradados, sombras, texturas complejas, etc…). Así pues los usos de cada tipo serán más o menos los siguientes:

  • Mapas de bits: es el formato usado por todas las fotografías, así como los dibujos naturalistas, sombreados, etc… Las imágenes que muestran las páginas web y los programas más comunes son todas de este tipo. Se usan en cualquier trabajo gráfico, pero no puede excederse el tamaño que establezca su resolución. Si queremos una imagen de este tipo más grande, hará falta un archivo más grande en kbs., llegando incluso a cientos de megas en carteles de gran formato.
  • Imágenes vectoriales: se usan en diseño gráfico para grandes soportes (carteles publicitarios, etc…) debido a que la medida en que las vayamos a imprimir no influye en el tamaño de sus archivos (que meramente recogen relaciones de tamaño entre los objetos que contienen). También son muy útiles para el diseño de logotipos y en el dibujo técnico, pues los programas vectoriales incluyen herramientas para dibujar, trazar y editar formas geométricas de forma sencilla o incluso manual (como es el caso de los manejadores que incluyen las curvas Bézier).

Cada tipo de imagen posee a su vez diferentes formatos de archivo que han ido desarrollándose con el tiempo, cada uno con diferentes funcionalidades.


Tipos o formatos de archivo de imagen.


A la hora de guardar un archivo de imagen desde un programa editor podremos elegir entre muchos formatos, veamos a continuación los más comunes y sus usos:


JPEG

(Joint Photographic Experts Group)

Archivo de mapa de bits. Con diferencia es el más común de los formatos de imagen, y presenta la ventaja de que puede comprimirse bastante (aunque a costa de la calidad de la imagen). Puede elegirse entre muchas calidades diferentes, con archivos más grandes a mayor calidad. Es el formato que tienen la mayoría de las imágenes que encontramos en Internet (dado su pequeño tamaño), y también es un formato habitual de cara a la impresión. Sin embargo hay que tener cuidado pues cada vez que editamos y volvamos a guardar un JPEG iremos perdiendo calidad en la imagen (debido a que la iremos comprimiendo más y más). Es el formato indicado para usar en Internet (a 72 píxeles/pulgada de resolución).


jpg calidad maxima jpg calidad minima

A la izquierda, JPEG a la máxima calidad(50 kb), a la derecha a la mínima (24 kb).


TIFF

(Tagged Image File Format)

Archivo de mapa de bits. Es un formato también muy habitual, especialmente en el mundo de la impresión de calidad (carteles, periódicos, revistas, etc…). Está indicado para ello debido a que el TIFF no pierde calidad aunque editemos y volvamos a guardar la imagen, pues no realiza compresión (aunque contamos con la opción de hacerlo, pues posee un formato de compresión propio llamado LZW, que no pierde calidad). Así pues con el TIFF no estropeamos la imagen al trabajarla, pero los archivos son bastante más grandes. Además de ello, el TIFF es un formato que admite canal alfa (ya veremos lo qué es eso).


tiff normal sin comprimir tiff comprimido lzw

A la izquierda un TIFF normal (120 kb), a la derecha con compresión LZW (82 kb).


BMP

(Windows Bitmap)

Archivo de mapa de bits. Es el formato propio del programa Paint de Microsoft (viene de serie en los equipos con este sistema operativo, en inicio/todos los programas/accesorios). Sus prestaciones son similares a las del TIFF, ofrece buena calidad en las imágenes pero ocupando mucho espacio en disco (archivos grandes). Es decir, que tampoco es muy útil para internet. Es menos popular que el TIFF.


imagen en formato bmp

Imagen BMP de 450x300 px., de unos 400 kb, similar al del formato TIFF.


GIF

(Graphics Interchange Format)

Archivo de mapa de bits. Este formato es antiguo y presenta bastantes limitaciones, aunque sigue usándose para la función que se creó: Internet. Sólo soporta 256 colores, con lo que las imágenes muy ricas en color sufren mucha pérdida de calidad con este formato. Sin embargo admite animación (los famosos GIF animados). Es algo que sigue en uso debido a que la mayoría de los navegadores son capaces de mostrar las animaciones sin instalar software adicional (gran ventaja frente a otras técnicas). Además de ello admite transparencias en las imágenes (muy usado en las siluetas de objetos, que de otra forma aparecen en un recuadro blanco). Otra característica es que también usa la compresión sin pérdida LZW, igual que el TIFF, con lo que ofrece buena calidad (en imágenes con poco colorido, pues como decimos sólo admite 256 colores).


imagen en formato gif

Imagen en formato GIF de 65 kb, menos que TIFF o BMP. Sin embargo se observa la pérdida de calidad en el degradado de grises a la izquierda de la imagen.


Otra de las desventajas del GIF es que emplea un modo de color denominado indexado, que no admite las posibilidades de edición por canales (RGB o CMYK) de otros formatos de imagen.


Los archivos GIF son sin embargo muy adecuados para colocarlos en páginas web, si la imagen no tiene degradados o demasiada riqueza de color –o no nos importa perderla-. Esto es debido a que son archivos pequeños, ocupando normalmente la mitad de espacio en disco que un PNG.


PNG

(Portable Network Graphics)

Archivo de mapa de bits. El PNG surgió en buena medida para suplir las carencias del GIF, cosa que hace con nota. Es capaz de usar modos de color por canales (como el RGB), con lo que puede ser editado de forma integral. Además de ello no usa la compresión LZW, que tiene derechos de patente. Y admite también fondos transparentes. De esta forma se está convirtiendo en el formato más usado en internet para siluetas y objetos con transparencias. Tiene mucha más calidad que el GIF, que sólo soporta 256 colores, no teniendo el PNG limitación en este sentido. Se comporta en cuanto al color como un JPEG, pero a diferencia de éste no sufre pérdida de calidad en la compresión.


Esto es fundamental para las imágenes que contengan textos, que en formato PNG se leen con mucha más claridad. El texto que pongamos en un JPEG para internet se verá difuminado, sobre todo si es pequeño, debido a la pérdida de calidad en la compresión (las imágenes de las páginas web tienen una resolución muy baja –sólo 72 píxeles/pulgada- y acusan por ello más todavía la pérdida). Con el PNG solucionamos este problema. Es por tanto el formato que hay que usar en las imágenes con textos o transparencias en Internet.


La única pega del PNG radica en el tamaño de sus archivos. Aunque usan también un sistema de compresión, los archivos PNG suelen ser el doble de grandes que los GIF. No extraña debido a que contienen mucha más información (canales, colores, etc…). Habrá por tanto que elegir entre calidad y peso del archivo (PNG o GIF).


imagen en formato png

Imagen silueteada, en formato PNG. En la mayoría de navegadores el fondo será transparente, sin embargo en versiones de Internet Explorer inferiores a la 7 se verá un ligero color de fondo. Es un fallo de este navegador que el webmaster del sitio puede corregir de diversas formas. Pongo aquí mas información sobre ello.


TARGA (TGA)

(Truevision TGA)

Este formato se usa habitualmente en imágenes con transparencias que serán incluidas en vídeo. El formato TGA, igual que el TIFF, permite añadir un canal alfa a las imágenes, que será el que indique el grado de transparencia de los restantes canales. En el canal alfa, lo negro determinará las partes transparentes de la imagen, lo blanco las opacas, y lo gris grados de translucidez en la misma. Es un poco complicado, pero necesario para la transparencia en vídeo. Os enlazo a un sencillo tutorial en el que puede verse cómo hacer un canal alfa.


Por lo demás el TGA es un formato de imagen creado por Truevision Inc. para sus tarjetas gráficas TARGA, de las primeras en soportar millones de colores (Truecolor o color verdadero). También posee un sistema de compresión sin pérdida, con lo que ofrece buena calidad. Sin embargo como decimos se usa hoy en día sobre todo en vídeo.


RAW

Archivo de mapa de bits. Este formato también es conocido como “en bruto”, debido a que es el archivo de imagen original de la cámara fotográfica sin ningún tipo de compresión o modificación. Debido a ello tiene un tamaño enorme, con las limitaciones que esto supone. Sin embargo es el formato que contiene más información (de hecho, contiene toda la información que capturó la cámara fotográfica). Así pues es ideal para iniciar el trabajo de edición de nuestra fotografía, y conviene conservarlo. Eso sí, no todas las cámaras guardan las imágenes en formato RAW (muchas las comprimen directamente a JPEG). Si guardamos en formato RAW estaremos conservando absolutamente toda la información que contenga nuestra fotografía o imagen.


EPS

(Encapsulated PostScript)

Archivo vectorial. Este formato es usado por las imágenes que realizamos con programas como Illustrator o Freehand. Contiene información vectorial y se usa para impresión. No puede por tanto visualizarse en los equipos que no cuenten con un software específico para ello (aunque algunos archivos EPS cuentan con un pequeño TIFF de 8 bits para previsualizar su contenido). Al ser una imagen vectorial no tiene problemas de resolución y puede ser impresa a cualquier tamaño, aunque sólo contendrá geometrías (por muy complicadas que sean, nunca serán fotografías). Esto no quita que el EPS pueda contener a su vez imágenes de mapa de bits incrustadas en él, pero éstas ya no son vectoriales y por tanto su resolución será limitada. Además de ello, estos archivos pueden abrirse con editores de imagen como Photoshop, realizándose un proceso de rasterización. Al hacer esto convertimos el archivo vectorial en un mapa de bits, con una resolución concreta (que le decimos al programa en ese momento). A partir de aquí será una imagen ordinaria como cualquier fotografía.


SVG

(Scalable Vector Graphics)

Archivo vectorial. SVG es el único formato vectorial capaz de ser interpretado por los navegadores web. Ha sido creado para ello, y poco a poco se está implementando su uso en internet (cuenta con el apoyo del W3C). Navegadores como Firefox, Chrome u Opera, en sus versiones actuales, son capaces de mostrarlo (Internet Explorer precisa de un plug-in para ello). Es por tanto la actual apuesta del diseño web por la ilustración vectorial.


Una gran ventaja de la implementación de estos archivos es que nos permitirá tomar aquellos gráficos SVG que cuenten con licencia de uso libre (Creative Commons, etc…) presentes en las páginas web y usarlos en nuestros proyectos. Al ser un formato vectorial podremos reutilizarlo a cualquier tamaño (frente a las imágenes en formato mapa de bits de internet, normalmente muy pequeñas).


PSD

(PhotoShop Adobe)

Es el formato de los archivos del programa Photoshop de Adobe, y puede contener diversas capas y todo tipo de efectos. No puede visualizarse sin este programa y se usa para futuras ediciones del contenido.


(Nota: Estos formatos de imagen pueden usar diferentes modos de color. Es un tema que hemos tratado en otro artículo y que tal vez te interese también: Modos o modelos de color, qué son y usos específicos).

Artículos relacionados:

17 comentarios:

Carlos dijo...

Bueno en el tema de Jpg, habría que diferencias 3 características sobre la calidad.

- Resolución de la imagen 300 ppp, 72 ppp, 150 ppp.
- El término "calidad" que usa por ejemplo photosop: alta, media, baja

- Y la compresión que se use al guardar el archivo.

El ejemplo que tienes de la guitarra en jpg 50 Kb. y en baja 24 Kb. con una gran pérdida de calidad, es bastante erróneo. La imagen se puede pasar de 50 kb a 5 Kb. y prácticamente no notarse la pérdida de calidad.

Santi Folch dijo...

Mmmm... interesante eso que dices Carlos. Lo cierto es que desconozco como comprimir tanto un JPEG, y más sin perder calidad como dices. La foto de la guitarra en su versión JPEG la guardé desde Photoshop con dos calidades diferentes: la primera a la máxima calidad (calidad 12), la segunda a la mínima (calidad 1). El tamaño de los archivos es el doble para el primer caso respecto al segundo, tal y como señalas. En ambos casos las imágenes están a 72 ppp (resolución de las imágenes para internet).

¿De qué forma se puede reducir hasta los 5 kb?¿Conoces algún programa que comprima tanto los JPEG? Desde luego si no se pierde calidad es un bombazo.

Gracias por tu aporte y a ver si nos cuentas. Un saludo

David Orozco dijo...

hablando de perdida de calidad, me fijo que tu cabecera pesa casi un cuarto de megabite, me tomé la libertad de optimizarlo con un script que tengo en linux y ahora pesa sólo 32 Kb, verás la diferencia http://imgur.com/39u4A.jpg

Santi Folch dijo...

¡Fantástico! De hecho la he usado, gracias por la molestia David. La cabecera de antes era un PNG, de ahí que pesara tanto. Usé ese formato porque al no realizar compresión con pérdida suele ser mejor para los textos en las imágenes. Pero he mirado y remirado el JPEG que me has mandado y apenas se aprecia la diferencia. Lo único es el color del subtítulo, que no aparece ya tan brillante. El resto es practicamente igual (tienes que acercarte con la lupa para ver los efecto de la compresión).

Estos scripts para comprimir los JPEG de los que habláis son un bombazo. Con el Photoshop sólo puede reducirse la imagen hasta los 100 kb o así. ¡32 kb sin pérdida! Por favor, contad más de estas técnicas para añadirlas al artículo, o mandad algún enlace a artículos que lo expliquen que los incluyo aquí.

Un saludo!

David Orozco dijo...

Si es un script que funciona en ubuntu, pero creo que también podrá ser aplicado a cualkier sistema con base linux, el tutorial está aqui,

El script en sí las optimiza y las cambia a un tamaño menor, yo le hice una pekeña modificación para que no las cambiara de tamaño sino que sólo las optimizara

Aqui el link del script:

http://itsanimesh.com/2009/02/01/compress-pictures-in-linuxmodified/comment-page-1/#comment-148

Santi Folch dijo...

Caray eres un crack. Bueno ahí queda el link, es demasiado complicado para un artículo general como éste. De todas formas si escribes algo en español sobre el tema de la compresión de JPEG con script (o como sea), explicado facilito dame un toque para que ponga aquí un vínculo. Es una información buena.

Anónimo dijo...

Es mejor Enlazar Archivos PSD o JPG en InDesign????

Santi Folch dijo...

Hola Anónimo. Bien, yo te recomendaría enlazar JPG, sobre todo porque pesan menos que un PSD con sus capas.

Al pesar menos, también podrás incrustar las imágenes en el archivo con más facilidad. Aunque claro, si trabajas con el PSD tendrás la ventaja de poder editar el archivo con más comodidad (no hará falta que cambies el PSD, lo pases a JPG y vuelvas a ponerlo en el documento de InDesign, te ahorrarías todos los pasos).

Eso sí, trabajando con JPG te quitas problemas de compatibilidad entre versiones... en fin, la verdad es qué no sé que decirte!! :)

Cada persona tiene un método de trabajo, no se qué opinarán los demás, para mí no es mejor un formato que otro, cada uno tiene sus ventajas. Un saludo!!

Fernando Poveda García dijo...

Buen día, diseñé el logo de mi empresa en Corel Draw, lo exporté a PNG y lo empleé en Microsoft Word para escribir cartas, sin embargo, cuando voy a guardar una copia electrónica en PDF, la imagen del logotipo sale pixelada y con una calidad deficiente, quitándole estética al documento.

Agradezco pronta respuesta de los foristas a fpovedag@gmail.com o a ingeniero.fercho@gmail.com

Santi Folch dijo...

Hola Fernando, creo que puedo responder a tu pregunta.

Si cuando ponías el PNG en el Word la imagen te salía bien (es decir, no pixelada), quiere decir que el problema está en el PDF.

Verás, cuando se crea un PDF las imágenes pueden incluirse a diversas calidades, y es muy posible que lo tengas configurado para que incluya las imágenes a baja calidad (así pesan menos los PDF).

Revisa la configuración, a ver a qué calidad estás poniendo las imágenes en tus PDF. Tengo un artículo sobre eso mismo, está redactado para reducir el tamaño de los PDF, pero la información que contiene creo que te será útil.

El artículo es éste: Crear y reducir el tamaño de un PDF. En tu caso sería para ampliarlo, no para reducirlo, pero te vale.

Un saludo!!

Fer dijo...

Te felicito, exactamente lo que estaba buscando en un solo trabajo.
Gracias por tu ayuda

Anónimo dijo...

Hola, me gustaría saber si es que voy a enviar una tarjeta de navidad digital, en que formato lo debería guardar para que al enviarla por mail se vea de inmediato??
Está muy bueno tu post de todas formas! muchas gracias!

saludos

Santi Folch dijo...

Hola anónimo, para eso lo mejor es mandar un JPG. Un saludo.

Anónimo dijo...

Hola, tengo una consulta. Tengo fotografías en jpg en muy buena calidad. Tomados con una buena cámara.
Ahora bien, los exportó al corel para hacer unos trabajos, y pierden completamente la calidad.
Sabes de qué manera no ocurre esto?

Gracias,

Saludos!
Nacho

Santi Folch dijo...

Hola Nacho, revisa las opciones de importación/exportación de Corel. Muy posiblemente estará importando las imágenes en baja resolución (72ppp y muy comprimidas, con mucha pérdida de calidad). O, sencillamente, se trata de una simple previsualización en baja resolución (hace mucho que no uso Corel).

Sea como sea obviamente se puede configurar la calidad de salida de las imágenes, establece ahí 300 píxeles/pulgada y calidad máxima (sin compresión).

Anónimo dijo...

hola, tengo una pregunta, para un folleto en illustrator con varias hojas, que es mas conveniente? usar el fondo de las páginas en vectores o en jpg? para que no sea tan pesado el documento?! gracias por el consejo

Santi Folch dijo...

Hola, la respuesta es sencilla: ¡siempre mejor en vectores!

Además estás trabajando con Illustrator, que es software vectorial, aprovecha su potencia.

Con un fondo vectorial, no solo pesará menos, si no que además podrás imprimirlo a cualquier tamaño sin miedo a problemas de resolución. Por ejemplo podrías sacar la revista tanto en A4 como en A3. Los vectores no están sujetos a resolución (los típicos píxeles/pulgada o ppp, como también se les llama).

Eso sí, dicho fondo tendría que ser de verdaderos vectores, pues es habitual ver a personas que ponen una imagen normal Jpg dentro de un archivo vectorial, guardan como EPS o AI y piensan que ya es vectorial. No es así, en tal caso es símplemente un jpg incrustado en un AI o EPS. Para que dicha imagen sea de verdad vectorial hay que "vectorizarla", valga la redundancia. En Illustrator y programas similares (Corel etc) a esta acción se le suele llamar "Trazar", "Calcar", "Vectorizar" y similares.

Un saludo!!