jpg image svg png jpeg gif

image - jpg - png to svg



PNG vs. GIF vs. JPEG vs. SVG: ¿Cuándo es mejor usarlo? (13)

A partir de 2018, tenemos varios formatos nuevos, mejor soporte para formatos anteriores y algunos trucos inteligentes para usar videos en lugar de imágenes.

Para fotografias

jpg - sigue siendo el formato de imagen más ampliamente soportado.

webp - Nuevo formato de google. Buen potencial, aunque el support navegador no es muy bueno.

Para iconos y gráficos.

svg - siempre que sea posible. Se adapta bien en pantallas de retina, editables en editores de texto y personalizables a través de JS / CSS si se carga en DOM.

png : si se trata de gráficos de trama (es decir, cuando se crea en photoshop). Apoya la transparencia que es muy esencial en este caso de uso.

Para animaciones

svg - más animaciones css para gráficos vectoriales. Todas las ventajas de svg + power of css animations.

gif - sigue siendo el formato de imagen animada más ampliamente soportado.

mp4 - si las imágenes animadas son en realidad clips de video cortos. Twitter / Whatsapp convierte gifs a mp4.

apng - support decente para el navegador (es decir, sin IE, Edge), pero crearlo no es tan sencillo como gifs.

webp - cerca de usar mp4. Pobre support

Esta es una buena comparison de varios formatos de imágenes animadas.

Finalmente, sea cual sea el formato, asegúrese de optimizarlo: hay herramientas para cada formato (por ejemplo, SVGO, Guetzli, OptiPNG, etc.) y puede ahorrar un ancho de banda considerable.

¿Cuándo deben usarse ciertos tipos de archivos de imágenes al crear sitios web o interfaces, etc.?

¿Cuáles son sus puntos de fortaleza 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 te importa cada píxel, ¿siempre deberías usar JPEG, ya que es el "más claro"?

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 en detrimento de la calidad.
  • Con 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 .

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

BMP - Sin pérdida / indexado y directo

Este es un formato antiguo. Es sin pérdida (no se pierden datos de la imagen al guardar) pero también hay poca o ninguna compresión, lo que significa que guardar como resultados BMP en archivos MUY grandes. Puede tener paletas tanto indexadas como directas, pero eso es un pequeño consuelo. Los tamaños de los archivos son tan innecesariamente grandes que nadie realmente utiliza este formato.

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

GIF - Lossless / Indexed only

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 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 de líneas y otras imágenes simples que deben ser pequeñas. Sólo se utiliza realmente para sitios web.

JPEG - Pérdida / Directo

Las imágenes JPEG se diseñaron 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 hará que se pierdan 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 perjudicial para los logotipos y dibujos de líneas: no solo se verán borrosos, sino que también tendrán un tamaño de archivo más grande en comparación con los GIF.

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

PNG-8 - Lossless / Indexed

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 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 más antiguos como IE6. En tercer lugar, un software importante como Photoshop tiene una implementación muy pobre del formato. (¡Maldición, Adobe!) PNG-8 solo puede almacenar 256 colores, como GIF.

Bueno para: Lo más importante que PNG-8 hace mejor que los GIF es tener soporte para la transparencia alfa.

PNG-24 - Sin pérdidas / directo

PNG-24 es un gran formato que combina la codificación sin pérdida con color directo (miles de colores, al igual que JPEG). En este sentido, se parece mucho a BMP, excepto que PNG realmente 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 GIF / PNG-8 (para logotipos y gráficos), por lo que aún debe considerar si realmente desea usar uno.

A pesar de que los archivos PNG-24 permiten miles de colores mientras se comprimen, no están diseñados para 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 es compatible con transparencia alfa.

SVG - Lossless / Vector

Un tipo de archivo que actualmente está creciendo en popularidad es SVG, que es diferente a todo lo anterior en que se trata de 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 acercas una imagen vectorial, aún ves una curva o una línea. Cuando acercas una imagen ráster, verás píxeles.

Por ejemplo:

Esto significa que SVG es perfecto para los logotipos e íconos que desea conservar la nitidez en las pantallas Retina o en diferentes tamaños. También significa que un logotipo SVG pequeño puede usarse 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 más grande separado (en términos de tamaño de archivo) con formatos raster.

Los tamaños de los archivos SVG suelen ser pequeños, incluso si son visualmente muy grandes, lo que 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álculo que las imágenes de trama porque los cálculos matemáticos están involucrados en el dibujo de 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 las formas vectoriales tanto como sea posible.

