Muchos conocemos las características de cada formato y por qué debemos elegir algunos para la alta resolución, otros por su peso y hasta por la compatibilidad de navegadores, les comparto algunas factores para comprender las diferencias de los formatos de imagen y que me comenten sobre qué formato prefieren utilizar y por qué.
GIF y sus 256 colores:
Son las siglas para Graphics Interchange Format. Este formato puede contener hasta 256 colores. Por esta razón, GIF no es un buen formato para guardar fotografías que puedan tener más que esa cantidad de colores, puesto que perderían gravemente su calidad.
Es útil para guardar imágenes que tengan grandes bloques de colores planos como ilustraciones simples o logotipos para alguna compañía. Además, permite preservar la transparencia. El formato GIF usa un algoritmo de compresión LZW. Esta es una de las razones por las que el uso del formato PNG se está volviendo más popular, puesto que este algoritmo estaba patentado y los fabricantes de software que utilizaban imágenes GIF debían pagar regalías a Unisys, la propietaria de los derechos.
Características del formato JPEG:
Son las siglas para Joint Photographic Experts Group, un format utilizado para compartir fotografías y otras imágenes con tonos continuos en la web. Este formato da soporte a los modelos de color CMYK (cyan-magenta-yellow-cyan) y RGB (red-green-blue), además de modelos en escala de grises, lo que amplía por mucho la gama de tonalidades que podemos obtener.
El formato JPEG comprime el tamaño del archivo final utilizando un algoritmo de compresión con pérdida. Es decir, que para representar cierta cantidad de información (en este caso de color), se utiliza una menor cantidad de la misma. En la mayoría de programas para edición de imágenes es posible especificar qué tanta compresión y pérdida de calidad quieres para tu archivo. Lo más probable es que si utilizas la opción de máxima compresión, la imagen resultante sea difícil de reconocer, pero se puede utilizar una configuración que reduzca el tamaño de archivo pero que produzca una imagen relativamente buena.
Transparencias usando PNG:
Son las siglas para Portable Network Graphics, que intenta reunir características de los anteriores formatos. Su desarrollo se basó en GIF, para evitar la pérdida de información al comprimir los archivos y es un formato con creciente popularidad para desarrolladores web.
Sin embargo, a diferencia de GIF, PNG soporta imágenes de 24 bits y permite preservar la transparencia sin asperezas en los bordes. El problema es que algunos navegadores de internet antiguos no permiten visualizar este formato.PNG soporta imágenes RGB, con colores indexados, en escalas de grises y en modo de mapa de bits.
Veamos las diferencias
Utilizaré una imagen para demostrar de forma gráfica las diferencias entre uno y otro formato.
1. Fotografía guardada como GIF de 256 colores. El tamaño de archivo es 71.77K.
2. Fotografía guardada como JPEG con un preset de alta calidad. El tamaño es 24.28K.
3. Fotografía guardada como PNG8 en un archivo de 62.64K.
4. Fotografía guardada como PNG24 en un archivo de 211K.
Entonces, ¿cuál formato es para mí?
Para terminar, podemos concluir lo siguiente sobre el uso de imágenes para la web. Lo que buscamos es un punto medio entre calidad y tamaño de archivo:
- JPEG nos sirve para manipular y compartir archivos de imagen de tipo fotográfico.
- GIF o PNG8 serán muy útiles para manipular imágenes con bloques de colores planos.
- PNG24 nos servirá para imágenes con efectos como brillos y sombras, que también requieran transparencia.
Sobre el uso de formatos existe un interesante debate entre diseñadores y desarrolladores web, algunos prefieren utilizar el formato PNG el cual no tiene restricciones de patentes, está recomendado por el W3C y permite transparencia. Sin embargo, hay quienes aún prefieren el JPG por su popularidad y características ¿qué formato prefieres utilizar?
Yo diria:
GIF: nunca
PNG8: iconos y logotipos
JPG: Fotos
PNG24: Imagenes con transparencias
Yo sin duda me inclino por el JPG y el PNG para la web. Saludos!
Yo uso gif para botones o menues sin muchos efectos.
Png para transparencias o iconos/menues con efectos de colores
jpg: fotos.
Yo creo que ya en este tiempo para el tipo de diseño que hay en la web ya se lo lleva por mucho png y jpg.
Yo uso PNGs para las imagenes con pocos colores o colores planos o pequeñas y JPG para las fotos.
@Gregorio Ramírez: definitivamente el GIF es un formato de los tiempos en donde las pequeñas animaciones eran lo máximo para hacer entretenidas las páginas web que solo tenían texto, texto y más texto, pero definitivamente hay que considerarlo dentro de la lista.
Definitivamente, la sugerencia sería inclinarse por PNG y JPG, porque son los formatos más eficientes para compartir imágenes y fotografías. El punto era explicar las diferencias para los que quisieran saber por qué.
no sabia de las bondades del formato png. y mas ahora sabiendo que lo recomienda el W3C, voy a seguir trabajando con este formato
me inclino mas por el PNG, por que se puede la mayoria de los efectos en ese formato, pero uso jpg! Hay que saber cual usar en que momento.
El .PNG y con fireworks!!!
su calidad es superior a los demas formatos, lo unico es que un poco pesado y tienes que sacrificar un poco la calidad, pero las transparencias lo valen por un poco mas de kbs
Siento que ya había leído este artículo en el pasado… supongo que es porque se parece mucho a aquella entrada en donde se daban sugerencias para reducir el peso de nuestras imágenes sin reducir su calidad…
Bueno, sin preámbulos ni rodeos diré que mi formato preferido por encima de todos los demás es el PNG-24, ya que conserva la calidad y la transparencia en el máximo nivel, y el peso en el mínimo. ¿Qué más puedo pedir?
“existe un interesante debate entre diseñadores y desarrolladores web, algunos prefieren utilizar el formato PNG el cual no tiene restricciones de patentes, está recomendado por el W3C y permite transparencia. Sin embargo, hay quienes aún prefieren el JPG por su popularidad y características”
El JPG no acepta transparencia exterior y al perder la calidad adquiere un desenfoque horroroso… tal, que parece que has re-guardado la imagen con Paint. Si hay desarrolladores que prefieren el JPG por encima del PNG, es porque no tienen ni idea de lo que hacen; y si hay diseñadores que prefieren el JPG por encima del PNG, es porque tienen el título de “diseñador” de adorno.
En resumen, el JPG sólo sirve para fotografías y altas resoluciones.
el problema con png es que internet explorer 6 no lo acepta como se deberia, la capa transparente se ve gris, yo uso principalmente jpg y gif, saludos.
Estoy aqui por que tengo un problema grave, desde hace tiempo tenemos una web conocida como inventorespr.com
durante su ultima actualizacion se fueron todos las fotos del web. En el servidor aparecen como text/html en vez de JPEG image en las propiedades del elemento (element properties), llevo dias tratando de solucionarlo y no encuentro la manera, necesito ayuda urgente!!!
@manuel: IE6 no muestra la transparencia en imagenes PNG24 pero sí en PNG8, que sería el equivalente a GIF. Revisa el “guardado para web” en tu editor de imágenes y verás 😉 Lo malo es que ni PNG8 ni GIF soportan transparencia real: un píxel puede ser totalmente transparente o totalmente rojo, pero no puede ser rojo transparente al 50%.
@Bobert: JPG consigue tamaños de archivo menores que PNG24, con la ventaja que te permite elegir la cantidad de perdida que estás dispuesto a aceptar (más perdida = más borrosa la imagen = menor tamaño de archivo). Ten en cuenta que en el ejemplo de este post la imagen PNG24 tiene un tamaño 10 (!!) veces superior a la JPG.
En definitiva, para mi la cosa se reduce a lo siguiente (quedarse con el formato de la primera condición que se cumpla):
– Imagen con transparencia real: PNG24
– Imagen con pocos colores distintos: PNG8
– Imagen para uso offline/ o requisito de fidelidad al 100%: PNG24
– Resto: JPG (ajustando la cantidad de perdida según la imágen).
Piensa que no todo el mundo tiene conexiones de banda ancha y, aun si las tienen, el tiempo de carga es importante en la web…
ok gracias por la aclaracion
Yo me decanto por los tres. Cada uno para lo que es.
El ganador absoluto en fotografías en JPG. Para imágenes que normalmente compongan el diseño de la web, si que uso PNG, que gana con diferencia en ese sentido. El GIF va muy bien, como dice el artículo para colores planos. Por ejemplo, una web típica que se haría entéramente con GIFs, sería la que tiene un aire total o parcial al pixel design.
Es curioso que, se ha obviado (no sé si en los comentarios) el uso del formato GIF para animaciones, cuando por allá por los 90 (que horrible era ésto entonces, jeje) Internet estaba plagado de GIFs animados. Hoy creo que ésto se reduce más bien a emoticonos. Pero bueno, ahí está. Se podría decir muy cuidadosamente que Flash fue el relevo del GIF (en lo que se refiere a movimiento en la red).
De todas formas, sin duda alguna, cada formato de éstos tres es el rey de “su categoría”.
Aunque claro, siempre hay alguien que usa PNG24 para fotografías de 1200*960, o GIF para transparencias realmente malas o, JPG para logos tipo pixelydixel. Haylos, haylos…
[…] http://www.maestrosdelweb.com/editorial/formatos-gif-jpg-png/ […]
Todo depende del uso y el proposito de tus detalles, siempre es util mostrarlo en formato .gif o sino .jpg o sino .png, al final dependera para que querramos usarlo.
En lo personal me inclino por el png, y el jpg.
Saludos
Gildus
[…] digitales, conozcamos un poco más acerca de su origen, caracaterísticas que lo diferencias de otros formatos de imagen. Iniciemos por comprender de dónde deriva el nombre JPEG, este formato fue creado por Joint […]
ets achido loko jaja solo pasoa desirte q sigas asi men jaj cuidate el miki plus jajaja…
Soy alguien que busca informacion sobre los diferentes formatos y sus caracteristicas,me agrado mucho el articulo y los comentarios de todos los que han participado.Gracias a todos por sacarme de dudas.
Depende de para que se quiera. El jpg no admite transparencias ni capas.
MUY buena info …
ha sido de mucha ayuda !
gracias!
[…] http://www.maestrosdelweb.com/editorial/formatos-gif-jpg-png/ […]
interesante, gracias x la instruccion
Si se desea guardar una imágen sin pérdida de calidad (lossless), entonces usar PNG!… PNG es a BMP como FLAC es a WAV.
es to se me ase una caca
Knibl trata de tomar una imagen y darle la opcion abrir como, te arrojara una serie de programas en donde tu puedes sleccionar el adecuado a fotografias…luego selecciona la opcion de utilizar siempre este programa para archivos de este tipo. De tods maneras por el tiempo transcurrido creo que ya lo solucionaste.
Yo uso Gif para Gifs lol, png24 para imágenes por ejemplo, de photoshop (firmas, avatars…, y jpg para fotos, osea imágenes “reales” por así decirlo.
Grax por la info.