GIF vs PNG vs JPG vs SVG ¿Qué Formato de Imagen es Mejor?

GIF vs PNG vs JPG vs SVG ¿Qué Formato de Imagen es Mejor?

 

¿JPG? ¿JPEG? ¿PNG? ¿GIF? ¿SVG? ¿Te suenan estos formatos de imagen? Estoy seguramente, si eres dueño de una pagina web, blog o web de ventas en línea, cuando descargas las imágenes en bancos de imágenes gratis y premium, te emergen muchos de inquietudes en el momento de seleccionar qué formato de imagen es preferible, cómo optimizarlas y qué herramientas existen en el mercado para facilitarte la vida.

 

Son muchas las cuestiones que te vienen a la cabeza, ¿Cuál es la distingue entre .JPG (o .JPEG) y .PNG? ¿Y entre .GIF y .JPG? ¿Y eso nuevo del .SVG? Por esto, y después de haberte explicado este tema en numerosas oportunidades en mi blog, quiero echar un nuevo vistazo a la situación de los formatos de imágenes para websites y guiarte a seleccionar el formato idóneo y que mejor se ajuste a tus pretenciones.

Lo primero que “choca” en este asunto es que hay hay diversos tipos de ficheros de imágenes que cumplen el mismo objetivo: exhibir una foto o imagen. Pero nada más lejos de la verdad, debido a que cada uno cumple un cometido (mejor o peor) y es infaltante entender cuál es el correcto para tus pretenciones y las de tu página web. Los archivos JPG (o JPEG), PNG y GIF tienden a ser los más comunes en diseño web y los que encontrarás más comunmente, aunque hay más, como el SVG, y cada uno tiene sus fortalezas y debilidades.

Existe un formato de imagen para cada específico

Aunque la mayoría de los navegadores no tienen inconvenientes para exhibir ninguno de estos tipos ficheros de imagen, algunos son más correctos para algunos usos que otros. Entre otras cosas, en tanto que los ficheros .JPG son los más usados para exhibir imágenes fotorrealistas que se vena impecables manteniendo un peso total del archivo los más bajo viable, los ficheros GIF son un formato extensamente coincidente (y recomendable) con imágenes animadas y los ficheros PNG tienen la aptitud de sostener la calidad completa en todos las situaciones.

Los ficheros SVG, los más nuevos en este juego, aceptan usar vectores en vez de imágenes, para que las imágenes de tu página web no pierdan calidad en pantallas más enormes (o más pequeñas), evadiendo el típico (y horrible) pixelado. ¿Cuál es la iniciativa detrás de esto? ¡Muy fácil! Piénsalo, cada vez demandamos más calidad HD en nuestras pantallas (ya sea laptop, teléfono inteligente, tablet, etc..), por lo cual se requiere un formato ad-hoc a las novedosas tecnologías.

Por esto, quiero que eches una mirada a esta guía que he listo. Si te soy sincero, yo no ningún gurú del diseño, pero tras varios años diseñando websites propios y para mis usuarios, he conseguido una vivencia muy amplia en este asunto (tristemente olvidado por varios diseñadores web), que va de la mano del SEO y del WPO (las imágenes también posicionan y hacen que un portal de internet sea más lento). Entonces, te voy a desglosar todos los formatos y te voy a exhibir sus puntos fuertes y débiles.

Comparativa entre imágenes .PNG, .JPG, .GIF, .SVG

Antes de meterte de lleno en la comparativa entre los diferentes formatos de imagen .PNG, .JPG, .GIF y .SVG, te sugiero que poseas algunos puntos claros. Para comenzar, la distingue entre Lossy (con pérdida) y Lossless (sin pérdida), unos términos que vas a leer bastante a lo largo de la guía y que no quiero que te bloqueen.


  • Lossless (sin pérdidas) es un tipo de compresión de imágenes que disminuye el tamaño de un archivo sin perdida de calidad (no importa las ocasiones que almacenes u optimices la imagen, que la imagen se verá precisamente igual).

  • Lossy (con pérdidas) es un tipo de compresión de imágenes que disminuye el tamaño de un archivo con perdida de calidad (si guardas una imagen en un formato lossy constantemente, la calidad de la imagen empeora progresivamente).

