GIF vs PNG vs JPG vs SVG ¿Qué FORMATO de IMAGEN?

Aunque la mayoría de los navegadores no tienen problemas para mostrar ninguno de estos tipos archivos de imagen, algunos son más adecuados para ciertos usos que otros. Por ejemplo, mientras que los archivos .JPG son los más utilizados para mostrar imágenes fotorrealistas que se vena perfectos manteniendo un peso total del archivo los más bajo posible, los archivos GIF son un formato ampliamente compatible (y recomendable) con imágenes animadas y los archivos PNG tienen la capacidad de mantener la calidad completa en casi todos los casos.

Los archivos SVG, los más nuevos en este juego, permiten utilizar vectores en lugar de imágenes, para que las imágenes de tu sitio web no pierdan calidad en pantallas más grandes (o más pequeñas), evitando el típico (y horrible) pixelado. ¿Cuál es la idea detrás de esto? ¡Muy fácil! Piénsalo, cada vez demandamos más calidad HD en nuestras pantallas (ya sea laptop, smartphone, tablet, etc..), por lo que se necesita un formato ad-hoc a las nuevas tecnologías.

Por ello, quiero que eches un vistazo a esta guía que he preparado. Si te soy sincero, yo no ningún gurú del diseño, pero tras muchos años diseñando sitios web propios y para mis clientes, he adquirido una experiencia muy extensa en este tema (tristemente olvidado por muchos diseñadores web), que va de la mano del SEO y del WPO (las imágenes también posicionan y hacen que un sitio web sea más lento). Por lo tanto, te voy a desglosar cada uno de los formatos y te voy a mostrar sus puntos fuertes y débiles.

Antes de meterte de lleno en la comparativa entre los distintos formatos de imagen .PNG, .JPG, .GIF y .SVG, te sugiero que tengas algunos puntos claros. Para empezar, la diferencia entre Lossy (con pérdida) y Lossless (sin pérdida), unos términos que vas a leer mucho durante la guía y que no quiero que te bloqueen.

Es posible que hayas oído en más de una ocasión el término «modo de color» o directamente hayas escuchado modo RGB, modo CMYK o incluso modo LAB. ¿Es así?, ¿te suena, aunque sólo sea un poco?, ¿o es como si te estuviese hablando en chino? No te preocupes, porque no es algo vital, pero nunca está de más aprender términos nuevos. Por ello, es importante que conozcas la diferencia entre colores indexados y directos:

Los formatos de imagen .JPEG y .JPG son exactamente lo mismo, por lo que puedes referirte a ellas como prefieras (ambas son variaciones aceptadas del mismo acrónimo). A diferencia del .GIF, JPEG es un formato de 16 bits, lo que significa que puede combinar los colores rojo, azul y verde para mostrar millones de colores. Esto hace que JPG sea muy «amigable» con casi cualquier imagen. Esto se debe, en parte, a que es un formato estándar y muy extendido usado por la mayoría de las cámaras digitales del mercado.

