JPG vs. PNG vs. GIF: Las diferencias entre formatos de archivo de imagen

Una rosa con cualquier otro nombre puede oler igual de dulce, como dice Shakespeare en Romeo y Julieta, pero si tomas una foto de esa rosa y la guardas como un JPEG con alta compresión, puedes experimentar una disminución en la calidad de la imagen. No hay problema, sin embargo, ya que también tienes la opción de usar PNG, TIFF, GIF, SVG, o incluso un nuevo formato como HEIC o WebP. Algunos de esos formatos se verían geniales en el boletín familiar de los Capuleto, mientras que otros encajarían mejor en el blog de Romeo, así que descifrar estos tipos de archivos puede ser bastante útil.
Pérdida vs. Sin pérdida

Cada formato de imagen puede ser categorizado como “con pérdida” o “sin pérdida”, y estos términos se explican por sí mismos. La compresión con pérdida reduce el tamaño de los archivos eliminando permanentemente información sobre un archivo, haciéndolo más pequeño pero también degradando la calidad. La compresión sin pérdida simplemente reorganiza los datos de tal manera que ocupa menos espacio pero puede ser empaquetado y desempaquetado (¡o descomprimido!) sin ningún daño al archivo.
Raster vs. Vector

Cuando piensas en “formato de imagen”, probablemente estés pensando en un raster. No tiene nada que ver con Bob Marley; simplemente significa que el archivo es esencialmente una cuadrícula de píxeles de colores que forman una imagen. JPG, PNG, GIF, TIFF y la mayoría de otros archivos de fotos son rasters. La única información que tienen es de qué color son los píxeles, así que aumentar o estirar la imagen generalmente resultará en una imagen más pixelada.
Los vectores, sin embargo, están diseñados para ser escalados indefinidamente. Los archivos SWF, EPS y PDF almacenan imágenes no como píxeles, sino como ecuaciones matemáticas que pueden ser representadas como puntos y líneas. La imagen puede hacerse tan grande o tan pequeña como necesites sin perder calidad, pero estas extensiones no son tan comunes en la Web ya que los vectores no son tan compatibles como las imágenes raster.
Grupo Conjunto de Expertos en Fotografía (JPEG) – Raster con pérdida

El archivo JPEG lleva el nombre del grupo que lo creó y domina el mundo de las imágenes web debido a su compatibilidad casi universal y su pequeño tamaño. Tu ojo probablemente no podría distinguir un JPEG ligeramente comprimido de una imagen de mayor calidad sin unos segundos de escrutinio, y se carga rápido, así que es lo suficientemente bueno para la mayor parte de la Web.
JPEG-2000 es la versión actualizada que tiene algunas mejoras sobre la original, pero nunca ha despegado realmente, así que es poco probable que veas este formato en muchos lugares.
Ideal para: poner fotos en la Web, guardar y enviar tamaños de imagen pequeños, uso general, imprimir fotos.
Gráficos de Red Portátiles (PNG) – Raster sin pérdida

Este formato se ha convertido en el favorito para gráficos web de alta calidad, especialmente si necesitas un fondo transparente. PNG fue diseñado originalmente como una alternativa a GIF, pero admite muchos más colores y es más flexible en cuanto a configuraciones de transparencia. El tamaño del archivo es generalmente más grande que el de GIF o JPEG, pero PNG preserva mejor la calidad y es más flexible.
También puedes encontrar PNG-8 y PNG-24 en algunos programas. Estos seguirán exportándose como PNG normales, pero PNG-8 solo admite 256 colores y no permite transparencia parcial, lo que te da un tamaño de archivo más pequeño que el PNG-24 más completo.
Ideal para: gráficos web, fotos de alta calidad donde el tamaño no es un problema, transparencia.
Formato de Intercambio Gráfico (GIF) – Raster sin pérdida

El predecesor de PNG, el formato GIF es ahora más famoso por habilitar los cortos bucles de video que no puedes dejar de ver en las redes sociales. El debate sobre si pronunciarlo como “ g if” o “ j if” es bastante acalorado, pero si quieres hacer enojar a ambos lados, intenta pronunciarlo como “jeff”.
Los GIF solo admiten 256 colores, lo que los convierte en una mala opción para fotos de alta calidad, pero su compresión es excelente, por lo que puede reducir el tamaño de imágenes simples sin una gran pérdida de calidad. Los píxeles también pueden hacerse transparentes, pero deben estar encendidos o apagados, no en un punto intermedio.
Ideal para: gráficos simples, animaciones, íconos.
Formato de Archivo de Imagen Etiquetado (TIFF) – Raster sin pérdida

Puede que no te hayas encontrado con un TIFF personalmente, pero si te gusta la fotografía o trabajas mucho con medios impresos, puedes reconocerlos como el formato grande, pero de alta calidad, a menudo preferido por los editores. Además, nadie discute sobre la pronunciación.
Ideal para: imprimir fotos de alta calidad, escanear imágenes de alta calidad, cualquier cosa donde el tamaño no sea un problema.
Gráficos Vectoriales Escalables (SVG) – Vector

Si alguna vez has intentado guardar una imagen de Internet y en su lugar obtuviste la opción “guardar como una página web”, es posible que hayas visto un SVG. Estos son posiblemente los gráficos vectoriales más ampliamente soportados, y su capacidad para mantener buena calidad y escalabilidad a bajos tamaños de archivo los hace populares para logotipos, gráficos de sitios y en cualquier otro lugar donde un vector sea útil.
Ideal para: gráficos empresariales, gráficos escalables, logotipos.
Nuevos formatos
Es posible que aún no hayas visto estos formatos en la naturaleza, pero ofrecen algunas ventajas sobre los estándares actuales.
Formato de Imagen de Alta Eficiencia
HEIF es esencialmente JPEG pero con mayor calidad y tamaños de archivo más pequeños. Este es ahora el formato de imagen predeterminado en iOS 11 y posteriores.

WebP
WebP es el formato de Google, y hace prácticamente todo: mejor compresión que JPEG, mejores animaciones que GIF, y transparencia comparable a PNG. Es compatible con varios navegadores y actualmente está siendo utilizado por YouTube, Facebook y algunos otros sitios si los visitas usando un navegador compatible.

¿Por qué tantos formatos?
Es poco probable que alguna vez haya un formato que los gobierne a todos, ya que diferentes campos tienen diferentes necesidades de imagen. Los navegadores de internet generales no necesitan pensar más allá de JPEG y PNG (y tal vez WebP y HEIC en el futuro), pero para aplicaciones empresariales y de publicación, tener opciones como TIFF y SVG facilita la vida.
Y, si aún no lo has hecho, deberías pensar en elegir un lado en el debate sobre GIF antes de que el formato desaparezca. Sé parte de la historia.
Créditos de imagen: Comparación entre JPEG, JPEG 2000, JPEG XR y HEIF, Google Developers, W3C.org, Es fácil Neon Animated Gif, Comparación de JPEG JFIF y 2000, Ejemplo de compresión JPEG