Formatos de imagen: JPG, PNG, GIF, WEBP, JPEG, etc.

Si eres una persona habituada al uso de internet sabrás que existen diferentes formatos de imagen, ¿pero sabes las diferencias entre cada uno de ellos?

En este artículo te voy a mostrar la mayoría de formatos de imágenes existentes y cuándo es más adecuado emplear cada uno, además de las ventajas que utilizar uno u otro puede suponer a la hora de trabajar con imágenes en el ámbito web.

¿Comenzamos?

¿Qué son los formatos de archivo de imagen?

Los formatos de una imagen contienen la información en la que se detalla como se almacenan los datos relacionados con los gráficos en cuestión.

Existen multitud de formatos de imágenes que, básicamente, se pueden dividir en dos grandes grupos: imágenes rasterizadas o de mapa de bits e imágenes vectoriales.

En ambos tipos profundizaremos más adelante. Además, te mostraré cada uno de los formatos que los componen para que comprendas en profundidad las diferencias que guardan.

¿Por qué es importante conocer qué formato de imagen utilizar en cada ocasión?

Coincidirás conmigo si te digo que es fundamental que conozcas qué tipo de imagen utilizar en cada situación. Por ejemplo, los usuarios promedio suelen emplear más los archivos con extensión .jpg o .png, mientras que los profesionales del diseño gráfico utilizan más a menudo los .svg o .tiff.

Los aspectos que debes contemplar al elegir el tipo de imagen más adecuado para tus necesidades son:

• Apariencia: Es evidente que, al hablar de imágenes, la calidad de estas es fundamental. Debe ser lo suficientemente nítida para que se visualice la imagen correctamente en el emplazamiento en el que se está utilizando.


• Rendimiento: Debes hacerte la siguiente pregunta: ¿cuánto espacio ocupa la imagen y cuánto debe hacerlo? Debes crear una relación que sea lo más adecuada posible para la situación a la que tienes que hacer frente, ya que utilizar una imagen demasiado grande en un lugar en el que es innecesario supondrá que tu alojamiento web se llene antes y, por lo tanto, que tu web experimente problemas de optimización.


• Adaptabilidad: Ciertos formatos de imagen no sufren alteraciones en su calidad al aumentar o disminuir su tamaño. Otros sí que pueden llegar a pixelarse, resultando en una pérdida de calidad relevante de cara a los usuarios.


• Compresión de la imagen: Esto afecta a la capacidad que tiene un tipo de archivo de imagen para comprimirse y reducir el espacio de almacenamiento que ocupa en función de la calidad que pierde o no al realizarse el proceso de compresión.


• Resolución de la imagen: Cómo de nítida es la imagen, hasta qué tamaño puede mantener esa nitidez, etc.

Formatos de imágenes rasterizados o mapas de bits

El primer grupo que te voy a mostrar es el formado por las llamadas imágenes ráster o de mapa de bits. Están formadas por multitud de píxeles que contienen un color que, al juntarse, conforman una imagen para que el usuario la pueda percibir como tal.

Son los formatos más utilizados en el ámbito web, aunque debes saber que este tipo de imágenes pueden perder calidad al ampliarse. Al estar formadas por píxeles es posible que, al hacer zoom, puedas verlos y que la imagen se muestre borrosa. A este fenómeno se le conoce cotidianamente como "ver una imagen pixelada", expresión que estoy seguro que habrás escuchado en multitud de ocasiones.

Vamos a ver los principales formatos de imagen rasterizados o de mapas de bits.

JPG o JPEG (Joint Photographic Experts Group)

Creado en 1992, JPG o JPEG (siglas de Joint Photograpich Experts Group) es un formato de imagen ráster que utiliza el método de compresión con pérdida, es decir, que elimina datos de la imagen para minimizar el espacio que esta ocupa.

Es uno de los formatos de imagen más conocidos y utilizados en el mundo web, ya que ofrece unas grandes prestaciones si comparamos la calidad ofertada en función del tamaño que puede llegar a tener un archivo de imagen de este tipo.

Como curiosidad, JPG y JPEG hacen referencia al mismo tipo de archivo de imagen, que en un primer momento se llamo JPEG pero evolucionó a JPG por necesidades de las antiguas versiones del sistema operativo Windows. A día de hoy, se pueden utilizar ambos conceptos indiferentemente.

Si quieres conocer más a fondo este formato de imagen, en nuestro blog podrás encontrar un artículo llamado "JPG vs JPEG: Diferencias, ventajas y desventajas", en el que hago un análisis completo sobre sus prestaciones, historia, usos, etc.

JPEG 2000

JPEG 2000 surgió con la intención de mejorar el JPEG original, enfocado fundamentalmente en la compresión sin pérdida, a pesar de ofrecer también la compresión con pérdida.

