Cuándo usar JPG y Cuándo usar GIF | Programar Plus

Como muchos de ustedes, dedico bastante tiempo a ahorrar gráficos para usarlos en la web. Por eso, cuando navego por la web, me doy cuenta de los errores de optimización. Algo así como cómo un tipógrafo puede detectar una falta de kerning desde una milla de distancia o un fanático del fútbol puede detectar una jugada defensiva fallida con solo ver la formación.

No me estoy metiendo con los consejos para blogs, es un gran blog que disfruto leer, pero acaban de lanzar un nuevo diseño que presenta un gran encabezado rojo en negrita con un tipo de bloque inverso. Esto es clásico Territorio GIF, pero fueron JPG. JPG en este caso provocará artefactos alrededor de las letras como resultado de la compresión. Vea abajo:

artifacting.gif

¿Cuándo debería usar JPG y cuándo debería usar GIF?

El uso de imágenes es una gran parte de CSS, por lo que es bueno tener esta información a mano.

usegif.gif

Use GIF cuando su gráfico use una cantidad relativamente baja de colores, haya formas de bordes duros, áreas grandes de color sólido o necesite hacer uso de transparencia binaria. Estas mismas reglas se aplican exactamente a los PNG de 8 bits. Puede pensar en ellos casi exactamente como archivos GIF. Los PNG no pueden hacer animaciones como los GIF, pero a menudo tienen un tamaño de archivo más bajo.

usejpg.jpg

Use JPG si su gráfico usa una gran cantidad de colores, usa degradados o contiene elementos fotográficos.

Estas son solo reglas generales.

Como todas las reglas, estas están hechas para romperse. Hay muchas circunstancias en las que no se sostienen. Por ejemplo, las imágenes fotográficas que son bastante pequeñas y monótonas pueden funcionar muy bien con GIF. Del mismo modo, los degradados a veces pueden convertirse en efectos geniales con la compresión GIF. La conclusión es que debería hacer algunas pruebas y ver qué se ve mejor. Que la belleza del cuadro de diálogo Guardar optimizado como 4-up en Photoshop.

¿Qué pasa con PNG?

Mmmmm. PNG de 32 bits. Es un formato tan encantador, ¿no? Compresión sin perdidas. Transparencia ALPHA. Corrección gamma. Color de 48 bits. A menudo, tamaños de archivo más pequeños. ¿Qué no se podría amar? Bueno, la razón principal para usar PNG es esa hermosa transparencia, y eso es exactamente lo que no funciona en IE 6 y versiones anteriores. Se puede hacer algún pirateo para que esto suceda, pero a menudo es bastante problemático. Sin duda, PNG es utilizable. Lo uso a menudo porque es el formato nativo de las capturas de pantalla que tomo, pero para la mayoría, PNG no es más que una burla. Tan pronto como IE 6 comience a desaparecer del mapa, veremos un uso más generalizado.

Más: Conceptos erróneos sobre PNG