De entre todos los formatos de archivos de imagen que nos podemos encontrar, las extensiones JPG, PNG y GIF son las más utilizadas y las que podemos ver en los navegadores de internet.
Parece que a la hora de subir imágenes a un sitio web hay quien no tiene del todo claro cuándo utilizar cada uno de estos formatos, para averiguarlo es importante conocer las características de cada uno de ellos.
Así pues, hemos decidido crear esta entrada en la que vamos a explicártelo todo, así podrás encontrar el equilibrio entre calidad y tamaño y tener todas las imágenes de tu web bien optimizadas 😉
Formato JPG
También conocido como JPEG, fue creado en 1982 y cuyo significado es «Joint Photographic Experts Group» que es el nombre del grupo de expertos que lo desarrolló. Fue creado como archivo de compresión para las imágenes tomadas por las cámaras y otros dispositivos de captura de imagen.
Características del JPG
- Utiliza un algoritmo de compresión con pérdida con el fin de reducir el tamaño del archivo. El tamaño puede reducirse entre un 60% y un 75% afectando a la calidad de la imagen pero manteniendo la información de color.
- Permite ajustar el nivel de compresión y por lo tanto la calidad:
+ compresión = – tamaño – calidad
– compresión = + tamaño + calidad - No admite imágenes con transparencia.
- No permite imágenes animadas.
Cuándo utilizar JPG
Para fotografías normales, es ideal para web dada su capacidad de compresión, de manera que si subes tus imágenes bien comprimidas ocuparán poco espacio en tu hosting web.
Formato PNG
«Portable Network Graphics» fue desarrollado a mediados de los 90 para suplir las carencias del formato GIF.
Características del PNG
- A diferencia del JPG, utiliza un algoritmo de compresión sin pérdida, por lo que a penas disminuye la calidad de la imagen, pero ocupa más espacio, así que no es recomendable en fotografías con detalle para web.
- Admite imágenes con transparencias.
- Podemos encontrar dos versiones de PNG:
– PNG-8 (8 bits por píxel) Puede contener hasta 256 colores.
– PNG-24 (24 bits por píxel) Puede contener alrededor de 16 millones de colores. - No permite imágenes animadas.
Cuándo utilizar PNG
- El formato PNG es recomendable para imágenes que contengan tintas planas como logotipos, textos, ilustraciones vectoriales, etc.
- Para imágenes sin fondo o con transparencias.
Formato GIF
«Graphics Interchange Format» fue creado por Steve Wilhite en CompuServe en el año 1987 como un formato de compresión con el que se podían descargar imágenes de tamaño considerable sin que tardaran mucho tiempo.
Características del GIF
- Utiliza el algoritmo de compresión LZW sin pérdida.
- Tiene una paleta de 256 colores.
- Solo admite transparencia binaria (se selecciona un único color para que sea transparente).
- Permite gráficos animados.
Cuándo utilizar GIF
- Para iconos, ilustraciones con líneas simples monocromáticas o con pocos colores.
- En gráficos o imágenes animadas.
- Para imágenes sencillas en blanco y negro.
Algunos ejemplos
Una vez explicados los formatos y sus características, vamos a mostrarte un par de ejemplos utilizando unas imágenes para que veas las diferencias entre calidad y peso, sobre todo entre los formatos JPG y PNG.
Imagen: tawatchai07 / Freepik
Como veis, para una imagen con tanta información descartaríamos el GIF porque la pérdida de calidad es bastante notable. Y, entre el JPG y el PNG vemos que la diferencia de calidad no es tanta, pero si nos fijamos en el peso de cada imagen la decisión está clara ¿verdad?.
En la siguiente gráfica podéis apreciar mejor las diferencias de tamaño de estas imágenes:
★ Voto para el JPG
Ahora vamos a hacer la prueba con una imagen que contiene una ilustración con tintas planas.
Imagen: Freepik
En este caso vemos que no hay mucha diferencia en cuanto al tamaño de los archivos. Si nos centramos en la calidad, tampoco nos encontramos con grandes cambios, pero fijándonos bien podemos observar que el archivo PNG es el que mayor calidad conserva manteniendo un tamaño de archivo bastante razonable.
Y de nuevo una gráfica:
★ Voto para el PNG
➜ Un dato a tener en cuenta es que todos los archivos han pasado por un compresor de imágenes online para reducir su tamaño aún más, algo que recomendamos para optimizar al máximo tus imágenes.
Si quieres saber algún consejillo más sobre optimización de imágenes para web en este post de nuestro Instagram te enseñamos 5 Tips para optimizar las imágenes de tu web.
Y hasta aquí esta explicación sobre cuándo utilizar JPG, PNG y GIF en sitios web, esperamos haber despejado tus dudas. Si hay alguna otra cuestión que no te ha quedado del todo clara puedes exponerla en los comentarios e intentaremos resolverla.