tipos para paginas jpg imagenes imagen fotografia formatos formato image-formats

image formats - paginas - Formatos de imagen del sitio web: elegir el formato correcto para la tarea correcta



formatos de imagenes para paginas web (6)

Intente mirar este sitio http://www.killersites.com/articles_2005/theory/imagesInWebPages.jsp

Intentan explicar qué usar cuando

Al diseñar un sitio web, ¿cuál considera que es el mejor formato de imagen para una determinada tarea?

Siempre me encuentro en un dilema cuando trato de descubrir qué formato usar para una tarea específica ... como por ejemplo, ¿ debería usar .jpg todo el tiempo? o, ¿ cuándo y por qué debería usar un .png?

Por ejemplo, al tomar el sitio web de Amazon , usan .jpg para las imágenes del producto ( Ejemplo ), .gif para este píxel transparente ( Ejemplo ) y .png para sus Sprites CSS ( Ejemplo )

Por otro lado, Play.com usa un .gif para el logotipo de su sitio web ( Ejemplo ), pero usa .jpg para los productos de su sitio web (como Amazon) ( Ejemplo ) y, en lo que respecta a su página principal, no tienen ningún .png s en eso.

Entonces, ¿qué formatos debo usar para mis sitios web? y ¿por qué debería usarlos?

[ACTUALIZAR]

Gracias a CruellO por este enlace para explicar las diferencias, y también a Dustin por darnos razones sobre qué usar.

PNG debe usarse cuando:

  • Necesita transparencia (ya sea de 1 bit o de transparencia alfa)
  • La compresión sin pérdida funcionará bien (por ejemplo, para un gráfico o logotipo, o una imagen generada por computadora)

JPEG debe usarse cuando:

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

GIF debe ser cuando:

  • PNG no está disponible, como en un software o navegadores muy antiguos
  • La animación es necesaria

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

Los modos PNG incluyen (esto es solo un pequeño subconjunto)

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

Para una mejor compresión en PNG para la web, utilice siempre un modo de paleta. Si encuentra que los archivos PNG son más grandes que los archivos equivalentes GIF, está guardando el PNG en color de 24 bits y el GIF en el modo de paleta (porque un GIF siempre está en modo paleta). Intente convertir al modo de paleta primero.

Si encuentra que sus archivos PNG con transparencia no funcionan correctamente en IE6 mientras sus archivos GIF están, entonces está usando transparencia de 24 bits color + alpha en PNG y modo paleta con un color transparente con GIF. Deberá asegurarse de convertir su PNG en un modo de color con paleta con un color transparente.

PNG también tiene otros modos, como el color de la paleta con transparencia alfa en la paleta. Modos como este no se pueden usar en Photoshop.

FORMATO DE ARCHIVO JPEG

  1. Ideal para imágenes cuando necesita mantener el tamaño pequeño
  2. Buena opción para fotografías
  3. Malo para logos, arte lineal y amplias áreas de color plano

FORMATO DE ARCHIVO GIF

  1. Ideal para efectos animados
  2. Buena opción para imágenes prediseñadas, gráficos planos e imágenes que utilizan colores mínimos y líneas precisas
  3. Buena opción para logotipos simples con bloques de colores

FORMATO DE ARCHIVO PNG

  1. Sin pérdida
  2. Excelente elección cuando la transparencia es un deber
  3. Buena opción para logotipos y line art
  4. No es compatible en todas partes

Puede ver esta infografía para obtener información más detallada, Tipos de archivos de imagen: cuándo usar JPEG, GIF y PNG

Si está almacenando o presentando una gran cantidad de imágenes, vale la pena considerar el nuevo formato de Google WebP, ya que es un 25% más pequeño que PNG / JPG. Tenga en cuenta que esto no es compatible con todos los navegadores en este momento. NÓTESE BIEN. Esto salió en 2010 después de que se publicó esta pregunta.

Debe tener en cuenta algunos factores clave ...

Primero, hay dos tipos de compresión: Lossless y Lossy .

Sin pérdida significa que la imagen se hace más pequeña, pero sin detrimento de la calidad. Pérdida significa que la imagen se hace (incluso) más pequeña, pero en detrimento de la calidad. Si guardó una imagen en formato Lossy una y otra vez, la calidad de la imagen empeoraría progresivamente.

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

Con Indexado , significa que la imagen solo puede almacenar una cantidad limitada de colores (generalmente 256) elegidos por el autor de la imagen, con Direct significa que puede almacenar muchos miles de colores que no han sido elegidos por el autor.

