Formatos de imagen Web site: Elección del formato adecuado para la tarea correcta

Question

En el diseño de un sitio web, ¿cuáles considera que el mejor formato de imagen a utilizar para una tarea en particular?

siempre me encuentro en un dilema cuando se trata de averiguar qué formato utilizar para una tarea específica ... como por ejemplo, ¿Debo usar todo el .jpg? o cuándo y por qué debería utilizar un .png?

Por ejemplo, tomando Amazon 's sitio web, que utilizan . jpg para imágenes de productos ( Ejemplo ), < strong> .gif para este píxel transparente ( Ejemplo ) y .png por sus Sprites CSS ( Ejemplo )

Por otro lado, Play.com utilizar un .gif para su logotipo del web site ( Ejemplo ), pero el uso de .jpg para sus productos de sitio web (como Amazon) ( Ejemplo ) y como lo que a su página principal va, que no tiene ninguna .png s en ella.

¿Qué formatos debo usar para mis sitios web? y por qué debería utilizarlos?

[ACTUALIZACIÓN]

CruellO este enlace para explicar las diferencias, y también Dustin para dar razones sobre lo que debe utilizar <. / p>

Answer 1

Los archivos JPEG son para las fotos. Veo JPEG con texto en ellos de vez en cuando y que sólo un aspecto horrible. El texto es el mejor para texto, de lo contrario usar PNG.

Si no es una foto, pero desea un gráfico de la misma, utilice un PNG. Un PNG es casi siempre menor que el gif equivalente y no perderá la calidad como un archivo JPEG. Un equivalente de un PNG JPEG normalmente será mucho más grande (asumiendo que es fotorrealista). Puede haber ocasiones en que esto es todavía deseable.

PNG sí permite durante 8-bits de transparencia, pero si usted tiene que apoyar IE, encontrará que continuamente se niegan a apoyar esa correctamente. Ellos DO apoyar un solo bit de transparencia de una imagen de 8 bits (esencialmente el mismo que el GIF) en la medida de lo que sé. También hay numerosos trucos para conseguir la transparencia de 8 bits para trabajar en el IE. Nunca he molestado, yo mismo.

En resumen:

• Fotos → jpg
• Fotos → png

Answer 2

Se debe tener en cuenta algunos factores clave ...

En primer lugar, hay dos tipos de compresión: Lossless y con pérdida .

Lossless significa que la imagen se hace más pequeño, pero sin detrimento de la calidad. Lossy significa que la imagen se hace (incluso) más pequeño, pero a un detrimento de la calidad. Si ha guardado una imagen en un formato con pérdida una y otra vez, la calidad de la imagen podría empeorar progresivamente más y más.

También hay diferentes profundidades de color (paletas): Indexed color y de color directo .

indexado que significa que la imagen sólo puede almacenar un número limitado de colores (generalmente 256) que son elegidos por el autor de la imagen, con Directo Esto significa que usted puede almacenar muchos miles de colores que no han sido elegidas por el autor.

---

BMP - Lossless / indexado y Direct

Este es un formato antiguo. Es Lossless (sin datos de la imagen se pierde en guardar) pero también hay poco o ningún tipo de compresión, lo que significa ahorro como resultado de BMP en archivos muy grandes. Puede tener paletas de ambos indexado y directa, pero eso es un pequeño consuelo. Los tamaños de los archivos son tan innecesariamente grande que nadie realmente utiliza este formato.

Bueno para: En realidad nada. No hay nada BMP sobresale en, o no se hace mejor por otros formatos.

---

GIF - Lossless / indexado solamente

GIF utiliza compresión sin pérdidas, lo que significa que se puede guardar la imagen una y otra vez y nunca perder ningún dato. Los tamaños de los archivos son mucho más pequeños que BMP, debido a la buena compresión se utiliza realmente, pero sólo pueden almacenar una paleta indexada. Esto significa que sólo puede haber un máximo de 256 colores diferentes en el archivo. Eso suena como una pequeña cantidad bastante, y lo es.

Las imágenes GIF también pueden ser animados y tienen la transparencia.

Bueno para: logotipos, dibujos de líneas, y otras imágenes simples que deben ser pequeñas. En realidad sólo se utiliza para los sitios web.

---

JPEG - pérdida / Directo

Los archivos JPEG imágenes fueron diseñados para hacer que las imágenes fotográficas detalladas lo más pequeño posible mediante la eliminación de la información que el ojo humano no se dará cuenta. Como resultado de ello se trata de un formato con pérdida, y guardar el mismo archivo una y otra vez dará lugar a más datos que se pierden con el tiempo. Tiene una paleta de miles de colores y por lo tanto es ideal para fotografías, sino que significa la compresión con pérdida es malo para logotipos y dibujos: No sólo van a verse borroso, pero este tipo de imágenes también tendrán un archivo de mayor tamaño en comparación con los GIF!

Bueno para: Fotografías. Además, los gradientes.

---

PNG-8 - Lossless / indexado

PNG es un formato más reciente, y PNG-8 (la versión indexada de PNG) es realmente un buen reemplazo para los GIF. Lamentablemente, sin embargo, tiene algunos inconvenientes: En primer lugar, no puede apoyar la animación como GIF puede (así que puede, pero sólo Firefox parece apoyar que, a diferencia de la animación GIF que es soportado por todos los navegadores). En segundo lugar, tiene algunos problemas de soporte técnico con navegadores antiguos como IE6. En tercer lugar, el software como Photoshop importante tiene muy mala implementación del formato. (Maldito seas, Adobe!) PNG-8 sólo puede almacenar 256 colores, al igual que los archivos GIF.

