PNG, GIF o JPG ¿Cuál debo usar?
Publicado en: Diseño por Mauro
Los formatos de imágenes más populares para el desarrollo web son JPG, GIF y PNG. A continuación veremos las características básicas de cada uno de estos formatos de mapas de bits y en qué situaciones conviene utilizar cada uno.
JPG
Es el formato más utilizado y conocido, lo implementa la mayoría de las cámaras digitales y sitios web.
La principal ventaja del JPG es que permite establecer un porcentaje que determina el peso y la calidad de la imagen.
El método de compresión del JPG se basa en tomar áreas contiguas de una imagen y almacenarlas en conjunto. Esto hace que la diferencia de calidad sea prácticamente imperceptible en fotos con enorme cantidad de colores, pero a la vez genera problemas de visualización si la imagen tiene textos, líneas muy definidas o fondos plenos.
La siguiente imagen está al 50%. Notamos claramente que la foto de la izquierda se ve con calidad aceptable, mientras los fondos plenos de las otras dos imágenes sufren ciertas distorsiones, especialmente en los límites con otros colores.
Ejemplo de JPG. Tamaño del archivo: 30 KB
Más sobre JPG: http://es.wikipedia.org/wiki/Joint_Photographic_Experts_Group
GIF
Los archivos GIF permiten un máximo de 256 colores, así que resulta claro que no son lo ideal para fotos o imágenes muy coloridas. La idea básica detrás del algoritmo de compresión del GIF es almacenar los códigos de color y las posiciones que ocupan dentro de la imagen.
Como ventaja podemos decir que se puede determinar la cantidad de colores máxima de un archivo GIF, logrando de esa manera controlar el peso. También es destacable el hecho de que permite transparencias y animaciones sencillas.
Por sus características este formato es bueno para fondos de color pleno y textos bien definidos.
Aquí están las mismas imágenes de antes guardadas en un archivo GIF de 32 colores. Vemos que en todos los lugares donde hay muchos colores o gradientes la calidad es pobre.
Ejemplo de GIF. Tamaño del archivo: 23 KB
Más sobre GIF: http://es.wikipedia.org/wiki/Graphics_Interchange_Format
PNG
Debido a que el GIF fue hasta hace poco un formato patentado y toda empresa que lo utilizaba debía pagar, se decidió desarrollar un formato que fuera libre y así nació el PNG. El éxito fue rotundo ya que no sólo lograron un formato gratuito sino que mejoraron con creces todas las limitaciones y problemas del GIF, como por ejemplo el soporte para transparencias (que en GIF es bastante limitado) o la abolición del límite en la cantidad de colores.
PNG evolucionó al punto de que permite guardar imágenes con excelente calidad en un mismo archivo donde se encuentran colores plenos y líneas definidas junto con fotos de enorme cantidad de colores.
Sin embargo, el peso de los archivos no es el ideal cuando se trata de imágenes con mucha cantidad de colores, como podemos ver en los ejemplos presentados.
Ejemplo de PNG. Tamaño del archivo: 116 KB
Más sobre PNG: http://es.wikipedia.org/wiki/Portable_Network_Graphics
Conclusiones
PNG sirve para cualquier tipo de imágenes, pero conviene utilizarlo sólo cuando haya fondos plenos y líneas muy definidas, de lo contrario el peso del archivo se elevará demasiado.
GIF sólo se debería utilizar en el caso en que necesitemos animaciones simples, ya que en todos los demás aspectos es ampliamente superado por el PNG.
JPG debe usarse en las imágenes que tienen muchos colores y gradientes, como fotografías reales o ilustraciones muy elaboradas.
Volvemos a mostrar las 3 imágenes juntas así las puedes comparar y notar las diferencias.
JPG
GIF
PNG