A pesar de que objetivamente es un formato más efectivo y optimizado que su predecesor, nunca ha gozado de gran popularidad en el mundo web, ya que muchos navegadores de los más utilizados como Google Chrome o Firefox no lo admiten. Por este motivo, precisamente, su uso ha quedado relegado fundamentalmente al mundo de la fotografía profesional.

PNG (Portable Network Graphics)

El archivo de imagen PNG, o Portable Network Graphics, es uno de los más utilizados y conocidos en el mundo del tratamiento de imágenes en internet.

A pesar de seguir siendo un formato de imagen ráster, la gran diferencia en comparación a JPG (que podría ser su gran "competidor", por así decirlo) es que este admite la compresión sin pérdidas, es decir, en el momento de almacenar una imagen en este formato, solo se eliminarán los datos considerados como innecesarios e irrelevantes, ofreciendo en un entorno en el que se den las mismas condiciones, un nivel de calidad mayor que una imagen en JPG/JPEG a costa de ocupar más espacio.

Fue creado por PNG Development Group en el año 1996 y gozó desde sus inicios de una gran popularidad entre los usuarios, debido a que una imagen en este formato puede incluir hasta 16 millones de colores y es idóneo para iconos y logotipos. Además, es compatible con todos los navegadores utilizados a día de hoy, por lo que es un tipo de imagen muy versátil y que podemos ver en la gran mayoría de páginas web existentes.

GIF

El Graphics Interchange Format o GIF fue creado en 1987 por el portal online CompuServe, con la intención de crear gráficos a color en contraposición al formato de blanco y negro X BitMap (XBM), obsoleto a día de hoy.

Contrariamente a los formatos utilizados en aquella época, los archivos GIF utilizaban menor espacio de alojamiento en los servidores, debido a la compresión LZW (esta se llamó así al utilizar el algoritmo Lempel-Ziv-Welch), lo que llevó a este formato a ser muy popular en los inicios del internet que conocemos a día de hoy.

A pesar de que otros formatos de archivo de imagen se han popularizado en mayor medida (JPG o PNG fundamentalmente), desde la versión GIF89a, creada en el año 1989, el formato GIF puede agrupar varias imágenes en un solo archivo y llevar a cabo una secuencia con estas, convirtiéndolo en el formato de archivo más utilizado para crear pequeñas animaciones. De hecho, estoy seguro de que muchos usuarios (entre los que me incluyo) solo conocíamos esta forma de emplear los archivos de imagen GIF.

Por último, es importante que sepas que este formato a día de hoy no es recomendable para la visualización de fotografías, ya que a diferencia del formato PNG no existe la semitransparencia en los píxeles.

¿Qué significa esto?

Pues que en los archivos con formato de imagen GIF solo puedes hacer que un píxel se muestre o no, eliminando así la posibilidad de jugar con los grados de transparencia de estos. Esto hace que una imagen ofrezca una mayor variedad de colores y realismo al ser percibida por el ojo humano.

RAW

La palabra "raw" si la traducimos al castellano significa "crudo" y creo que el término define bastante bien en qué consiste este formato de imagen.

Los archivos con formato RAW hacen referencia a los datos de imagen que no han experimentado ningún proceso de compresión ni procesamiento. Este tipo de archivos son a los que los fotógrafos profesionales se refieren como brutos, es decir, recién capturados mediante diferentes dispositivos.

Debido a las características de este formato, no te extrañará si te digo que no se utiliza en el ámbito web, ya que en ningún caso se puede utilizar una imagen en bruto en una página, fundamentalmente por sus características de tamaño y peso.

BMP

El formato BMP o mapa de bits fue creado para sistemas operativos Microsoft e IBM en 1990.

Fue muy utilizado durante la década de su lanzamiento, ya que puede almacenar mapas de bits con una profundidad de color de 24 bits por píxel, lo que fue una revolución en su momento.

A día de hoy, podemos decir que es un formato obsoleto que ha evolucionado en otros como JPG o PNG, fundamentalmente porque este no realiza ningún proceso de compresión generando unos archivos muy grandes tanto en dimensiones como en peso.

TIFF

El formato de archivo de imagen TIFF o Tagged Image File Format se emplea fundamentalmente en la transmisión de archivos impresos e imágenes de alta resolución.

Es un formato muy específico, ya que como te comentaba antes se utiliza en casos muy concretos, y por lo tanto poco popular. A pesar de esto, se ha convertido en el estándar para las situaciones en las que la calidad del archivo prima por encima del tamaño del mismo.

En los principales casos en los que se utiliza por norma el formato TIFF son en las publicaciones de editoriales y en los documentos de dibujo técnico (planos de edificios, mapas, etc.), por lo que puedes presuponer que es un formato muy poco (o nada) utilizado en páginas web.