Además, el formato de imagen .JPEG ofrece mucha flexibilidad a la hora de elegir la compresión de las imágenes (desde 0% (compresión pesada) a 100% (sin compresión). Por lo general, un ajuste de compresión del 60% al 75% reducirá considerablemente el archivo mientras mantiene una calidad de imagen decente en la mayoría de pantallas.

Mientras JPEG es muy adecuado para comprimir y renderizar la fotografía, es un tipo de compresión con pérdidas (lossy), lo que significa que es menos útil para ediciones en curso de las imágenes. Exportar un archivo JPEG da lugar a una pérdida de calidad, y estas pérdidas empeoran con sucesivas exportaciones (como cuando haces una fotocopia de una fotocopia). Esta es la razón por la cual los fotógrafos profesionales suelen usar formatos sin pérdidas como RAW. Utiliza este formato para:

A menos que seas muy principiante en Internet, el mundo del diseño web y los distintos formatos de imagen, es muy probable que ya estés familiarizado con uno de los formatos de imagen más extendidos y usados: GIF (o Graphics Interchange Format). El formato .GIF es un tipo de mapa de bits pero, a diferencia de JPEG o PNG, los archivos GIF están limitados a una paleta máxima de 256 colores.

Esencialmente, cada imagen GIF contiene un determinado número de colores preestablecidos y no da la posibilidad de mezclarlos para crear nuevos colores (como si ocurre en otros formatos). Aunque 256 puede sonar como un número alto de colores con los que trabajar, algunas fotografías (más complejas) pueden llegar a tener varios miles de tonos de color.

De hecho, esta gama de colores se pierde durante el proceso de conversión a .GIF (esta es una de las razones más importantes para no utilizar GIF para fotos en color). Mientras que GIF es una mala opción para imágenes con amplia variación de color, ese límite de 256 colores puede ayudar a mantener a raya el tamaño total de las imágenes, que es ideal incluso para la conexión más lenta de Internet. Durante muchos años, los archivos .GIF proporcionaron la única opción para guardar imágenes con transparencia en Internet (aunque PNG y SVG también lo ofrecen). Utiliza este formato para:

Un formato de archivo más nuevo que GIF y JPEG, el PNG (Portable Network Graphics) es como un matrimonio entre el formato GIF y JPEG gracias a sus dos variantes. PNG (o Portable Network Graphics) es un formato de imagen mucho más reciente que .GIF y .JPEG. Es imprescindible es diseño web, teniendo mucho éxito entre los desarrolladores de todo el mundo, gracias a su posibilidad de optimización sin pérdidas y la posibilidad de añadir transparencias. Este formato es como un matrimonio entre GIF y JPEG, gracias a sus dos variantes:

Es, sin lugar a dudas, uno de mis formatos de imagen favoritos, ya que te ofrece la posibilidad de variar y optimizar las imágenes una y otra vez sin perder calidad. Utiliza este formato para:

A diferencia de los tres formatos de imagen mencionados anteriormente, SVG (o Scalable Vector Graphics) no es un formato de mapa de bits puro. En cambio, es un formato vectorial (un primo cercano al formato de AI de Adobe Illustrator y EPS) que se está convirtiendo en una opción atractiva para todos los diseñadores y desarrolladores de página web y UI (user interface o interfaz de usuario).

Un SVG (Scalable Vector Graphics) es un formato de imagen vectorial basado en XML para gráficos bidimensionales con soporte para interactividad y animación. La especificación SVG es un estándar abierto desarrollado por el World Wide Web Consortium (W3C) desde 1999.

A veces es útil pensar en el formato SVG como el «HTML para ilustraciones» y necesitas aplicarlo de manera muy diferente a otros formatos de imagen que he citado más arriba. Este formato de imagen es el más adecuado, por ejemplo, para mostrar logos, iconos, mapas, banderas y otros gráficos creados en aplicaciones de gráficos vectoriales como Illustrator, Sketch e Inkscape.

Desarrollado con un marcado basado en XML, los archivos SVG pueden ser editados en cualquier editor de texto y modificado por JavaScript o CSS. Como los vectores pueden ser escalados a cualquier tamaño mientras conservan la calidad de imagen nítida, son ideales para el diseño responsive. Aunque SVG es un formato vectorial en su núcleo, es posible (incluso común) incrustar gráficos de mapa de bits dentro de archivos SVG (por ejemplo JPEG).

Esto se puede hacer enlazándolo a una imagen a través de una URL (como lo haces con tus imágenes JPG en tu sitio web) o encapsulando el pixel de la imagen como un esquema URI de datos. Esto brinda al SVG mucha flexibilidad y posibilidades. Los servicios online como WordPress, Flickr, Medio, Tumblr y Facebook convertirán (forzosamente) cualquier archivo SVG a otro formato o, más probablemente, bloqueen directamente su subida. Estos son los usos más habituales de las imágenes SVG:

Ahora que ya conoces las diferencias entre los formatos de imagen más populares es hora de hacer un análisis más profundo con pruebas reales. Voy a mostrarte, con fotos y gráficos, cómo los formatos GIF, JPG, PNG y SVG se manejan con colores simples, complejos e imágenes de fotografía a color. La idea es que veas la diferencia del resultado en cada uno de ellos y la diferencia en el tamaño final del archivo.

El primer tipo de imagen que voy a analizar son los gráficos de color plano (flat color). Este tipo de imagen cubre la mayoría de los logotipos, iconos, mapas simples, gráficos y diagramas. La imagen original sobre la que he trabajado es un PNG de 23,4 KB con una dimensión de 1280 x 1280. A continuación podrás ver la diferencia en el tamaño de compresión, así como en la calidad de la imagen.

GIF: 17.6 KB

JPEG 100% (sin compresión): 14 KB

JPEG 75%: 13 KB

PNG-8: 11 KB

PNG-24: 19 KB

SVG: 6 KB (como un gráfico vectorial)

En este análisis se extrae que no hay mucha pérdida de calidad cuando se comparan los diferentes formatos, aunque se notarán pequeños detalles cerca de los bordes de los archivos JPEG comprimidos. Esto no siempre es lo normal con los gráficos de color plano pero, en la mayoría de los casos, deberías elegir la imagen menos pesada.

En este caso la imagen original es una imagen JPEG de 328 KB con una dimensión de 1280 x 960. A continuación podrás ver la diferencia en el tamaño de compresión, así como en la calidad de la imagen. Como no disponía de un acceso a una versión vectorial de este archivo, cualquier versión SVG de esta imagen sería sólo un JPEG incrustado dentro de un SVG (esto hace que sea un poco redundante, por lo que no voy a analizar el formato SVG en este caso).

GIF: 416 KB

JPEG 100% (sin compresión): 164 KB

JPEG 75%: 155 KB

PNG-8: 308 KB

PNG-24: 814 MB

Las imágenes que tienen colores complejos tienden a verse mejor cuando se utiliza un formato JPEG, PNG-24 o SVG. Los colores se conservan (en su mayor parte) y no tienen bandas feas y el ruido que sueles obtener con formatos GIF y PNG-8.

En este caso la imagen original es una imagen JPEG de 215 KB con una dimensión de 1280 x 701. A continuación podrás ver la diferencia en el tamaño de compresión, así como en la calidad de la imagen. Una vez más, hay poco que hacer con el formato SVG (no tiene sentido), por lo que voy a obviar.

GIF: 453 KB

JPEG 100% (sin compresión): 91 KB

JPEG 75% : 83 KB

PNG-8: 362 KB

PNG-24: 1 MB

Al igual que con las imágenes de colores complejos, es mejor guardar este tipo de fotografías en los formatos JPEG, PNG-24 o SVG. El color se conserva en todos los formatos, aparte de las bandas y el ruido que se destacan en las sombras del cabello, la piel y el fondo, así como en la parte superior de la foto de los formatos GIF y PNG-8.

Ya tienes claro qué formato de imagen utilizar, pero ¿sabes cómo reducir el peso de las imágenes de tu sitio web? Para conseguir una velocidad de carga web óptima (y para hacer un test de la misma), uno de los factores de posicionamiento más importantes para Google, y una experiencia de usuario rápida, es crucial ponerse muy serios con el control de los tamaños y los pesos de las imágenes que muestras en tu sitio web. Dicha optimización o compresión tiene varios matices que es mejor conocer.

Como te comentaba al inicio de esta guía, lo primero que «choca» en este tema es que hay existen diferentes tipos de archivos de imágenes que cumplen el mismo objetivo: mostrar una foto o imagen. Pero nada más lejos de la realidad, ya que cada uno cumple un cometido (mejor o peor) y es imprescindible saber cuál es el adecuado para tus necesidades y las de tu sitio web. Los archivos JPG (o JPEG), PNG y GIF suelen ser los más habituales en diseño web y los que encontrarás más a menudo, aunque existen más, como el SVG, y cada uno tiene sus fortalezas y debilidades.

Trate de lo que se trate, para optimizar las imágenes debes conocer los diferentes formatos (esto ya lo sabes), consejos y una selección de herramientas para optimizar imágenes gratis, premium, online y de escritorio. Con este conocimiento podrás optimizar y comprimir las imágenes de tu sitio web, ahorrar ancho de banda y mejorar el rendimiento del sitio.

Como habrás podido comprobar hay mucho que aprender en el tema de los formatos de imagen a la hora de diseñar una pagina web, blog o tienda online. Elegir uno u otro formato puede ser la diferencia entre tener una web con un buen rendimiento web y otra lenta y con una experiencia de usuario poco óptima para tus usuarios. Es crítico que te familiarices con todos estos términos, ya seas diseñador web o no, porque las imágenes son los archivos que más pesan de un sitio web.

¿Qué te ha parecido esta guía para entender los diferentes formatos de imagen? ¿Crees que me he dejado algo? ¿Tienes alguna experiencia que quieres contar? ¿Te has quedado con alguna duda o pregunta? Entonces te pido que dejes un comentario. Da igual que sea o una duda o un simple gracias, pero me alegraré mucho de leerlo y responderlo.