Hi everybody! Si has hecho clic para leer este artículo es porque no tienes muy claras las diferencias entre JPG, PNG y GIF y cuándo utilizar cada uno en tu web. Para tener claros los conceptos, solo tienes que leerte este artículo hasta el final y, si me quieres hacer súper feliz, compartirlo cuando acabes 🙂

Si te digo la verdad, hasta hace no mucho yo tampoco tenia claras las diferencias. Pero cuando la necesidad aprieta, ¡no queda más remedio que aprender!

Estos formatos son, yendo al diccionario, formatos de compresión de imágenes. Vamos a ver qué les caracteriza y cuándo usar cada uno en tu web.

Y como el saber y el conocimiento hay que compartirlo, te pienso contar toooooodo lo que sé sobre el tema. ¡Quédate!

 

¿Cuáles son las diferencias entre JPG, PNG y GIF?

#1. ¿Qué es un JPG?

JPG es un formato de compresión de imágenes CON pérdida. Esto es, pierde calidad cada vez que reduces su tamaño. Es probable que tengas cientos de archivos JPG en tu ordenador y no te hayas planteado “cuánto pesan” (si es así, ¡empieza a aligerar!).

En los archivos JPG, usando un programa de edición de imagen, puedes elegir cuánto quieres reducir la imagen para que pese menos: si lo reduces mucho el archivo pesará poco, pero tendrá también poca calidad; si decides reducirla un poquito nada más, tendrá mejor calidad.

Debes saber que la pérdida de calidad es acumulativa: si comprimes la imagen y luego la descomprimes ya habrá perdido calidad, y si repites el proceso la imagen irá perdiendo calidad progresivamente.

¿Cómo se realiza la compresión en JPG?

Bien, no se comprime de forma aleatoria ni porque sí, reduciendo lo que primero le venga en gana. Este tipo de reducción calcula el valor de algunos píxeles y hace una batida de los mismos en función de los píxeles que tiene alrededor.

¿Cuándo tengo que utilizar JPG, PNG o GIF en mi Web? Clic para tuitear

Este formato está especialmente pensado para la compresión de imágenes digitales y fotográficas (es el formato estándar de las cámaras digitales). Además, se utilizan mucho en páginas web porque no pesan demasiado, un hecho importante para facilitar la usabilidad del usuario, y es compatible con la mayoría de programas y plataformas.

JPG da soporte a los colores CMYK y RGB, así como escalas de grises y es capaz de guardar información de más de 16 millones de colores diferentes.

Sus siglas responden a Joint Photographic (Experts) Group. Tanto si te encuentras con un JPG como con un JPEG estarás ante el mismo formato de compresión. Los primeros corresponden a archivos de PC o Windows, cuyas extensiones de archivo solo permiten tres caracteres. Sin embargo, los archivos JPEG son los que se utilizan en MAC.

Este tipo de archivos no se recomienda si la imagen es un logotipo o una imagen con texto, ya que la pérdida de calidad será especialmente notable. JPG no soporta transparencias, lo que hace que si la imagen no tiene fondo automáticamente se añadirá un fondo blanco.

¿Cuándo utilizar JPG en tu web?

Es el mejor formato para subir a tu web imágenes fotográficas. Si tienes imágenes de tu cámara de fotos, lo más normal es que pesen una barbaridad. ¡No las subas tal cual a tu web!, antes debes reducir considerablemente su peso si no queres que tu página web tarde una eternidad en cargar…

Bien, comprime esas imágenes hasta unos 300/400KB, por ejemplo, y estarán listas para subir a la web. Este peso es aproximado, ya que no es lo mismo una imagen para un slider a ancho completo que una pequeña imagen de sección que no debería pesar más de 100KB.

Vamos a ver la súper demostración de porqué JPG es el mejor formato para subir fotografías a tu web.

OJO!, si estás viendo este artículo desde el móvil puede que no notes mucha diferencia entre las imágenes que vas a ver a continuación, pero desde un ordenador te garantizo que sí la hay. 

