¿Qué formatos de gráficos web usar?

Los sitios web pueden contener gráficos en formato JPEG, GIF, PNG, SVG. ¿Cuáles deberían usarse y cuándo?

Cuando usar JPG

• imágenes fotográficas
• cuando la compresión no importa

Cuando usar PNG

• cuando necesitas transparencia
• cuando tienes patrones (fondos)

Cuando usar GIF

• cuando necesita animación compatible con versiones anteriores *
• cuando una imagen se compone principalmente de un puñado de colores (2-16) **
• cuando no necesita transparencia y tiene patrones (aunque se prefiere png)

_{* Con el aumento de la animación CSS como una opción viable para casi todos los navegadores, el uso del formato .GIF es cada vez menos el formato de referencia para la animación web. .jpg, .pngy .giftodos pueden configurarse para tener una función "animada" con el uso de CSS. Aunque los gifs animados se pueden usar de manera atractiva en el diseño web en ciertos casos, las excepciones son raras, por lo que es mejor evitarlas.}

_{** (las .gifimágenes están restringidas a solo 256 colores dentro de su paleta).}

(migrado de una pregunta duplicada)

Esto depende totalmente del tipo de imagen que desea almacenar.

• PNG es un formato de compresión sin pérdidas más adecuado para gráficos de mapa de bits "tipo vector" (es decir, gráficos con áreas grandes y regulares con el mismo color y bordes claramente definidos; gráficos que contienen texto claro).

• SVG es un formato vectorial , más adecuado para contener gráficos vectoriales (en resumen, colecciones de elementos geométricos en lugar de colecciones de píxeles). SVG es ilimitadamente escalable, mientras que los gráficos de mapa de bits pierden calidad cuando se amplían.

• JPG es un formato de compresión con pérdida (entre otras cosas, elimina los matices de la imagen invisibles para el ojo humano para ahorrar espacio de almacenamiento). Es el más adecuado para fotografías; Debido a su método de compresión, no es adecuado para ilustraciones vectoriales o texto.

Compatibilidad del navegador:

• Los gráficos PNG son compatibles en todos los navegadores, con la excepción de IE 6 si el PNG contiene transparencia alfa (las partes transparentes se mostrarán en gris sólido), y todas las versiones de IE si el PNG está dentro de un elemento HTML con una opacidad inferior a 100 % (pero ese es un caso límite).

• SVG no siempre es una opción porque el soporte del navegador no es 100% en este momento . También puede haber otras diferencias de comportamiento con una <img>etiqueta normal . Use esto solo si sabe lo que está haciendo.

• JPG estándar es compatible con todos los navegadores siempre que se guarde en modo RGB en lugar de CMYK (si su programa no hace la distinción, probablemente sea el valor predeterminado).

Debe tener en cuenta algunos factores clave ...

Primero, hay dos tipos de compresión: sin pérdida y con pérdida .

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

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

• Indexado significa que la imagen solo puede almacenar un número limitado de colores (generalmente 256), controlados por el autor, en algo llamado Mapa de colores
• Directo significa que puede almacenar miles de colores que no han sido elegidos directamente por el autor.

BMP : sin pérdidas / 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, lo que significa que guardar como 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 los archivos son tan innecesariamente grandes que nadie realmente usa este formato.

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

GIF : sin pérdida / solo indexado

GIF utiliza compresión sin pérdidas, lo que significa que puede guardar la imagen una y otra vez y nunca perder ningún dato. Los tamaños de archivo son mucho más pequeños que BMP, porque en realidad se utiliza una buena compresión, pero solo puede almacenar una paleta indexada. Esto significa que para la mayoría de los casos de uso , 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 se usa realmente para sitios web.

JPEG : con pérdida / directa

Las imágenes JPEG fueron diseñadas para hacer imágenes fotográficas detalladas lo más pequeñas posible al eliminar información que el ojo humano no notará. Como resultado, es un formato con pérdida, y guardar el mismo archivo una y otra vez dará como resultado que se pierdan más datos con el tiempo. Tiene una paleta de miles de colores, por lo que es ideal para fotografías, pero la compresión con pérdida significa que es malo para logotipos y dibujos lineales: no solo se verán borrosos, ¡sino que esas imágenes también tendrán un tamaño de archivo más grande en comparación con los GIF!

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

