A continuación veremos y explicaremos las diferencias que tienen entre uno y otro. Lo mejor es empezar detallando en qué consiste cada uno:
Ejemplo de una imágen JPG con muchos colores
Archivos de imágen JPG (JPEG) es un formato que posee una relación compresión / calidad muy buena. Teniendo un tamaño no muy grande ofrece una calidad muy buena de imágen. Tiene soporte hasta los 16,7 millones de colores, esta sería la opción perfecta cuando las imágenes o fotos tienen una calidad profunda y es necesario que se muestre con calidad a un tamaño acorde.
Nos ofrece posibilidad de compresión de la imagen en función de la calidad y/o tamaño que quereamos. La parte "negativa" es que no nos permite realización de imágenes con transparencia de background.
Ejemplo de un logo GIF con pocos colores
Archivos de imágen GIF es un formato muy útil para que podamos crear archivos que no tienen mucha resolución (y ahorrar espacio en web). Ofrecen transparencia, punto importante respecto a los JPG pero la calidad como decíamos antes es muy justa (256 colores max.). Lo que ocurrirá es que al salvar una imágen a formato GIF (Y posea más de 256 colores) verás que baja la calidad de imágen de forma abrupta.
Los GIF también se comprimen, y el tamaño es pequeño.
El uso de GIF es bastante típico en iconos web, ya que no se les suele poner muchos colores, y al permitir la transparencia, pues quedarán bien en las páginas web, permitiendo mostrar los fondos, con sus colores, imágenes etc.
Otro punto interesante del formato GIF, es que es posible crear animaciones de imágen. Últimamente para la creación de estas animaciones es el mayor uso que se le dá.
Veamos ahora donde es más típico usarlos.
Un formato de archivo GIF se utiliza principalmente para iconos y gráficos con áreas sólidas de color (Que tenga pocos colores, ya que sólo acepta 256). Para imágenes o logos con transparencias y con contados colores puede ser muy útil también. Descartado para fotos o imágenes con ciertas calidades.
JPG (JPEG)
Es perfecto el uso de este formato para imágenes, fotos con calidad y mucho colorido, nos ofrecerá una calidad muy buena y posibilidad de compresión al gusto de cada uno, sin perder mucha calidad y sin tener unos tamaños de imágen muy grandes como ocurre en otros formatos como son bmp o png.
PNG
Para imágenes que queramos mantener con muy buena calidad (sin compresión), pueden ser gráficos, mapas, imágenes con mucho texto y que no nos importe el tamaño, ya que sería más grande que comprimido en JPG. Es útil usar este formato también para imágenes que queramos mantener transparencias como pueden ser logos de páginas web, ya que le das máxima calidad y sabes que permite transparencia (Es de los usos más demandados para este formato).
¿Cual de estos formatos soléis usar vosotros?
Buen tutorial, para entender los formatos para Web. Yo suelo usar JPG.