BMP - Sin pérdida / indexado y directo

Este es un formato antiguo. No tiene pérdida (no se pierden datos de imagen al guardar), pero también hay poca o ninguna compresión en absoluto, lo que significa que se guardará ya que BMP da como resultado tamaños de archivo MUY grandes. Puede tener paletas de indexado y directo, pero eso es un pequeño consuelo. Los tamaños de archivo son tan innecesariamente grandes que nadie realmente usa este formato.

Bueno para: Nada realmente. No hay nada que BMP sobresalga en otros formatos o que no lo haga mejor.

GIF - Sin pérdida / solo indexado

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

Las imágenes GIF también pueden ser animadas y tener transparencia.

Bueno para: Logotipos, dibujos lineales y otras imágenes simples que deben ser pequeñas. Solo realmente usado para sitios web.

JPEG - Lossy / Direct

Las imágenes JPEG fueron diseñadas para hacer que las imágenes fotográficas detalladas sean lo más pequeñas posible eliminando información que el ojo humano no notará. Como resultado, es un formato Lossy, y guardar el mismo archivo una y otra vez dará como resultado la pérdida de más datos a lo largo del tiempo. Tiene una paleta de miles de colores y es ideal para fotografías, pero la compresión con pérdidas significa que es malo para logotipos y dibujos: no solo se verán borrosos, sino que también tendrán un tamaño de archivo mayor que los GIF.

Bueno para: fotografías. Además, degradados.

PNG-8 - Sin pérdida / indexado

PNG es un formato más nuevo, 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 admitir animaciones como GIF (puede hacerlo, pero solo Firefox parece soportarlo, a diferencia de la animación GIF que es compatible con todos los navegadores). En segundo lugar, tiene algunos problemas de soporte con navegadores más antiguos como IE6. En tercer lugar, un software importante como Photoshop tiene una implementación muy pobre del formato. (¡Maldito seas, Adobe!) PNG-8 solo puede almacenar 256 colores, como GIF.

Bueno para: Lo principal que PNG-8 hace mejor que los GIF es tener soporte para Alpha Transparency.

Nota importante: Photoshop no es compatible con Alpha Transparency para archivos PNG-8. (¡Maldita sea, Photoshop!). Sin embargo, hay maneras de convertir Photoshop PNG-24 a archivos PNG-8 conservando su transparencia. Un método es PNGQuant , y otro es guardar sus archivos con Fireworks .

PNG-24 - Sin pérdida / directo

PNG-24 es un gran formato que combina la codificación Lossless con el color directo (miles de colores, al igual que JPEG). Es muy parecido a BMP en ese sentido, excepto que PNG realmente comprime imágenes, por lo que da como resultado archivos mucho más pequeños. Lamentablemente, los archivos PNG-24 seguirán siendo mucho más grandes que los archivos JPEG, GIF y PNG-8, por lo que aún debe considerar si realmente desea usar uno.

Aunque los PNG-24 permiten miles de colores mientras tienen compresión, no están destinados a reemplazar imágenes JPEG. Una fotografía guardada como PNG-24 probablemente sea al menos 5 veces más grande que la imagen JPEG equivalente, con muy poca mejora en la calidad visible. (Por supuesto, este puede ser un resultado deseable si no le preocupa el tamaño del archivo y desea obtener la mejor calidad de imagen posible).

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

¡Espero que eso ayude!

Los archivos JPEG son para fotos. Veo archivos JPEG con texto de vez en cuando y se ven horribles. El texto es mejor para el texto, de lo contrario use PNG.

Si no es una foto, pero quieres una gráfica de ella, utiliza un PNG. Un PNG es casi siempre más pequeño que el gif equivalente y no perderá calidad como un archivo JPEG. Un PNG equivalente a un JPEG generalmente será mucho más grande (suponiendo que sea fotorrealista). Puede haber momentos en que esto aún sea deseable.

PNG permite 8 bits de transparencia, pero si tiene que admitir IE, encontrará que continuamente se niegan a admitirlo correctamente. Soportan un solo bit de transparencia en una imagen de 8 bits (esencialmente lo mismo que gif) hasta donde yo sé. También hay numerosos hacks para obtener transparencia de 8 bits para trabajar en IE. Nunca me he molestado, yo mismo.

En resumen:

  • Fotos → jpg
  • ! Fotos → png