¿Qué formatos de gráficos web usar?

Cuándo usar JPG

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

Cuándo usar PNG

• cuando necesitas transparencia
• cuando tienes patrones (fondos)

Cuándo usar GIF

• cuando necesite una 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 auge 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 .gifse pueden configurar para tener una característica "animada" con el uso de CSS. Aunque los gifs animados pueden usarse de manera atractiva en el diseño web en ciertos casos, las excepciones son raras, por lo que tiende a ser mejor evitarlos.}

_{** ( .giflas imá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 desee almacenar.

• PNG es un formato de compresión sin pérdidas que se adapta mejor a gráficos de mapa de bits "similares a vectores" (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 matices en la imagen invisibles al ojo humano para ahorrar espacio de almacenamiento). Es 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 con todos los navegadores, con la excepción de IE 6 si el PNG contiene transparencia alfa (las partes transparentes se representarán como un 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 extremo).

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

• El 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 predeterminado).

Debe tener en cuenta algunos factores clave...

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

• Lossless significa que la imagen se hace más pequeña, pero sin detrimento de la calidad.
• Con pérdida significa que la imagen se hace (aún) 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 .

• Indexado significa que la imagen solo puede almacenar una cantidad limitada de colores (generalmente 256), controlados por el autor, en algo llamado Mapa de colores.
• Directo significa que puede almacenar muchos miles de colores que no han sido elegidos directamente por el autor

BMP - Lossless / Indexado y Directo

Este es un formato antiguo. Es Lossless (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 Indexed y Direct, pero eso es un pequeño consuelo. Los tamaños de los archivos son tan innecesariamente grandes que nadie usa realmente este formato.

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

GIF : sin pérdidas/solo indexado

GIF utiliza compresión sin pérdida, 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 usa 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 se pueden animar 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 / Directo

Las imágenes JPEG se diseñaron para hacer imágenes fotográficas detalladas lo más pequeñas posible mediante la eliminación de información que el ojo humano no nota. Como resultado, es un formato con pérdida, y guardar el mismo archivo una y otra vez resultará en la pérdida de 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 estas imágenes también tendrán un tamaño de archivo mayor en comparación con 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 (bueno, sí puede, pero solo Firefox parece admitirlas, a diferencia de la animación GIF, que es compatible con todos los navegadores). En segundo lugar, tiene algunos problemas de compatibilidad con navegadores más antiguos como IE6. En tercer lugar, 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 finalmente agregó soporte para transparencia alfa en sus últimas versiones. Sin embargo, si tiene uno más antiguo, hay formas de convertir archivos 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 Lossless con Direct color (miles de colores, como JPEG). Es muy parecido a BMP en ese sentido, excepto que PNG en realidad comprime imágenes, por lo que da como resultado 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 las imágenes JPEG. Una fotografía guardada como PNG-24 probablemente será 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 está preocupado por 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.

SVG - Sin pérdida / Vector

Un tipo de archivo que actualmente está creciendo en popularidad es SVG, que se diferencia de todos los anteriores en que es un formato de archivo vectorial (todos los anteriores son rasterizados ). Esto significa que en realidad se compone de líneas y curvas en lugar de píxeles. Cuando hace zoom en una imagen vectorial, sigue viendo una curva o una línea. Cuando hace zoom en una imagen rasterizada, verá píxeles.

Por ejemplo:

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

Además, los archivos SVG se escriben con XML, por lo que se pueden abrir y editar en un editor de texto, que se puede manipular sobre la marcha, si lo desea. Por ejemplo, puede usar JavaScript para cambiar el color de un ícono SVG en un sitio web como lo haría con un texto (es decir, no necesita una segunda imagen).

¡Espero que eso ayude!

JPG:

ventajas :

• Muchos niveles de compresión diferentes disponibles
• Fácil de manipular con el editor de todas las imágenes.

inconvenientes :

• Artefactos de compresión

Usos :

• Fotos grandes o imágenes con muchos colores
• Cuando se necesita alta compresión

PNG:

ventajas :

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

inconvenientes :

• Menos compresión que JPG (pero no tanta)
• Incompatible con IE6 (y 7 creo) - debe usar parche o hack para esto. ¿Pero a quién le importa? Un uso imprescindible ;)

Usos :

• Fotos/imágenes pequeñas o medianas con mucho color
• Imprescindible si desea transparencia degradada
• Iconos
• logotipos

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.
• El gif animado puede hacer que la gente huya
• Sin alfa para la transparencia (¡es transparente o no!)

Usos :

• Gif animados (los uso principalmente en newsletters)
• Iconos
• Favicon animado \o/
• logotipos

Los sitios web pueden contener gráficos en formato JPEG, GIF, PNG, SVG. ¿Cuáles se deben usar 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, compruebe qué formato de imagen de trama 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 respaldo PNG/JPEG.

No hay absolutamente ninguna razón para no proporcionar SVG hoy en día. Se implementan casi exactamente 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 archivos 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 archivos SVG; además, es posible que las computadoras más antiguas hayan tenido problemas para representar una página web pesada en SVG, incluso si se hubieran podido usar hace 10 años (que no pudieron). Los datos de un SVG se almacenan en formato hexadecimal (base-16), lo que permite optimizarlos 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 alternativa:

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

2. Revisión del flujo de trabajo SVG para el rendimiento y el desarrollo progresivo con URI de datos transparentes

3. Trucos de CSS: respaldos de SVG

El siguiente fragmento de JavaScript, copiado del primer enlace, es todo lo que necesita para detectar la compatibilidad con SVG en la mayoría de los navegadores, si no en todos, y cambiar el nombre del archivo para proporcionar respaldos 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>

Cuándo 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 proporció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 navegadores modernos (la compatibilidad con SVG es relativamente nueva para algunos navegadores)

Cuándo usar fuentes de iconos

• Cuando necesite un amplio conjunto de iconos
• Cuando, como SVG, desea los beneficios de los formatos de archivo vectoriales
• Cuando tiene el lujo de tener que apuntar solo a navegadores modernos (la compatibilidad con fuentes web es relativamente nueva 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 hay que sacrificar la calidad en el logo

• Hace que el diseño receptivo sea más fácil de muchas maneras

notas

• El soporte es menos común para los 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 cualquier otro lugar, es decir, los iconos de navegación, desea vincularlo externamente de todos modos para que el navegador lo almacene en caché y ahorre tiempo al cargar otras páginas).

• IE no admite SVGZ, el formato comprimido disponible para gráficos SVG. Para una mayor compatibilidad entre navegadores y versiones anteriores recientes, es mejor usarlo 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 aquellos casos en los 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 el alto por 100 y lograr números enteros o números con 1 decimal como máximo. Como ejemplo, si está organizando 7 10px x 10pxiconos x 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, 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 estarán exactamente en incrementos de 12.5%, lo cual, por supuesto, 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 general más detallada, consulte el artículo de Jonathan Snook, What Image Format Is Best .

Una buena fórmula podría ser usar 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.

Uso PNG para casi todo, ya que no tiene los artefactos de compresión que tiene JEPG, y es casi universalmente compatible en estos días (he visto un par de editores de sitios que no lo toman bien, 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.

Web tiene que ver con la velocidad en la 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 en 64/128 colores diferentes, pero generalmente en 256. (iconos, imágenes vectoriales que deben ser rasterizadas, color de alto contraste, degradados con pocos colores)

¿Cómo elegir entre PNG y GIF?

En primer lugar, compruebe la optimización de compresión/calidad y elija quién le da 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 discrimines un formato por otro, simplemente marca el que te parezca más adecuado para tu optimización.

• Elija GIF: para imágenes animadas en no más de 256 colores
• Si no necesita animación, puede elegir PNG. Elija el PNG correcto: hay 2 tipos de 8 bits y 24 bits. 8bit 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 Web). 24 bits no tiene compresión (así que úsela apenas para algún efecto gráfico especial), y tiene el valor alfa para usar transparencia de color (los navegadores IE antiguos no son compatibles con esto, si no aplica un filtro especial o un 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 conocen 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 tamaños de archivo 2x-5x 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 los 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, de modo que las imágenes se vean bien y sean lo más compactas posibles 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: tablas, 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.

• admitir una función llamada transparencia, en la que un color de los 256 colores se configura para que sea transparente. Esto evita que sus gráficos se vean como si estuvieran en cajas, porque el fondo del archivo es invisible, dejando que se vea el fondo de la página Web.

• puede ser animado. Dentro de un solo archivo se almacenan muchos marcos de imágenes y un índice que indica cuánto tiempo se debe mostrar cada marco. 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 la imagen no se ve degradada por el proceso de compresión.

• se pueden entrelazar para que parezca que se desvanecen, de menor a mayor calidad, mientras se cargan. Esto le da a sus visitantes algo para mirar mientras esperan.

• no son buenos para las fotografías - se pierde calidad y los archivos no serán compactos. Use el formato de gráficos JPG para las fotos.

JPG - Grupo Conjunto de Expertos Fotográficos

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

• puede contener hasta 16 millones de colores.

• soporte de compresión variable. Puede aplicar más o menos compresión a cada imagen individual. Cuanta más compresión apliques, más calidad perderás. Si bien los tamaños de archivo se pueden hacer bastante pequeños con este formato de gráficos, a menudo hay que comprometer el tamaño del archivo y la calidad de la imagen. El software de gráficos más nuevo le brinda 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: base o estándar, línea base optimizada o estándar optimizada y progresiva. Baseline fue diseñado para navegadores que consideraríamos antiguos en estos días (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 actuales pueden leer una imagen de este tipo. Un JPG progresivo, como un archivo GIF entrelazado, se construye a medida que se descarga, pasando de una representación cruda de la imagen a su apariencia final. Si bien este es un buen formato de gráficos web, no todos los navegadores antiguos son compatibles con este formato.

• no son buenos 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 más 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 funciones 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 mucho, principalmente porque no son compatibles con navegadores más antiguos.

¿Cuándo usar cuál?

Elegir el formato de gráficos web correcto 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 descargarse.

El error gráfico más común que la gente comete en la Web es usar el formato de gráficos 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, pruebe paletas optimizadas que contengan solo los colores utilizados; pueden reducir el tamaño de los archivos a la mitad.

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

JPEG: para imágenes rasterizadas y fotografías

PNG: para gráficos vectoriales (p. ej., logotipos, etc.)

Desafortunadamente, Internet Explorer 6 (todavía, lamentablemente, una gran cantidad de usuarios) no admite transparencia en imágenes PNG. Entonces, si su PNG contiene transparencia, puede tener problemas. Afortunadamente, hay un truco que se puede usar 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. Soporte de navegador (casi) perfecto (aunque sin transparencia, por lo que no es una gran ventaja)
2. Pueden estar 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 sea 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 su gráfico resulta 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, esa puede ser una buena decisión.