Partimos de una imagen original de unos 700KB de peso, y esto es lo que le pasa en cada uno de los formatos:

diferencias entre JPG, PNG Y GIF

Arriba puedes ver la imagen en JPG con una calidad de 60 sobre 100 guardando para Web en Photoshop. Como puedes ver mantiene una calidad bastante aceptable y solo pesa 163KB.

 

diferencias entre JPG, PNG Y GIF

Aquí puedes ver la misma imagen en JPG con una calidad de 3 sobre 100. Comparando con la anterior, la calidad es mucho peor (ves las rayas horizontales del fondo ¿verdad?, pero solo pesa 39KB.

A este tamaño, es evidente que queda feísima, pero ¿y si solo la necesitas a este otro tamaño?:

Ahorra peso en las imágenes de tu web. Tu SEO te lo agradecerá Clic para tuitear

 

diferencias entre JPG, PNG Y GIF

Arriba tienes una imagen  PNG-8. La calidad no es muy buena y aun así pesa 257KB. La mitad del fondo es transparente (puedes comprobarlo guardando la imagen con el botón derecho), esta es la principal virtud de los PNG y los Gif, que te dejan jugar con transparencias.

La mejor calidad PNG se obtiene con PNG-24,  pero esta misma imagen al exportarla en PNG superaba 1MB de peso… ¿cómo te quedas?. Sí, pesaba incluso más que la original, por ese motivo ni siquiera la hemos subido a este experimento; queremos que nuestra web siga siendo óptima y cargue los contenidos rapidito 🙂

 

diferencias entre JPG, PNG Y GIF

Esto es un GIF a 256 colores. ¿Ves los puntitos verdad?. La pérdida de color y nitidez en comparación con la exportada en JPG es notable y pesa el doble… 342KB.

 

diferencias entre JPG, PNG Y GIF

GIF a 4 colores. Distorsión total de color y aquí no me puedes decir que no ves los puntitos. 94KB de ligereza, pero como puedes ver, muy poca utilidad para trabajar con fotografías o imágenes digitales en las que quieres mostrar un mínimo de realismo.

Entonces, ¿para qué sirven los PNG y los GIF?

Pues te lo voy a contar ahora mismo.

#2. ¿Qué es un PNG?

A diferencia de JPG, PNG es un formato de compresión SIN pérdida. Sus siglas corresponden a Portable Network Graphics e inicialmente se creó para solventar los defectos y deficiencias del formato GIF (que veremos después).

Una característica muy importante de este formato es que soporta transparencias, a diferencia de JPG que siempre tendrá un fondo de color sólido. Los PNG son el formato ideal para las imágenes sin fondo, las imágenes que contengan texto y los logotipos. También incluimos en esta categoría los dibujos lineales, que tendrán mucha más calidad en PNG que en JPG. PNG es el formato ideal, y el que más se usa para la web y el online cuando quieres mantener una calidad muy alta.

Generalmente se usa en imágenes no demasiado grandes.

Hay dos tipos de archivos PNG:

  • PNG 8: tiene limitación de colores, pero el peso del archivo es muy pequeño (similar al GIF).
  • PNG 24: no tiene limitación de colores, pero el tamaño en el disco será mayor.

Aunque este formato (PNG) sí se puede usar para fotografías, el tamaño va a ser mucho mayor que en JPG y el archivo va a pesar mucho.

Diferencias entre PNG y JPG:

  • JPG presenta compresión CON pérdida de calidad. Es ideal para imágenes de gran tamaño que, tras reducirlas, siguen teniendo una calidad aceptable. No admite transparencias. Especialmente para imágenes digitales y fotográficas. Archivos poco pesados. Admite CMYK y RGB.
  • PNG presenta compresión SIN pérdida de calidad. Ideal para imágenes sin fondo, imágenes con texto y logotipos o dibujos lineales. Mucha calidad pero devuelve archivos bastante más pesados que los JPG. Admite transparencias. No admite CMYK por lo que no es útil para impresión (digital).

Diferencias entre PNG y GIF:

  • En gran parte de los casos, los archivos PNG comprimen mejor que los GIF.
  • Los archivos GIF permiten transparencias completas u opacidades completas. Sin embargo, PNG permite crear semitransparencias. De hecho, se pueden alcanzar 256 tipos distintos de transparencias, como si fuera un color más. Esta semitransparencia es muy útil para reproducir objetos translúcidos.
  • Los archivos PNG soportan millones de colores mientras que las imágenes GIF tiene un límite de 256 colores.
  • Por último, el PNG no soporta animaciones ni movimiento, algo que caracteriza al GIF y que le ha hecho renacer con fuerza en los últimos tiempos.

¿Cuándo utilizar PNG en tu web?

Los archivos PNG utilízalos para cargar, por ejemplo, tu logotipo. Este formato va a reflejar perfectamente los colores de tu logo y, además, con fondo transparente para que puedas colocarlo donde quieras.

diferencias entre jpg png y gif

#3. ¿Qué es un GIF?

Aunque fue olvidado durante un tiempo, actualmente es un formato muy popular por permitir crear imágenes en movimiento. De hecho, su principal característica es que soporta animaciones, pero también soporta transparencias y paletas de 256 colores.

No suele distorsionar la imagen pero sí difumina un poco los colores. Es muy utilizado porque para ver las animaciones no es necesario tener instalado un software adicional  como en el caso de los vídeos por ejemplo.

Como solo admite 256 colores no es muy recomendable para guardar imágenes fotográficas ya que perderían bastante calidad. Es muy útil para guardar imágenes con bloques de colores planos, logotipos sencillos o ilustraciones simples.

¡Ah! Las siglas corresponden al término Graphic Interchange Format.

¿Cuándo utilizar GIF en tu web?

Como comentábamos, para exportar archivos con pocos colores y que tengan muy poquito peso. Y será el único que puedas utilizar si quieres crear un trozo de bacon que baile.

 

 

 

Mini resumen para dejar los conceptos claros sobre las diferencias entre JPG, PNG y GIF:

  • JPG: para imágenes fotográficas – pérdida de calidad acumulativa – no admite transparencias – CMYK y RGB sí – no utilizar para logotipos o imágenes con texto – poco peso.
  • PNG: perfecto para el logotipo en tu página web, para ilustraciones o dibujos – compresión sin pérdida de calidad – admite transparencias y degradado en las mismas – RGB sí, CMYK no – va muy bien para ilustraciones o imágenes con texto – archivos más pesados.
  • GIF: para ilustraciones sencillas con bloques de colores planos y sobre todo para crear imágenes con movimiento – admite 256 colores – transparencias absolutas (sin degradado) – poco peso en el disco.

 

 

 

¿Te has leído todo? ¡Yuhuuuuuuuuuuu! olé, olé y oléeeeeee! Ahora puedes hacer dos cosas:

  • Dejarme un comentario diciendo que te ha encantado el artículo o preguntándome alguna duda
  • Darle a compartir y hacerme súper feliz 🙂

Bueno, puedes hacer una tercera, que es irte por donde has venido… pero no me harás feliz y el mundo entero se quedará sin saber qué opinas…

PD: te dejo adjunto por si te interesa el artículo en PDF para que te lo puedas descargar

Imagen del Huevo de Pascua: Pixabay

Soy la Community Manager de Ensalza, y responsable de redacción y contenidos en marketing.

Me encanta compartir mis opiniones y gustos con los demás y aprender de ellos. Amante de la (buena) música, de Madrid y del aperitivo a mediodía.

[Total:15    Promedio:4.1/5]

Share This

Si continuas utilizando este sitio, aceptas el uso de las cookies. Más información

Las opciones de cookie en este sitio web están configuradas para "permitir cookies" para ofrecerte una mejor experiéncia de navegación. Si sigues utilizando este sitio web sin cambiar tus opciones o haces clic en "Aceptar" estarás consintiendo las cookies de este sitio.

Cerrar