PSD

De ahora en adelante, verás que existen varios formatos de imagen que han sido creado por Adobe. Supongo que este hecho no te extrañará, ya que esta empresa es la propietaria de una de las suites más completa para trabajar con imágenes, vídeos, documentos, etc.

El formato PSD o PhotoShop Document es el formato de archivo de imagen nativo creado por Adobe para su herramienta PhotoShop.

En este formato se guardan los diferentes archivos con todas sus capas, vectores, recursos, etc., para su posterior edición con PhotoShop. Además, es importante señalar que todo lo almacenado en este formato se realiza sin pérdida, para asegurar la mayor calidad al editar los diferentes documentos con esta herramienta tan reconocida dentro del sector del diseño gráfico.

Es un formato que funciona en cualquier sistema, ya que al estar específicamente creado para una herramienta se puede abrir desde la misma independientemente del sistema operativo que utilice el dispositivo en el que se encuentre instalada.

Por último es importante mencionar, que para trabajar con las imágenes creadas en PhotoShop, debes exportarlas en otros formatos más amigables y utilizados, sobre todo para el mundo web, cuyos principales exponentes (como ya sabes a estas alturas) son JPG o PNG.

Formatos de imagen vectoriales

Las imágenes en formato vectorial (en inglés, scalable vector graphics) están formadas por vectores infinitamente escalables, es decir, las imágenes de este tipo se conforman por diferentes puntos, líneas y curvas las cuáles transmiten las propiedades de forma, color del trazo, grosor, etc. para conformar imágenes.

El hecho de que sean infinitamente escalables es lo que hace que los gráficos vectoriales se estén volviendo tan populares a día de hoy, ya que puedes ampliarlos y reducirlos sin restricciones para adaptarlos a cada caso, precisamente por esto son ideales para crear logotipos, iconos y todo tipo de elementos visuales de los que se espera gran flexibilidad en su uso.

Los principales formatos de gráficos vectoriales existentes a día de hoy son los siguientes.

SVG

Los SVG (Gráficos Vectoriales Escalables) son el tipo de gráficos vectoriales más utilizados a día de hoy. Tanto es así, que se han llegado a convertir en el tercer formato de imagen más utilizado en páginas web, por detrás de JPG (JPEG) y PNG.

Están basados en XML y especialmente optimizados para crear gráficos en 2D. Sus principales características son:

• Todos los atributos y características de estos vectores se pueden variar mediante CSS. Este hecho es fundamental al trabajar con este formato de archivos de imagen en web.


• Desde cualquier dispositivo y navegador se puede trabajar con gráficos de formato SVG, debido a que todos son compatibles con HTML5.


• Las variaciones realizadas en el código del archivo se pueden marcar en un archivo aparte o directamente en él.


• Es posible crear ciertas animaciones combinando archivos SVG con ciertos lenguajes de programación, como JavaScript, e incluso a través de CSS.

Como ves, los SVG ofrecen una gran versatilidad al trabajar con gráficos en el ámbito web. Además, también es importante que sepas que este tipo de archivos de imagen ofrecen todas las prestaciones anteriores a cambio de un mínimo espacio de almacenamiento, por lo que supongo que no te extrañará la popularidad de la que gozan a día de hoy.

EPS

EPS o Encapsulated PostScript es uno de los formatos creados por la empresa Adobe (1987) aunque en este caso en colaboración con Aldus y Altsys.

Técnicamente, las imágenes en este formato no son gráficos vectoriales puros, ya que pueden contener imágenes vectoriales y rasterizadas (incluso en el mismo archivo). De todos modos, he decidido incluirlos dentro de este apartado porque los EPS están pensados para manejar gráficos vectoriales sobre todo para impresión, fundamentalmente, por su capacidad para realizar una rasterización sobre la marcha, es decir, los archivos de este tipo pueden transformar líneas, polígonos, trazos, etc. en píxeles a lo largo de los diferentes procesos de trabajo realizados.

A pesar de que este formato fue muy utilizado y popular desde su lanzamiento, pero fue perdiendo importancia tras el lanzamiento del formato PDF, que lo fue desplazando al trabajar con gráficos para impresión. Básicamente, por el ahorro de peso que suponía este último formato también creado por Adobe.

AI

Otro de los formatos desarrollados por la empresa Adobe. La extensión de formato .ai se creó para el uso en Adobe Illustrator, que es el programa de edición vectorial más utilizado en la actualidad y ha sustituido al formato EPS, a pesar de ser mucho más específico.

