¿Cómo sé qué tipo de imagen usar?

8

Estoy trabajando en un sitio web que utilizará imágenes en varias aplicaciones diferentes, desde botones de acción hasta avatares e imágenes de mayor detalle. ¿Qué factores debo tener en cuenta para decidir si estas imágenes deben ser jpgs, gifs o pngs?

website-design images png jpeg gif BenV
fuente

Respuestas:

6
  • JPG para fotos o grandes diferencias de color
  • PNG para imágenes con transparencia gradual (desvanecimiento de 1 color para borrar)
  • GIF para imágenes con pequeñas paletas de colores

Obviamente, pruebe cada imagen y vea lo que sale al tamaño de archivo más pequeño. Cuanto más pequeño sea el tamaño, mejor. Además, no se preocupe por la transparencia en IE6 para sus PNG, la abuela no está tan preocupada de cómo se ve su sitio solo que puede ver fotos suyas en él.

XOPJ
fuente
3

Tamaño del archivo. Cuanto más pequeño sea el tamaño del archivo, más rápido se descargará para sus usuarios. Así que elija el tamaño de archivo más pequeño que no afecte la calidad de su imagen.

(En general, los JPG se usan para fotografías y los PNG / GIF se usan para imágenes similares a iconos)

John Conde
fuente
1
Agregaría eso para capturas de pantalla de UI / no fotos: use PNG. JPEG tiende a pixelar horriblemente imágenes sin fotos.
scunliffe
1

Soporte de navegador . Creo que es IE6 o IE7 y anteriores no admiten imágenes basadas en png con un fondo transparente correctamente. Por lo general, agrega un poco de color de fondo funky.

Jeremy
fuente
1
Solo IE6 tiene problemas con PNG transparentes. IE7-9 está bien con ellos.
bdadam
IE4 y soporte más reciente PNG paletizado con transparencia : calendar.perfplanet.com/2010/png-that-works/#paletted
Kornel