Bueno para:. Lo principal que PNG-8 hace mejor que GIF es tener el apoyo de Transparencia alfa

Nota importante: Photoshop no soporta Alpja Transparencia para archivos PNG-8. (Maldito seas, Photoshop!) Hay maneras de convertir Photoshop PNG-24 a archivos PNG-8, conservando su transparencia, sin embargo. Un método es pngquant , otro es para guardar los archivos con fuegos artificiales .

---

PNG-24 - Lossless / Direct

PNG-24 es un gran formato que combina la codificación sin pérdida de color directo (miles de colores, al igual que JPEG). Es muy parecido a BMP en ese sentido, a excepción de que en realidad PNG comprime las imágenes, lo que se traduce en archivos mucho más pequeños. Desafortunadamente archivos PNG-24 todavía será mucho más grande que JPEG, GIF y PNG-8, por lo que aún necesita considerar si realmente desea utilizar uno.

A pesar de que PNG-24 permiten que miles de colores, mientras que tener una compresión, que no están destinados a sustituir las imágenes JPEG. Una fotografía guardada como un archivo PNG-24 es probable que sea por lo menos 5 veces más grande imagen JPEG que el equivalente, con muy poca mejora en la calidad visible. (Por supuesto, esto puede ser un resultado deseable si no está preocupado por el tamaño del archivo, y desea obtener la mejor calidad de imagen que pueda.)

Al igual PNG-8, PNG-24 soporta alfa-transparencia, también.

Espero que ayude!

Answer 3

PNG debe utilizarse cuando:

• Es necesario transparencia (ya sea de 1 bit o transparencia alfa)
• La compresión sin pérdida funcionará bien (tal como para un gráfico o logo o una imagen generada por ordenador)

JPEG debe ser usado cuando:

• La compresión sin pérdida no funcionará bien (tal como una fotografía)
• Se necesita a todo color

GIF debería ser cuando:

• PNG no está disponible, como por ejemplo en el software de los navegadores muy viejos o
• La animación es necesario

A pesar de los mitos en sentido contrario, PNG supera a GIF en la mayoría de los aspectos. PNG es capaz de todos los modos de imagen GIF, aparte de animación, y cuando se utiliza el mismo modo de imagen, PNG tendrá una mejor compresión debido a su algoritmo de DESINFLE superior en comparación con LZW. PNG también es capaz de modos adicionales que el GIF no puede hacer, como el color de 24 bits, y la transparencia alfa, pero aquí es donde es posible que encuentre problemas en la web. La transparencia alfa tiene problemas de compatibilidad con IE6 que están bien documentados (aunque existen hacks para moverse).

Los modos incluyen PNG (esto es sólo un pequeño subconjunto)

• Paleta de colores de 2 a 256 colores (como GIF)
• paleta de colores de 2 a 256 colores, con color transparente (como GIF)
• True Color (color de 24 bits)
• color verdadero con canal alfa (24 bits de color + 8 bits de transparencia alfa)

Para una mejor compresión de PNG para la web, siempre utilizar un modo de paleta. Si encuentra archivos PNG son más grandes que los archivos GIF equivalentes, entonces usted está ahorrando el PNG en color de 24 bits y el GIF en modo de paleta (debido a que un GIF siempre está en modo de paleta). Intenta convertir a modo de paleta en primer lugar.

Si usted encuentra que sus archivos PNG con transparencia no funcionan correctamente en IE6, mientras que los archivos GIF son, a continuación, se utiliza 24 bits de color + transparencia alfa en PNG y el modo de paleta con un color transparente con el GIF. Usted tendrá que asegurarse de que usted convierte su PNG en un modo de color con paleta con un color transparente.

PNG también tiene otros modos tales como el color paleta con transparencia alfa en la paleta. Modos como esta no se pueden utilizar en Photoshop.

Answer 4

Trate de ver este sitio http://www.killersites.com/articles_2005/theory/imagesInWebPages.jsp

Se tratan de explicar lo que debe usar cuando

Answer 5

Si va a guardar o presentar un gran número de imágenes del nuevo formato de Google WebP podría valdría la pena considerar, ya que es 25% más pequeño que PNG / JPG. Tenga en cuenta que esto no es soportado por todos los navegadores en este momento. NÓTESE BIEN. Esto salió en 2010 después de esta pregunta fue publicada.

Answer 6

Formato JPEG

1. Excelente para las imágenes cuando se necesita para mantener el tamaño pequeño
2. Una buena opción para las fotografías
3. malo para logotipos, gráficos de línea, y amplias zonas de color plano

GIF FORMATO DE ARCHIVO

1. Excelente para efectos de animación
2. Una bonita opción para el arte clip, gráficos planos, y las imágenes que utilizan colores mínimos y líneas precisas
3. Una buena opción para los logotipos simples con bloques de colores

PNG FORMATO DE ARCHIVO

1. Lossless
2. Excelente elección cuando la transparencia es una necesidad
3. Una buena opción para los logotipos y gráficos de línea
4. No se admite en todas partes

Se puede ver esta infografía para obtener información más detallada, Imagen Tipos de archivo: al usar JPEG, GIF y PNG