Es viable que hayas oído en más de una ocasión el término “modo de color” o de manera directa hayas escuchado modo RGB, modo CMYK o inclusive modo LAB. ¿Es así?, ¿te suena, aunque sólo sea un poco?, ¿o es como si te estuviese comentando en chino? No te impacientes, porque no es algo escencial, pero jamás está de más estudiar términos nuevos. Por esto, es considerable que sepas la distingue entre colores indexados y directos:


  • Una imagen tiene la posibilidad de tener indexados un número con limite de colores (generalmente sólo puede almacenar 256), controlados de manera directa el creador, que crean el mapa de color.

  • Una imagen con colores directos puede guardar numerosos cientos de colores que no fueron seleccionados de manera directa por el creador, por lo cual siempre será una imagen más nítida.

Tabla comparativa entre imágenes .PNG, .JPG, .GIF, .SVG

Formato de imagenCategoríaPaleta de coloresTransparenciaAnimaciónUsoLossyMillones de colores  Imágenes sin animación
FotografíaLosslessMáximo 256 coloresBinario Animaciones simples
Gráficos con colores planos
Gráficos sin degradadosLosslessMáximo 256 colores  Uso semejante al formato .GIF
Mejor transparecia pero sin animación
Es ideal para iconosLosslessMillones de colores  Uso similiar al formato .PNG-8
Imágenes sin animación y con transparenciaLosslessMillones de colores  Formato de imagen antiguo
No hay nada en lo que despunteVector/LosslessMillones de colores  Gráficos y logotipos para páginas web
Retina / pantallas de alta resoluciónLossy/LosslessMillones de colores  Gráficos y logotipos para páginas web
Retina / pantallas de alta resolución

Si lo que buscas es una solución única para el formato de tus imágenes, entonces deberías echar una mirada a WebP. El formato no sólo tiene una calidad de compresión/tamaño superior, sino que también soporta transparencias y animaciones. Usa una combinación de compresiones sin pérdidas y con pérdidas y, de la misma manera que el formato JPG, te permitirá determinar el nivel de calidad o el tamaño del archivo.

Desde luego, este nuevo formato de imagen no fué adoptado por todos los navegadores de momento, por lo cual los programadores web que lo han adoptado están en la actualidad en las primeras fases de trabajo solucionando inconvenientes de facilidad de uso. Aunque con un 30% de ahorro más que el JPG, adjuntado con una más grande adopción del servidor revela que WebP es un formato a tomar en cuenta para el futuro del diseño de páginas web.

Características, consejos y usos de los formatos de imagen más habituales

JPG (o JPEG): Características, consejos y usos del formato de imagen

Los formatos de imagen .JPEG y .JPG son precisamente lo mismo, por lo cual puedes referirte a ellas como elijas (ambas son variantes aceptadas del mismo acrónimo). A distingue del .GIF, JPEG es un formato de 16 bits, lo que supone que puede unir los colores rojo, azul y verde para exhibir millones de colores. Esto provoca que JPG sea muy “amigable” con algún imagen. Esto hay que, en parte, a que es un formato estándar y muy extendido utilizado por la mayoría de las cámaras digitales del mercado.

