Tutorial: Utilizar imágenes GIF o JPG.

FabricioV · 3 Ene 2010

En el diseño de cualquier web tarde o temprano tendremos que trabajar con imágenes y si eres nuevo en esto como lo fui o sigo siendo , es posible que te hayas preguntado qué es mejor, guardar una imagen en formato .GIF o .JPG (o .jpeg).

Antes que nada, hay que aclarar que hay otros muchos formatos como bitmaps (.bmp), .png, etc. Sin embargo los más usados son los GIFs y JPGs.

Diferencia entre GIF y JPG

La principal diferencia entre estos formatos de imagen es el algoritmo de compresión que utilizan, así como el número de colores máximos que pueden usar. De esta forma, una imagen GIF no podrá contener más de 256 colores. El formato JPG permite muchísimos más colores, haciéndolo ideal para mostrar fotografías o imágenes grandes con muchos colores.

¿Cuando usar GIFs? y ¿Cuándo usar JPEG?

Es recomendable utilizar imágenes .gif siempre que se pueda antes que .jpg para el diseño de páginas web por los siguientes motivos:

• Los .gif siempre ocuparán menos espacio, lo que hará que se carguen muchísimo más rápido y nos ahorrará ancho de banda.

• Utilizar .jpg para fotografías en las que no se quiera perder la calidad de la fotografía.

Espero que les sirva.

♠

Felipe · 3 Ene 2010

Los .gif siempre ocuparán menos espacio, lo que hará que se carguen muchísimo más rápido y nos ahorrará ancho de banda.

Pesan menos, siempre y cuando no estén animadas....

FabricioV · 3 Ene 2010

kalco dijo:
Pesan menos, siempre y cuando no estén animadas....

Gracias por tu aporte, se me habia pasado.

FakeDark · 3 Ene 2010

Los .gif siempre ocuparán menos espacio, lo que hará que se carguen muchísimo más rápido y nos ahorrará ancho de banda.

mmm, yo creo que los .png ocupena menos espacios si estos estan modificados a PNG 8, yo he actualizado png hasta a 1kb y carga super rapido, lo puedes hacer con la macromedia de Fireworks

brand_new · 3 Ene 2010

Yo por ejemplo, utilizo puros jpg, que son los que mejor relación calidad / espacio me dan. Me gustan mucho más y no son tan molestos como los gif, que se "cambian colores"

SoloNegocios · 3 Ene 2010

Yo hago esto:

1. JPG para fotos.

2. PNG para los Logos ya que permite transparencias y puedes usar hasta 32 bit de color como el JPG.

3. GIF para el diseño del Blog.

Epyros · 3 Ene 2010

En su mayoria uso PNG y para imagenes de muchos colores JPG

Un PNG correctamente optimizado puede llegar a pesar menos que un GIF.

KnxDT · 3 Ene 2010

Yo usO GIF o PNG. Casos muy extraños optimizo a JPG evitando perder calidad, usando el IrfanView.

crystaldream · 3 Ene 2010

Bueno yo lo entiendo asi:

GIF es un formato capaz de ocupar una corta gamma (hasta 256 colores) de colores (por eso pesa menos) y no esta tan desarrollado. Estatico un GIF puede pesar tan poco que no lo crees, pero cuando tiene una secuencia de mas imagenes pesara mucho mas, es como los GIF detalladamente animados como estos:
Enlace eliminado
Usado en banners publicitarios, botones sin mucho color, imagenes meramente planas en 2D y sin mucho detalle de color (no mucho degradado). E imagenes animadas (pierde calidad obviamente).

JPG: Usado en imagenes, basado en pixeles (como la mayoria) resolucion, pueden perder calidad haciendo union de pixeles de un color igual, dando la sensacion de borrosidad o pixelizacion. Se usan millones de colores mas pudiendo mejorar la calidad de imagen. Usado normalmente en fotografias, imagenes, posters, etc...

PNG: Por sus siglas portable network graphics (graficos portatiles para la red) son imagenes con buen detalle, acepta transparencias, se comprimen y soporta animacion (Pero no es muy coumun), es ideal para botones, graficos de la web con detalle de color amplio, vectores pequeñes entre otros usos.

Hay otros formatos meramente vectoriales usados cuando exportas com programas con Inkscape, Illustrator, Freehand o Photoshop.

FakeDark · 3 Ene 2010

ahí la lleva el perrito =)

inex · 3 Ene 2010