La principal característica que ofrece es que sus imágenes por norma general incluyen una versión PDF de la misma que, aunque no permita la edición vectorial, sí que facilita que los archivos puedan ser visualizados por otras herramientas y ser impresos, convirtiéndose así en un formato mucho más universal que lo que puede parecer de primeras.

Por esto, fundamentalmente, este tipo de imágenes se ha ganado ser el tipo de imagen vectorial nativo más utilizado por los profesionales del diseño gráfico.

Otros formatos de imagen

Existen muchos otros formatos de imagen que se hace difícil encuadrar en uno de los tipos anteriores, ya sea porque se pueden emplear para trabajar tanto con imágenes vectoriales como con imágenes rasterizadas o porque son formatos mucho más orientados al uso web y eso hace que tengan ciertas peculiaridades.

Por eso, he creado este último apartado en el que haré una mezcla de diferentes formatos de imagen que (aunque algunos no son tan populares o no se suelen utilizar comúnmente) creo que es importante que conozcas y sepas en qué momento puedes utilizarlos.

PDF

Sé lo que estás pensando, PDF no es un formato de imágenes, solo se utiliza para documentos. Es normal que lo pienses porque su uso generalmente se reserva para textos, aunque te aseguro que tiene un gran potencial como formato de archivo de imagen. Además, es otro formato creado por la empresa Adobe.

PDF significa Portable Document Format y fue lanzado al mercado en 1993. Surgió a raíz de la necesidad de crear un tipo de archivo universal que pudiese ejecutarse independientemente del software que se hubiese utilizado para su creación.

Este formato es muy versátil porque puedes almacenar prácticamente cualquier tipo de archivo existente, desde documentos de texto, imágenes rasterizadas, imágenes vectoriales, etc.

Formato de imagen WebP

Este fue creado por Google en el año 2010 con la idea de reemplazar los formatos de imagen web más utilizados, es decir, JPG y PNG.

Trabaja mediante la compresión con pérdida, produciendo imágenes menos pesadas que las JPEG, pero optimizando la calidad de las mismas.

A día de hoy, la mayoría de navegadores ya son compatibles con WebP y es un formato con mucho potencial. Sin embargo, de momento no se puede afirmar que tenga demasiada popularidad entre los propietarios y gestores de páginas web.

Formato de imagen AVIF

Fue desarrollado por una organización sin ánimo de lucro llamada Alliance for Open Media en el año 2019.

AVIF admite tanto la compresión sin pérdidas como con pérdidas y funciona en muchos de los navegadores que se utilizan comúnmente, como Chrome, Firefox y Opera, aunque otros como Safari y Edge aún no lo soportan.

Este tipo de archivos ha demostrado ser más eficiente que otros como JPG en términos de peso y calidad, ya que al admitir ambos tipos de compresión, estos pueden llegar a estar más optimizados para su uso.

Formato de imagen HEIC/HEIF

Este formato de imagen fue creado por Apple en el año 2017 e introducido con el sistema operativo iOS 11, ideado para sustituir en los dispositivos de esta marca a los formatos clásicos, mejorando la compresión para conservar la calidad de la imagen intacta.

El formato HEIC o HEIF (se utilizan ambos de manera indiferente) viene por defecto en los dispositivos de la marca de la manzana y tiene algunas ventajas con respecto a otros formatos más conocidos:

• Las imágenes en este formato ocupan mucho menos espacio de almacenamiento en comparación a otros formatos.


• Permite guardar archivos de imagen con fondos transparentes.


• Permite almacenar archivos GIF.


• No pierde calidad en las transferencias entre dispositivos.


• El soporte de color llega a los 16 bits, doblando los 8 que ofrecen los archivos JPEG.

Aunque después de leer lo anterior parece que este tipo de archivos de imágenes es mucho mejor que los formatos tradicionales, como PNG o JPG, tiene un gran inconveniente derivado fundamentalmente de la compatibilidad de estos con otros sistemas operativos como Android o Windows. Además, aunque es relativamente sencillo transformar imágenes .heic en .jpeg o .png, no se puede garantizar que no sufran pérdidas de calidad durante el proceso.

Ya sabes cuál es el formato de imagen más adecuado para cada situación

Si has llegado hasta aquí, estoy seguro de que nunca más vas a tener dudas en cuanto al formato de imagen que debes utilizar en cada situación.

Como has ido viendo, existen multitud de formatos, algunos más conocidos y otros menos, aunque todos atienden a alguna necesidad de manera más o menos concreta.

También habrás apreciado que continuamente se están creando formatos nuevos o algunos de los existentes evolucionan para solucionar problemas que van surgiendo a raíz del desarrollo de nuevas tecnologías, herramientas o softwares.

Y tú, ¿cuántos de estos formatos conocías?, ¿cuáles has utilizado en tus proyectos? Te leo en comentarios ✌