PNG-8 - Sin pérdidas / 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 (bueno, sí, pero solo Firefox parece admitirlo, a diferencia de la animación GIF que es compatible con todos los navegadores). En segundo lugar, tiene algunos problemas de soporte con navegadores antiguos como IE6. En tercer lugar, un software importante como Photoshop tiene una implementación muy pobre del formato. (¡Maldita sea, 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 finalmente ha agregado soporte para transparencia alfa en sus últimas versiones. Sin embargo, si tiene uno anterior, hay formas de convertir Photoshop PNG-24 a PNG-8 manteniendo su transparencia. Un método es PNGQuant , otro es guardar sus archivos con Fireworks .

PNG-24 - Sin pérdidas / Directo

PNG-24 es un gran formato que combina la codificación sin pérdida con el color directo (miles de colores, como JPEG). Es muy parecido a BMP en ese sentido, excepto que PNG realmente comprime las imágenes, por lo que resulta en archivos mucho más pequeños. Desafortunadamente, los archivos PNG-24 seguirán siendo mucho más grandes que los 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 una 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 alfa-transparencia.

SVG - Sin pérdidas / Vector

Un tipo de archivo que actualmente está creciendo en popularidad es SVG, que es diferente de todo lo anterior en que es un formato de archivo vectorial (los anteriores son todos de trama ). Esto significa que en realidad se compone de líneas y curvas en lugar de píxeles. Cuando acercas una imagen vectorial, aún ves una curva o una línea. Cuando acercas una imagen rasterizada, verás píxeles.

Por ejemplo:

Esto significa que SVG es perfecto para logotipos e iconos que desea conservar la nitidez en las pantallas Retina o en diferentes tamaños.

Además, los archivos SVG se escriben usando XML, por lo que pueden abrirse y editarse en un editor de texto, para que pueda manipularse sobre la marcha, si lo desea. Por ejemplo, podría usar JavaScript para cambiar el color de un ícono SVG en un sitio web como si fuera texto (es decir, no necesita una segunda imagen).

¡Espero que eso ayude!

JPG:

Ventajas:

• Hay muchos niveles de compresión diferentes disponibles
• Fácil de manipular con todo el editor de imágenes.

Inconvenientes:

• Artefactos de compresión

Usos :

• Grandes fotos o imágenes con muchos colores.
• Cuando se necesita una alta compresión

PNG:

Ventajas:

• Transparencia con alfa!
• Muchos colores
• Puede reemplazar jpg

Inconvenientes:

• Menos compresión que JPG (pero no tanto)
• Incompatible con IE6 (y 7, creo): debe usar parche o pirateo para esto. ¿Pero a quién le importa? A debe usar;)

Usos :

• Fotos / imágenes pequeñas o medianas con mucho color
• A debe usar si desea transparencia de degradado
• Íconos
• Logos

GIF:

Ventajas:

• Puede ser animado
• Muy claro si usa solo un poco de color (como 8-16 o 32 colores diferentes)
• Transparencia

Inconvenientes:

• No puede tener más de 255 colores.
• Un gif animado puede hacer que la gente huya
• Sin alfa para transparencia (¡es transparente o no!)

Usos :

• Gif animados (los uso principalmente en boletines)
• Íconos
• Favicon animado \ o /
• Logos

Los sitios web pueden contener gráficos en formato JPEG, GIF, PNG, SVG. ¿Cuáles deberían usarse y cuándo?

Para fotos:

JPEG si no hay necesidad de transparencia. PNG para gráficos fotográficos que necesitan transparencia.

Si bien no es 100% cierto, es una buena regla general. Consulte las otras respuestas a esta pregunta para obtener más información sobre los otros formatos. Además, consulte qué formato de imagen ráster es mejor para mostrar imágenes digitalmente cuando no hay transparencia; JPEG o PNG? y una selección de nuestras etiquetas de formato de archivo , como jpeg , png , gif y svg para obtener más información.

Para gráficos:

SVG con PNG / JPEG Fallback.

No hay absolutamente ninguna razón para no proporcionar SVG en este día y edad. Se implementan casi de la misma manera que cualquier imagen normal, y son mucho más versátiles.

Por lo tanto, el flujo de trabajo para cualquier diseñador de sitios web moderno no se ha cambiado por completo, se ha actualizado. Todavía prepara y sirve PNG y JPEG para gráficos, pero solo son alternativas para cuando SVG no funciona.

¿Qué es un SVG?