Además, el formato de imagen .JPEG da mucha elasticidad en el momento de seleccionar la compresión de las imágenes (desde 0% (compresión pesada) a 100% (sin compresión). En la mayoría de los casos, 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 correcto para comprimir y renderizar la fotografía, es un tipo de compresión con pérdidas (lossy), lo que supone que es menos útil para ediciones en curso de las imágenes. Exportar un archivo JPEG otorga lugar a una pérdida de calidad, y estas pérdidas empeoran con consecutivas exportaciones (como cuando haces una fotocopia de una fotocopia). Esta es la razón por la cual los fotógrafos expertos acostumbran utilizar formatos sin pérdidas como RAW. Utiliza este formato para:

  • Imágenes fijas
  • Fotografía generalmente

×Nota: JPEG y JPG son impecables en el momento de diseñar páginas web, blog o tiendas en línea, debido a que llenan menos que los otros formatos, aunque no te permitan “jugar” con transparencias (fondo transparente).

GIF: Características, consejos y usos del formato de imagen

A menos que seas muy principiante en Internet, el planeta del diseño web y los diferentes formatos de imagen, es muy posible 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, en contraste con JPEG o PNG, los ficheros GIF están limitados a una paleta máxima de 256 colores.

Fundamentalmente, cada imagen GIF tiene dentro un preciso número de colores preestablecidos y no otorga la oportunidad de mezclarlos para hacer nuevos colores (como si sucede en otros formatos). Aunque 256 puede escucharse como un número prominente de colores con los que trabajar, algunas fotografías (más complejas) tienen la posibilidad de llegar a tener numerosos cientos de tonos de color.

De hecho, esta gama de colores se pierde a lo largo de el desarrollo de conversión a .GIF (esta se encuentra dentro de las causas más indispensables para no usar GIF para imágenes en color). Mientras que GIF es una mala opción para imágenes con extensa variación de color, ese límite de 256 colores puede contribuir a sostener a raya el tamaño total de las imágenes, que es ideal inclusive para la conexión más lenta de Internet. A lo largo de varios años, los ficheros .GIF proporcionaron la única opción para almacenar imágenes con transparencia en Internet (aunque PNG y SVG también lo ofrecen). Usa este formato para:

  • Animaciones sencillas
  • Iconos pequeño tamaño

PNG: Características, consejos y usos del formato de imagen

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 por medio de sus dos variedades.

PNG (o Portable Network Graphics) es un formato de imagen bastante más reciente que .GIF y .JPEG. Es infaltante es diseño web, teniendo bastante éxito entre los programadores de todo el planeta, por medio de su oportunidad de optimización sin pérdidas y la oportunidad de añadir transparencias. Este formato es como un matrimonio entre GIF y JPEG, por medio de sus dos variantes:

  • PNG-8: Este formato de imagen es semejante a GIF, debido a que usa la misma paleta de 256 colores (máximo). Da más utilizadas opciones de transparencia y comunmente exporta un tamaño de archivo sutilmente menor. Eso sí, no posee función de animación.
  • PNG-24: Este formato de imagen te facilita procesar imágenes con millones de colores, como JPEG, pero también da la aptitud de proteger la transparencia. Ya que PNG-24 es un tipo formato de imagen sin pérdidas, posiblemente obtenga ficheros de más grande tamaño, pero si la calidad de imagen es más considerable que el tamaño de archivo, PNG-24 es la preferible opción. Relacionado con su primo JPEG, los ficheros PNG-24 no son tan universalmente compatibles con todas las apps y interfaces, lo que provoca que el formato sea menos perfecto para aplicarlo en websites. Eso sí, es viable editarlo sin bajar sus características.

Es, sin duda, uno de mis formatos de imagen preferidos, debido a que te da la oportunidad de cambiar y mejorar las imágenes constantemente sin perder calidad. Utiliza este formato para:

×Nota: Es un formato de imagen ideal para diseño web, debido a que facilita transparencias, por lo cual puedes utilizar imágenes en diversos tipos de fondos (blancos y oscuros). Además, podrás “maltratar” las imágenes sin perder un ápice de calidad.

SVG: Características, consejos y usos del formato de imagen

En contraste con los tres formatos de imagen nombrados previamente, 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 interesante para todos los diseñadores y programadores de página web y UI (user interface o plataforma de trabajo de usuario).

En ocasiones es útil suponer en el formato SVG como el “HTML para ilustraciones” y necesitas aplicarlo de forma muy distinta a otros formatos de imagen que he mencionado más arriba. Este formato de imagen es el más correcto, entre otras cosas, para exhibir logos, iconos, mapas, banderas y otros gráficos conformados en apps de gráficos vectoriales como Illustrator, Sketch e Inkscape.

Creado con un marcado apoyado en XML, los ficheros SVG tienen la posibilidad de ser modificados en algún editor de texto y modificado por JavaScript o CSS. Como los vectores tienen la posibilidad de ser escalados a algún tamaño mientras conservan la calidad de imagen nítida, son especiales para el diseño responsive. Aunque SVG es un formato vectorial en su núcleo, es viable (incluso común) incrustar gráficos de mapa de bits dentro de ficheros SVG (por ejemplo JPEG).

Esto se puede llevar a cabo enlazándolo a una imagen a través de una dirección de Internet (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 ofrece al SVG mucha elasticidad y opciones. Los servicios en línea como WordPress, Flickr, Medio, Tumblr y Facebook convertirán (forzosamente) algún archivo SVG a otro formato o, más posiblemente, bloqueen de manera directa su subida.

  • Gráficos que argumentan a cada gadget
  • Gráficos que requieren ser modificados, actualizados y redistribuidos.

×Nota: Si usas SVG para diseño web, encontrarás que la mayoria de las veces se puede achicar el tamaño del archivo en comparación con JPEG o PNG. Pero ten presente que cuanto más complejo sea el SVG, más grande será el archivo (tienden a ser ficheros de enorme tamaño).

Análisis y uso de los formatos .PNG, .JPG, .GIF y .SVG

En este momento que ya conoces las diferencias entre los formatos de imagen más populares es hora de llevar a cabo un análisis más profundo con pruebas reales. Voy a enseñarte, con imágenes y gráficos, cómo los formatos GIF, JPG, PNG y SVG se manejan con colores sencillos, complejos e imágenes de fotografía a color. La iniciativa es que mires la distingue del resultado en todos ellos y la distingue en el tamaño final del archivo.

×Nota: Ten presente que las imágenes las he guardado usando la opción “Guardar para Web y dispositivos” de Photoshop con la configuración de calidad más alta.

Gráficos planos de color

El primer tipo de imagen que voy a investigar son los gráficos de color chato (flat color). Esta clase de imagen cubre la mayoría de los logotipos, iconos, mapas sencillos, 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 apreciar 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 quita que no hay mucha pérdida de calidad cuando se comparan los distintos formatos, más allá de que se notarán pequeños datos cerca de los bordes de los ficheros JPEG comprimidos. Esto no en todos los casos es lo habitual con los gráficos de color chato pero, en la mayoría de las situaciones, deberías seleccionar la imagen menos pesada.

×Nota: Para esta imagen, asumiendo que tienes el archivo vectorial original, SVG es la elección obvia (6 KB). Si no tienes el vector original, la preferible opción es PNG-8, debido a que disponemos de la misma calidad, pero el tamaño total pasa de 23.4 KB a 11 KB.

Imágenes con colores complejos

En esta situación la imagen original es una imagen JPEG de 328 KB con una dimensión de 1280 x 960. A continuación podrás apreciar la diferencia en el tamaño de compresión, así como en la calidad de la imagen. Como no disponía de un ingreso a una versión vectorial de este archivo, algún versión SVG de esta imagen sería sólo un JPEG incrustado dentro de un SVG (esto provoca que sea un poco redundante, por lo cual no voy a investigar 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 usa un formato JPEG, PNG-24 o SVG. Los colores se conservan (en su más grande parte) y no tienen bandas feas y el ruido que sueles conseguir con formatos GIF y PNG-8.

Imágenes de fotografía a color

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

GIF: 453 KB

 

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

 

JPEG 75% : 83 KB

 

PNG-8: 362 KB

 

PNG-24: 1 MB

 

De la misma manera que con las imágenes de colores complejos, es preferible almacenar esta clase de fotografías en los formatos JPEG, PNG-24 o SVG. El color se guarda en todos los formatos, además de las bandas y el ruido que se resaltan en las sombras del cabello, la piel y el fondo, así como en la parte de arriba de la foto de los formatos GIF y PNG-8.

Bonus: Utilidades para mejorar las imágenes de tu web

Siempre que sea viable, lo destacado es intentar hacer de manera automática la optimización de imágenes. Para que poseas una pequeña asistencia, voy a comunicar contigo algunas de las utilidades de optimización de imágenes que suelo utilizar. Como normal general, ejecuta los optimizadores con más perdidas primero y después los que tienen menos pérdidas, así mejorarás el desempeño.

La mayoría de los programadores se olvidan de que los optimizadores de imágenes optimizan un archivo en especial en lugar de una imagen. Esto quiere decir que no posee sentido mejorar el archivo de una imagen y después cambiarla de tamaño, recortarla o cambiarla a otro formato, debido a que todos los cambios completados en ese archivo no habrán valido de nada y las optimizaciones se habrán perdido por el sendero. Observemos las herramientas:

CompressNow

×Gratis

CompressNow es un servicio en línea gratis que te facilita subir imágenes desde su PC, elija un porcentaje de compresión y bajar la imagen mejorada. Funciona con los formatos GIF, JPG y PNG. El servicio también facilita al arrastrar y dejar caer múltiples imágenes desde tu PC, con una carga máxima de 10 imágenes y un tamaño de archivo individual máximo de 3MB.

GIFsicle

×Gratis

GIFSicle se trata de una herramienta potentísima para la edición y creación de archivos GIF. Con una amplia colección de parámetros y configuraciones, GIFsicle facilita hacer GIF animados con toda clase de elasticidad, así como hacer optimizaciones para achicar su tamaño. Hay un plugin de GIFsicle para GIMP, que facilita usar este programa junto al popular editor open source.

Image Optimizer

×Gratis

Image Optimizer te facilita cambiar el tamaño, comprimir y mejorar tus imágenes y está utilizable como servicio en línea gratis, aplicación de escritorio libre o como actualización de pago para remover el texto promocional en la parte de abajo de las imágenes optimizadas. Es realmente simple de utilizar debido a que te permite seleccionar la calidad de optimización, anchura máxima y altura máxima. Puedes comprimir las imágenes a granel y ver el avance de la optimización.

ImageOptim

×Gratis

ImageOptim optimiza las imágenes por medio de la búsqueda de los especiales parámetros de compresión y la eliminación de datos insignificantes, como comentarios y perfiles de color. Maneja PNG, JPEG y GIF. También es fácil de usar; sólo tienes que arrastrar y dejar caer imágenes o carpetas en la ventana y se optimizan en el instante. También puedes dejar caer ficheros sobre el icono del dock de ImageOptim, usar el menú en el Finder (en Mac) o lanzarlo desde un script de shell.

Image Optimizer

×Gratis

ImageOptim optimiza las imágenes intentando encontrar los especiales parámetros de compresión y la eliminación de datos insignificantes, como comentarios y perfiles de color. Maneja PNG, JPEG y GIF. Es fácil de usar; sólo tienes que arrastrar y dejar caer imágenes o carpetas en la ventana y se optimizan en el instante. También puedes dejar caer ficheros sobre el icono del dock de ImageOptim, usar el menú en el Finder (en Mac) o lanzarlo desde un script de shell.

JPEG Mini

×Gratis y $19.99 para la versión de pago

JPEGmini te contribuye a achicar el tamaño de tus imágenes hasta 5 veces, manteniendo la calidad original. Está utilizable para Mac OS X y Windows como una aplicación de escritorio. Sólo tienes que seleccionar o arrastrar carpetas a la aplicación para que logre mejorar cada imagen de manera automática. Da un pack de servidor que te facilita achicar los costes de alojamiento y ancho de banda.

Shrink O’Matic

×Gratis

Shrink O’Matic es una aplicación de Adobe AIR para cambiar el tamaño de imágenes, logrando manejar JPG, GIF y PNG. Arrastra y suelta de manera simple las imágenes en la aplicación y serán redimensionadas automáticamente. Edita la configuración y escoge el tamaño de salida, rotación, nombre, ubicación, formato y marca de agua. Coincidente con los datos EXIF para que no perder ninguna información una vez procesadas las imágenes.

Smush.it

×Gratis

Smush.it es un servicio en línea de la Red de Programadores de Yahoo! para optimizar imágenes. Usa técnicas de compresión sin pérdidas, el tamaño de la imagen se disminuye sin cambiar su calidad visual. Funciona con ficheros JPEG, GIF y PNG con tamaños máximos de 1 MB. Podrás bajar las imágenes optimizadas desde una dirección de Internet temporal, que tiene una validez de 30 minutos. Dispone también de un plugin de WordPress.

TinyPNG

×Gratis

TinyPNG facilita la compresión con pérdidas destacadas de imágenes PNG. Guarda la transparencia alfa completa y disminuye el tamaño del archivo al bajar selectivamente el número de colores y de bytes en la imagen. El efecto es invisible, pero donde si se nota es en el tamaño del archivo. Coge los ficheros PNG de 24 bits y los transforma en imágenes de 8 bits indexadas, eliminando todos los metadatos insignificantes.

Ten visibles las diferencias entre los distintos formatos de imagen

Como habrás podido corroborar hay bastante que estudiar en el tema de los formatos de imagen para algún diseño y avance web. Seleccionar una u otra puede ser la distingue entre tener un portal de internet con un óptimo desempeño y otro retardado y con una vivencia de usuario mala. Es crítico que te familiarices con todos estos términos, ya seas diseñador web o no.

#MegaGuía de los formatos de imagen #Web 🌐: GIF 🆚 PNG 🆚 JPG 🆚 SVG Realice clic para Tweet

¿Qué te ha parecido esta guía para comprender los distintos formatos de imagen? ¿Crees que me he dejado algo? ¿Tienes alguna vivencia que deseas contar? ¿Te quedaste con alguna duda o pregunta? Entonces te pido es que dejes un comentario. Da lo mismo que sea o una duda o un fácil gracias, pero me alegraré bastante de ojearlo y responderlo.

¿Te gustó el contenido? Valóralo

[ratingwidget post_id=43090 add_schema=true]

También te puede atraer esta guía

¿Te hayas parado a suponer la consideración que tienen las imágenes en un portal de internet? Alguien busca un producto, un espacio, una receta, o una infografía en Google y ahí deberían aparecer tus imágenes.

Pero, ¿estás mejorando de manera correcta tus imágenes para que esto ocurra? En esta guía punto por punto te muestro cómo tener tus imágenes como una utilidad más de posicionamiento en buscadores.

 

▷ GIF vs PNG vs JPG vs SVG ¿Qué Formato de Imagen es Mejor? by Unforo.net

Le ofrecemos las debido al creador por ayudarnos a crear este artículo.

A %d blogueros les gusta esto: