PNG vs GIF vs JPEG vs SVG - Cuándo es mejor utilizar?
¿Cuándo se deben usar ciertos tipos de archivos de imagen al crear sitios web o interfaces, etc.?
¿cuáles son sus puntos de fuerza y debilidad?
Sé que PNG y GIF no tienen pérdidas, mientras que JPEG tiene pérdidas.
Pero, ¿cuál es la principal diferencia entre PNG y GIF?
¿Por qué debería preferir uno sobre el otro?
¿Qué es SVG y cuándo debo usarlo?
Si no le importan todos y cada uno de los píxeles, ¿debería usar siempre JPEG ya que es el más "ligero"?
12 answers
Usted debe ser consciente de 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.
- Lossy significa que la imagen se hace (incluso) más pequeña, pero en detrimento de la calidad. Si guardaba una imagen en un formato con pérdida una y otra vez, la calidad de la imagen empeoraría progresivamente y peor.
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
- Direct significa que puede almacenar muchos miles de colores que no han sido elegidos directamente por el autor
BMP - Sin pérdidas / Indexado y Directo
Este es un formato antiguo. Es sin pérdidas (no se pierden datos de imagen al guardar), pero también hay poca o ninguna compresión en absoluto, lo que significa que guardar como BMP resulta en tamaños de archivo MUY grandes. Puede tener paletas tanto Indexadas como Directas, pero eso es un pequeño consuelo. Los tamaños de archivo son tan innecesariamente grandes que nadie realmente utiliza este formato.
Bueno para: Nada realmente. No hay nada BMP sobresale en, o no se hace mejor por otros formato.
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 ser.
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 utiliza realmente para sitios web.
JPEG - Lossy / Direct
Las imágenes JPEGs fueron diseñadas para hacer que las imágenes fotográficas detalladas sean 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 el resultado es la pérdida de más datos con el tiempo. Tiene una paleta de miles de colores y, por lo tanto, es ideal para fotografías, pero la compresión con pérdida significa que es mala 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 más grande en comparación con los GIF.
Bueno para: Fotografías. También, 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 GIFS. Lamentablemente, sin embargo, tiene algunos inconvenientes: En primer lugar, no puede soportar la animación como GIF puede (bueno, puede, 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, software importante como Photoshop tienen una implementación muy pobre del formato. (Maldito seas, Adobe!) PNG-8 solo puede almacenar 256 colores, como GIFS.
Bueno para: Lo principal que hace PNG-8 better than GIFs es tener soporte para Transparencia Alfa.
PNG-24 - Sin pérdidas / Directo
PNG-24 es un gran formato que combina codificación sin pérdida con Color directo (miles de colores, al igual que JPEG). Es muy parecido a BMP en ese sentido, excepto que PNG en realidad comprime imágenes, por lo que resulta en archivos mucho más pequeños. Desafortunadamente, los archivos PNG-24 seguirán siendo más grandes que los JPEG (para fotos) y los GIFs / PNG-8 (para logotipos y gráficos), por lo que todavía tienes que considerar si realmente quieres 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 imagen de calidad posible.)
Igual que PNG-8, PNG-24 también admite transparencia alfa.
SVG - Sin pérdidas / Vector
Un tipo de archivo que actualmente está creciendo en popularidad es SVG, que es diferente de todos los anteriores en que es un formato de archivo vector (todos los anteriores son raster). Esto significa que en realidad se compone de líneas y curvas en lugar de píxeles. Cuando se acerca una imagen vectorial, todavía se ve una curva o una línea. Cuando amplíe una imagen rasterizada, verá pixel.
Por ejemplo:
Esto significa que SVG es perfecto para logotipos e iconos que desea conservar la nitidez en pantallas Retina o en diferentes tamaños. También significa que un pequeño logotipo SVG se puede usar en un tamaño mucho más grande (más grande) sin degradación en la calidad de la imagen, algo que requeriría un archivo separado más grande (en términos de tamaño de archivo) con formatos raster.
Los tamaños de los archivos SVG son a menudo pequeños, incluso si son visualmente muy grande, lo cual es genial. Vale la pena tener en cuenta, sin embargo, que depende de la complejidad de las formas utilizadas. Los SVG requieren más potencia de cómputo que las imágenes rasterizadas porque los cálculos matemáticos están involucrados en el dibujo de las curvas y líneas. Si su logotipo es especialmente complicado, podría ralentizar la computadora de un usuario e incluso tener un tamaño de archivo muy grande. Es importante que simplifiques tus formas vectoriales tanto como sea posible.
Además, los archivos SVG se escriben en XML, y así se puede abrir y editar en un editor de texto (!). Esto significa que sus valores pueden ser manipulados sobre la marcha. Por ejemplo, podría usar JavaScript para cambiar el color de un icono SVG en un sitio web, al igual que lo haría con un texto (es decir. no hay necesidad de una segunda imagen), o incluso animarlos.
En general, son mejores para formas planas simples como logotipos o gráficos.
¡Espero que eso ayude!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-12 17:42:19
JPEG no es el más ligero para todo tipo de imágenes(o incluso la mayoría). Las esquinas y las líneas rectas y los "rellenos" planos (bloques de color sólido) aparecerán borrosos o tendrán artefactos en ellos dependiendo del nivel de compresión. Es un formato con pérdida, y funciona mejor para fotografías donde no se pueden ver los artefactos con claridad. Las líneas rectas (como en dibujos y cómics) se comprimen muy bien en PNG y no tienen pérdidas. GIF solo se debe utilizar cuando desea que la transparencia funcione en IE6 o desea animación. GIF solo es compatible con un pallete de 256 colores, pero también es sin pérdidas.
Así que básicamente aquí hay una manera de decidir el formato de la imagen:
- GIF si necesita animación o transparencia que funcione en IE6 (nota, la transparencia PNG funciona después de IE6)
- JPEG si la imagen es una fotografía.
- PNG si las líneas rectas como en un cómic u otro dibujo o si se necesita una amplia gama de colores con transparencia(y IE6 no es un factor)
Y como se ha comentado, si no está seguro de lo que calificaría, probaría cada formato con diferentes ratios de compresión y pesaría la calidad y el tamaño de la imagen y elegiría cuál cree que es el mejor. Sólo estoy dando reglas de oro.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-13 05:45:17
Google ha escrito muy bien al respecto. Desde Seleccionando el formato de imagen correcto , puede encontrar un diagrama de flujo para tomar la decisión:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-06 16:04:26
Suelo ir con PNG, ya que parece tener algunas ventajas sobre GIF. Solía haber restricciones de patentes en GIF, pero esas han expirado.
Los GIFs son adecuados para el arte lineal de bordes afilados (como logotipos) con un número limitado de colores. Esto aprovecha la compresión sin pérdidas del formato, que favorece áreas planas de color uniforme con bordes bien definidos (en contraste con JPEG, que favorece gradientes suaves e imágenes más suaves).
Los GIFs se pueden utilizar para pequeñas animaciones y clips de película de baja resolución.
En vista de la limitación general en la paleta de imágenes GIF a 256 colores, generalmente no se usa como formato para fotografía digital. Los fotógrafos digitales utilizan formatos de archivo de imagen capaces de reproducir una mayor gama de colores, como TIFF, RAW o JPEG con pérdida, que es más adecuado para comprimir fotografías.
El formato PNG es una alternativa popular a las imágenes GIF ya que utiliza mejores técnicas de compresión y no tiene un límite de 256 colores, pero los PNGs no admiten animaciones. Los formatos MNG y APNG, ambos derivados de PNG, soportan animaciones, pero no son ampliamente utilizados.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-02-25 18:30:25
JPEG tendrá mala calidad alrededor de bordes afilados, etc. y por esta razón no es adecuado para la mayoría de los gráficos web. Sobresale en las fotografías.
En comparación con GIF, PNG ofrece una mejor compresión, una paleta más grande y más características, incluida la transparencia. Y no tiene pérdidas.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-02-25 18:27:16
El GIF está limitado a 256 colores y no admite transparencia real. Debe usar PNG en lugar de GIF porque ofrece una mejor compresión y características. PNG es ideal para imágenes pequeñas y simples como logotipos, iconos, etc.
JPEG tiene una mejor compresión con imágenes complejas como fotos.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-02-25 18:29:16
Png tiene un pallete de color más ancho que gif y gif es properitary mientras que png no lo es. gif puede hacer animaciones, lo que normal-png no puede. png-transparency solo es compatible con el navegador más reciente que IE6, pero hay una solución de Javascript para ese problema. Ambos soportan transparencia alfa. En general, diría que debe usar png para la mayoría de los gráficos web mientras usa jpeg para fotos, capturas de pantalla o similar porque la compresión png no funciona demasiado bien en thoose.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-02-25 18:26:23
Hay un truco que se puede hacer para usar imágenes GIF para mostrar el color verdadero. Se puede preparar una animación GIF con 256 fotogramas con paleta de colores con 0 fotogramas de retraso y establecer la animación para que se muestre solo una vez. Por lo tanto, todos los marcos podrían mostrarse al mismo tiempo. Al final, se renderiza una imagen GIF de color verdadero.
Muchos programas son capaces de prapaering tales imágenes GIF. Sin embargo, el tamaño del archivo de salida es mayor que un archivo PNG. Debe ser utilizado si es realmente necesario.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-30 12:36:14
GIF basado en una paleta de 256 colores por imagen (al menos en su encarnación básica). PNG puede hacer "TrueColour", es decir, 16,7 millones de colores fuera de la caja. PNG sin pérdida se comprime mejor que los GIFS sin pérdida. GIF puede hacer transparencia "binaria" (0% opacidad o 100% opacidad). PNG puede manejar transparencias alfa.
En general, si no necesita usar imágenes alfa transparentes y compatibles con IE6, PNG es probablemente la mejor opción cuando necesita imágenes pixel-perfectas para ilustraciones vectoriales y tal. JPG es inmejorable para fotografías.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-02-25 18:26:49
La principal diferencia es que GIF está patentado y un poco más ampliamente soportado. PNG es una especificación abierta y la transparencia alfa no es compatible con IE6. El soporte fue mejorado en IE7, pero no completamente fijo.
En cuanto a los tamaños de archivo, GIF tiene una paleta de colores predeterminada más pequeña, por lo que tienden a ser tamaños de archivo más pequeños a primera vista. Los archivos PNG tienen una paleta predeterminada más grande, sin embargo, puede reducir su paleta de colores para que, cuando lo haga, resulten en un tamaño de archivo más pequeño que el GIF. El el problema de nuevo es que esta característica no es tan compatible con Internet Explorer.
Además, debido a que los PNGs pueden soportar transparencia alfa, son la única opción si desea una variación de transparencia que no sea transparencia binaria.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-02-25 18:29:04
GIF tiene 8 bits (256 colores) paleta donde PNG como hasta 24 bits paleta de colores. Por lo tanto, PNG puede soportar más color y, por supuesto, el algoritmo soporta compresión
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-02-25 18:27:22
Si opta por JPEG, y está tratando con imágenes para un sitio web, es posible que desee considerar el codificador de percepción Google Guetzli, que está disponible gratuitamente. En mi experiencia, para una calidad fija Guetzli produce archivos más pequeños que las bibliotecas de codificación JPEG estándar, manteniendo la compatibilidad total con el estándar JPEG (por lo que sus imágenes tendrán la misma compatibilidad que las imágenes JPEG comunes).
El único inconveniente es que Guetzli toma lote de tiempo para codificar.. pero esto se hace solo una vez, cuando se prepara la imagen para el sitio web, mientras que los beneficios permanecen para siempre! Las imágenes más pequeñas tardarán menos tiempo en descargarse, por lo que la velocidad de su sitio web aumentará en el uso diario.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-29 14:34:07