SVG significa Scalable Vector Graphic. Sin ser demasiado técnico, la diferencia entre los SVG y otros formatos basados ​​en píxeles es que los datos para la composición del gráfico se almacenan como cálculos matemáticos. Cuando un navegador abre un SVG, tiene que hacer cálculos para representar el SVG. Los navegadores más antiguos no tienen la funcionalidad para hacer estos cálculos o manejar SVG, además, las computadoras más antiguas podrían haber tenido dificultades para representar una página web SVG pesada incluso si hubieran podido usarse hace 10 años (lo cual no podían). Los datos para un SVG se almacenan en formato hexadecimal (base-16), lo que permite optimizarlo en tamaños de archivo muy pequeños en comparación con el almacenamiento binario de datos de píxeles.

Aquí hay algunos recursos para aprender más sobre cómo lograr la técnica de recuperación:

1. Dominar el uso de SVG para una retina web, fallbacks con script PNG

2. Revisando el flujo de trabajo SVG para el rendimiento y el desarrollo progresivo con URI de datos transparentes

3. Trucos CSS - SVG Fallbacks

El siguiente fragmento de JavaScript, copiado del primer enlace, es todo lo que necesita para detectar la compatibilidad con SVG en la mayoría, si no en todos los navegadores, y cambiar el nombre del archivo para proporcionar fallos de PNG.

function supportsSVG() {
    return !! document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect;  
}
if (!supportsSVG()) {
    var imgs = document.getElementsByTagName('img');
    var dotSVG = /.*\.svg$/;
    for (var i = 0; i != imgs.length; ++i) {
        if(imgs[i].src.match(dotSVG)) {
            imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
        }
    }
}

<DA01>

Cuando usar SVG

• Siempre que pueda, ya que normalmente es el tamaño de archivo más pequeño y la resolución independiente, lo que significa que puede manejar cualquier relación de píxeles del dispositivo (pantallas de retina, por ejemplo)
• Cuando su arte es adecuado para formatos de archivos vectoriales (iconos en particular)
• Cuando tiene el lujo de tener que apuntar solo a los navegadores modernos (el soporte SVG es relativamente nuevo para algunos navegadores)

Cuándo usar fuentes de íconos

• Cuando necesitas un amplio conjunto de iconos
• Cuando, como SVG, desea los beneficios de los formatos de archivo vectorial
• Cuando tiene el lujo de tener que apuntar solo a los navegadores modernos (el soporte de fuentes web es relativamente nuevo para algunos navegadores)

</DA01>

¿Por qué SVG es la mejor opción?

• Escale maravillosamente a cualquier tamaño desde un archivo (no es necesario servir @2x.jpgpara pantallas de retina o estirar el gráfico)

• Muy a menudo, tamaños de archivo más pequeños que JPEG y PNG

• Casi nunca tiene que sacrificar la calidad en el logo

• Facilita el diseño receptivo de muchas maneras

Notas

• El soporte es menos común para SVG en línea, por lo que por seguridad es mejor vincular los archivos a través de etiquetas de imagen en este momento. (Si va a reutilizar el gráfico en otro lugar, es decir, los iconos de navegación, de todos modos desea vincularlo externamente para que el navegador lo almacene en caché y ahorre tiempo al cargar otras páginas).

• IE no es compatible SVGZ, el formato comprimido disponible para gráficos SVG. Para una mayor compatibilidad entre navegadores y versiones anteriores recientes, es mejor usar SVG 1.0en este momento.

• Todavía puede hacer hojas de sprites con SVG de la misma manera que lo haría con otros formatos de imagen, pero en lugar de usar valores de píxeles reales para definir las coordenadas x e y de cada imagen, use valores basados ​​en porcentajes.

  ¿Qué pasa con los casos en que los valores porcentuales no son lo suficientemente precisos?

  Debes construir la hoja de sprites con el objetivo de poder dividir tanto el ancho como la altura entre 100 y lograr números enteros, o números con 1 decimal como máximo. Como ejemplo, si está organizando 7 x 10px x 10pxiconos juntos en una hoja de sprite, no cree un lienzo que sea 70px x 10px.

  ¿Por qué? Porque cuando divides 100 por 7, obtienes 14.285714285714285714285714285714, lo que, como porcentaje redondeado, definitivamente causaría algunas matemáticas imperfectas en alguna parte.

  En su lugar, cree un 80px x 10pxlienzo y no se preocupe por el 12.5% ​​vacío. Los íconos tendrán exactamente incrementos del 12.5%, lo cual, no hace falta decir que es mucho más fácil de trabajar.