Además, los archivos SVG están escritos en XML, por lo que pueden abrirse y editarse 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 ícono SVG en un sitio web, como lo haría con un texto (es decir, sin 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!

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 de la caja. PNG sin pérdida comprime mejor que GIF sin pérdida. GIF puede hacer transparencia "binaria" (0% de opacidad o 100% de opacidad). PNG puede manejar transparencias alfa.

En general, si no necesita usar imágenes alfa-transparentes y no es compatible con IE6, PNG es probablemente la mejor opción cuando necesita imágenes de píxeles perfectos para ilustraciones vectoriales y demás. JPG es inmejorable para las fotografías.

GIF está limitado a 256 colores y no admite transparencia real. Debería 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, íconos, etc.

JPEG tiene mejor compresión con imágenes complejas como fotos.

GIF tiene una paleta de 8 bits (256 colores) donde PNG tiene una paleta de colores de hasta 24 bits. Entonces, PNG puede soportar más color y por supuesto el algoritmo soporta compresión

Hay un truco que se puede hacer para usar imágenes GIF para mostrar el color verdadero. Uno puede preparar una animación GIF con 256 fotogramas con paleta de colores con un retraso de 0 fotogramas y configurar la animación para que se muestre solo una vez. Por lo tanto, todos los cuadros se pueden mostrar al mismo tiempo. Al final, se representa 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 más grande que un archivo PNG. Se debe utilizar si es realmente necesario.

JPEG no es el más claro para todo tipo de imágenes (o incluso la mayoría). Las esquinas y las líneas rectas y los "rellenos" simples (bloques de color sólido) aparecerán borrosos o tendrán artefactos en ellos según el nivel de compresión. Es un formato con pérdida y funciona mejor para fotografías en las que no se pueden ver claramente los artefactos. Las líneas rectas (como en dibujos y cómics y similares) se comprimen muy bien en PNG y no tienen pérdidas. GIF solo debe usarse cuando desea que la transparencia funcione en IE6 o cuando desee animación. GIF solo admite una paleta de 256 colores, pero también tiene 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 hay 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 comentó, si no está seguro de lo que calificaría, pruebe cada formato con diferentes relaciones de compresión, pese la calidad y el tamaño de la imagen y elija cuál cree que es el mejor. Sólo estoy dando reglas de oro.

JPEG tendrá una calidad baja en bordes afilados, etc., y por esta razón no es adecuado para la mayoría de los gráficos web. Se destaca en las fotografías.

En comparación con GIF, PNG ofrece una mejor compresión, paleta más grande y más funciones, incluida la transparencia. Y es sin pérdidas.

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 se mejoró en IE7, pero no fue completamente arreglado.

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 GIF. El problema de nuevo es que esta característica no es compatible con Internet Explorer.

Además, como los PNG pueden admitir la transparencia alfa, son la única opción si desea una variación de transparencia distinta de la transparencia binaria.

Normalmente voy con PNG, ya que parece tener algunas ventajas sobre GIF. Solía ​​haber restricciones de patentes en GIF, pero han expirado.

Los GIF son adecuados para el arte lineal de bordes afilados (como los logotipos) con un número limitado de colores. Esto aprovecha la compresión sin pérdida del formato, que favorece las áreas planas de color uniforme con bordes bien definidos (en contraste con JPEG, que favorece los gradientes suaves y las imágenes más suaves).

Los GIF 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 un formato para fotografía digital. Los fotógrafos digitales utilizan formatos de archivo de imagen capaces de reproducir una mayor variedad 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 PNG no admiten animaciones. Los formatos MNG y APNG, ambos derivados de PNG, admiten animaciones, pero no son ampliamente utilizados.

Si opta por JPEG y está tratando con imágenes para un sitio web, es posible que desee considerar el codificador de percepción de Google Guetzli , que está disponible de forma gratuita. En mi experiencia, para una calidad fija, Guetzli produce archivos más pequeños que las bibliotecas de codificación JPEG estándar, al tiempo que mantiene 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 tarda mucho tiempo en 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á con el uso diario.

png tiene una paleta de color más amplia que gif y gif es adecuada, mientras que png no lo es. gif puede hacer animaciones, lo que normal-png no puede. png-transparent solo es compatible con el navegador aproximadamente más reciente que IE6, pero hay una solución de Javascript para ese problema. Ambos soportan transparencia alfa. En general, diría que debes usar png para la mayoría de gráficos web mientras usas jpeg para fotos, capturas de pantalla o similares, ya que la compresión png no funciona demasiado bien.