Hay veces en que el GIF disminuye demaciado la calidad cuando hay transparencia y degradados por lo que recurro a PNG rulz!

crystaldream · 3 Ene 2010

Por eso el GIF lo uso por ejemplo hablando de blogs, en imagenes como lineas divisorias, para degradados uso JPG y para botones y banners PNG, el GIF tambien lo uso en barras de navegacion sin mucho detalle, asi optimizo al maximo el tiempo de carga, aunque no todo es imagen, hay veces que es mejor usar bien el CSS.

Plaga · 3 Ene 2010

Yo prefiero el png 😛

Carlosmax · 3 Ene 2010

crystaldream dijo:
Bueno yo lo entiendo asi:

GIF es un formato capaz de ocupar una corta gamma (hasta 256 colores) de colores (por eso pesa menos) y no esta tan desarrollado. Estatico un GIF puede pesar tan poco que no lo crees, pero cuando tiene una secuencia de mas imagenes pesara mucho mas, es como los GIF detalladamente animados como estos:
Enlace eliminado
Usado en banners publicitarios, botones sin mucho color, imagenes meramente planas en 2D y sin mucho detalle de color (no mucho degradado). E imagenes animadas (pierde calidad obviamente).

JPG: Usado en imagenes, basado en pixeles (como la mayoria) resolucion, pueden perder calidad haciendo union de pixeles de un color igual, dando la sensacion de borrosidad o pixelizacion. Se usan millones de colores mas pudiendo mejorar la calidad de imagen. Usado normalmente en fotografias, imagenes, posters, etc...

PNG: Por sus siglas portable network graphics (graficos portatiles para la red) son imagenes con buen detalle, acepta transparencias, se comprimen y soporta animacion (Pero no es muy coumun), es ideal para botones, graficos de la web con detalle de color amplio, vectores pequeñes entre otros usos.

Hay otros formatos meramente vectoriales usados cuando exportas com programas con Inkscape, Illustrator, Freehand o Photoshop.

Crystaldream, no pudiste conseguir otro GIF animado mas gráfico, jajajajajaja!

Felipe · 3 Ene 2010

crystaldream dijo:
Por eso el GIF lo uso por ejemplo hablando de blogs, en imagenes como lineas divisorias, para degradados uso JPG y para botones y banners PNG, el GIF tambien lo uso en barras de navegacion sin mucho detalle, asi optimizo al maximo el tiempo de carga, aunque no todo es imagen, hay veces que es mejor usar bien el CSS.

Los gif transparentes siempre y cuando se tenga fondo blanco... o si no, se pixelan con otro color... y queda bastante feito

eljulio · 4 Ene 2010

Solo para argumentar un poco en el tutorial.

Vamos a utilizar Gif única y exclusivamente cuando querramos conservar la legibilidad del texto, ya que al tratar puramente con los colores el texto (a menos que sea degradado) no va a perder calidad, por ende la legibilidad va a ser la idónea.

Las jpg se utilizan cuando hay demasiados colores en un arte, cuando es un panorama y cuando querramos mostrar la mayor calidad posible de un paisaje.

Con eso de las Animaciones en los Gif's, eso es un Mito, con Photoshop CS3 puedes hacer Gif animados sencillos que pesen una verdadera tontería, yo lo uso para banners animados en sustitucion del Flash y los resultados son muy buenos.

Alan Medina · 4 Ene 2010

Yo prefiero el PNG, por la relación tamaño/calidad y por el canal alpha, que en las imágenes GIF es tremendamente limitado. JPG casi no uso, y para las imágenes de los posts uso GIF

elias · 5 Ene 2010

siempre a la hora de hacer una pagina web se recomienda usar gif, pero optimizado para web, ya que pesan menos... una de las razones principales es porque si utilizamos imagenes png y un viistante esta utilizando un version de internet explorer inferior a la version 7, esta persona va a ver la imagen con un fondo celeste, y no se veera la transparencia de esta...

---(SnakeM)--- · 6 Ene 2010

gracias por el consejo lo tomare en cuenta... muy buena teoria xD... salu2

Tutorial: Utilizar imágenes GIF o JPG.

FabricioV

Felipe

FabricioV

FakeDark

brand_new

SoloNegocios

Epyros

KnxDT

crystaldream

FakeDark

inex

crystaldream

Plaga

Carlosmax

Felipe

eljulio

Alan Medina

elias

---(SnakeM)---

Temas similares