Debe usar .jpeg para fotografías o imágenes con muchos colores. El tipo de archivo .gif es útil para imágenes animadas o donde se necesita transparencia, pero su uso está disminuyendo. El formato más popular es .png, que también puede ofrecer transparencia alfa y una mayor gama de colores que el tipo de archivo .gif. Para obtener una descripción más detallada, consulte el artículo de Jonathan Snook, Qué formato de imagen es el mejor .

Una buena fórmula podría ser utilizar JPEG para fotos y PNG para todo lo demás.

Por supuesto, si tiene gráficos que no necesitan transparencia alfa y tienen menos de 256 colores, GIF puede ahorrarle algo de ancho de banda, pero definitivamente está a punto de desaparecer.

Utilizo PNG para casi todo, ya que no tiene los artefactos de compresión que JEPG tiene, y es casi universalmente compatible en estos días (he visto un par de editores de sitios que no le gustan, como la versión de escritorio del software SiteBuilder de Homestead, pero eso es todo).

Debe elegir su imagen en base al nivel de compresión / calidad que desea lograr.

La Web tiene que ver con la velocidad de descarga de información, y cuanto menor es el tamaño de una imagen, mejor es la velocidad de carga de una página.

JPG : para imágenes con millones de colores (fotografía)

PNG y GIF : para transparencia y poca cantidad de colores. Lo uso solo con 64/128 colores diferentes, pero generalmente con menos de 256. (iconos, imágenes vectoriales que deben ser ráster, color de alto contraste, gradientes con pocos colores)

¿Cómo elegir entre PNG y GIF?

En primer lugar, compruebe la optimización de la compresión / calidad y elija quién le dará mejores resultados por menos peso. Todavía uso ampliamente GIF, y a veces es mejor que PNG para el mismo tipo de imágenes. No discrimine un formato por otro, simplemente marque el que parezca más adecuado para su optimización.

• Elija GIF: para imágenes animadas con no más de 256 colores
• Si no necesita animación, puede elegir el PNG. Elija el PNG correcto: hay 2 tipos de 8 bits y 24 bits. 8 bits tiende a ser una mejor versión del GIF sin animación para calidad / compresión (pero como dije no siempre, échale un vistazo cuando guardes para la Web). 24 bits no tiene compresión (así que úselo apenas para obtener un efecto gráfico especial) y tiene el valor alfa para usar la transparencia de color (los navegadores IE antiguos no lo admiten si no aplica un filtro especial o comportamiento .htc a la página )

Puedo ver en varios artículos que el 90% de los diseñadores web todavía piensan que PNG es solo un formato sin pérdidas . Muchos profesionales ni siquiera saben sobre la existencia de PNG-8.

Pero obviamente PNG-8 es lo que deberían usar para la web, en lugar de PNG-32. Porque proporciona 2x-5x tamaños de archivo más pequeños con una calidad aceptable.

A veces es difícil decidir qué compresión es mejor para una imagen. Por ejemplo, si no es una foto, pero tiene muchos colores y degradados. Esa herramienta permite comparar visualmente ambos formatos con pérdida y elegir la mejor variante.

Aquí hay una buena herramienta para comparar formatos PNG y JPEG con pérdida: PNG vs JPEG

Los principales formatos de gráficos web son GIF, JPG y PNG. Es importante conocer las diferencias y elegir el mejor formato para cada imagen, para que las imágenes se vean bien y sean lo más compactas posible para que aparezcan rápidamente en la pantalla del visitante de su sitio.

GIF - Formato de información gráfica

El formato de gráficos GIF es mejor para imágenes con solo unos pocos colores: cuadros, gráficos o texto configurado como gráficos. Cuantos menos colores use, más eficientes serán los archivos GIF. Archivos GIF ...

• puede contener hasta 256 colores.

• admite una función llamada transparencia, en la que un color de los 256 colores se configura como transparente. Esto evita que sus gráficos se vean como si estuvieran en cuadros, porque el fondo del archivo es invisible, lo que permite que se muestre el fondo de la página web.

• puede ser animado. Dentro de un solo archivo se almacenan muchos cuadros y un índice que indica cuánto tiempo se debe mostrar cada cuadro. El GIF animado se trata como un archivo de imagen estándar, por lo que se carga con la etiqueta estándar.

• no tienen pérdidas, lo que significa que la calidad de imagen no se degrada por el proceso de compresión.

• se pueden entrelazar para que parezcan desvanecerse, de menor a mayor calidad, durante la carga. Esto le da a sus visitantes algo para mirar mientras esperan.

• no son buenas para las fotografías: pierde calidad y los archivos no serán compactos. Utilice el formato de gráficos JPG para fotos.

JPG - Grupo Conjunto de Expertos en Fotografía

El formato de gráficos JPG es el mejor para imágenes con muchos colores, como fotografías o ilustraciones escaneadas. Archivos JPG ...

• puede contener hasta 16 millones de colores.

• admite compresión variable. Puede aplicar más o menos compresión a cada imagen individual. Cuanta más compresión aplique, más calidad perderá. Si bien los tamaños de archivo se pueden hacer bastante pequeños con este formato de gráficos, a menudo debe comprometer el tamaño del archivo y la calidad de la imagen. El nuevo software de gráficos le ofrece una vista previa antes de guardar, esto le permite experimentar con varios niveles de compresión para elegir el mejor compromiso entre calidad y tamaño de archivo.

• vienen en tres tipos: línea base o estándar, línea base optimizada o estándar optimizada y progresiva. La línea de base fue diseñada para navegadores que consideramos antiguos en la actualidad (como Internet Explorer versión 1). La línea base optimizada ofrece más compresión que la línea base estándar, y prácticamente todos los navegadores de hoy en día pueden leer dicha imagen. Un JPG progresivo, como un archivo GIF entrelazado, se construye a medida que se descarga, pasando de una representación burda de la imagen a su aspecto final. Si bien este es un buen formato de gráficos web, los navegadores antiguos no son compatibles con este formato.

• no son buenas para imágenes con pocos colores, como texto configurado como gráficos o imágenes con áreas de colores planos. Si usa JPG para estos gráficos, serán más grandes de lo necesario y se verán "moteados".

PNG - Gráficos de red progresivos

PNG es el formato de gráficos web más nuevo. Archivos PNG ...

• son compatibles con todos los navegadores modernos. Es posible que estos archivos no aparezcan en navegadores antiguos, por lo que el uso de este formato de gráficos puede hacer que algunos de los visitantes de su sitio web no puedan ver sus imágenes.

• son compactos y versátiles y pueden combinar las mejores características de GIF y JPG, como la capacidad de tener fondos transparentes o la capacidad de contener imágenes con millones de colores.

• todavía no se usan ampliamente, principalmente porque no son compatibles con navegadores antiguos.

¿Cuándo usar cuál?

Elegir el formato de gráficos web adecuado puede garantizar que sus imágenes se vean bien y aparezcan rápidamente en la computadora de su visitante. Elegir el formato incorrecto hace que sus imágenes se vean mal y tarden una eternidad en descargar.

El error gráfico más común que las personas cometen en la Web es usar el formato gráfico incorrecto para sus imágenes. Pero la elección es realmente bastante simple ...

• Si sus gráficos tienen muchos colores (como una foto), elija JPG.

• Si sus gráficos tienen pocos colores, elija GIF. Cuando use GIF, intente con paletas optimizadas que contengan solo los colores utilizados; pueden reducir el tamaño de los archivos a la mitad.

En un mundo ideal, todo se reduciría a esto:

JPEG: para imágenes ráster y fotografías

PNG: para gráficos vectoriales (p. Ej. Logotipos, etc.)

Desafortunadamente, Internet Explorer 6 (aún, desafortunadamente, una gran cantidad de usuarios) no admite la transparencia en las imágenes PNG. Entonces, si PNG contiene transparencia, puede tener problemas. Afortunadamente, hay un truco que se puede utilizar para evitar este problema, aunque no de una manera elegante:

http://24ways.org/2007/supersleight-transparent-png-in-ie6 http://www.alistapart.com/articles/pngopacity/

(EDITAR: Además, creo que incluso IE 7 tiene problemas con algunas características de PNG).

Los GIF solo tienen dos ventajas sobre PNG:

1. (Casi) soporte perfecto para el navegador (aunque no hay transparencia, por lo que esto no es una gran ventaja)
2. Pueden ser animados, sin embargo, los gráficos animados deben usarse con moderación en el diseño web.

EDITAR: PNG siempre es preferible a GIF donde es compatible y utilizable, ya que PNG es un formato abierto.

Como la mayoría señaló, JPEG es bueno para fotografía y PNG bueno para gráficos con textos y gráficos. GIF tiene la única ventaja de que admite animación, que debe usarse con mucho cuidado.

Un buen consejo es exportar su imagen como JPEG y PNG. Casi siempre el formato que es mejor para sus resultados gráficos en un archivo más pequeño. Las fotografías se vuelven más pequeñas como JPEG y los gráficos más pequeños como PNG. Entonces, si no está seguro de cuál elegir, puede ser un buen decisivo.