Blog

Secciones del Blog
Archivos

¿Cuál es la diferencia entre los formatos de archivo PNG, SVG y Lottie?

¿Qué es un PNG?
El formato de archivo PNG (Portable Network Graphics) se desarrolló originalmente para reemplazar el GIF (Graphic Interchange Format): los GIF solo admiten 256 colores, mientras que los PNG admiten la friolera de 16 millones de colores. Esto hace que los archivos PNG sean excelentes para mostrar fotos de alta calidad. Es uno de los formatos de archivo de imagen más populares utilizados en la actualidad, junto con JPEG.

¿Qué es un SVG?
Los gráficos vectoriales escalables (SVG) son imágenes basadas en XML, un lenguaje de marcado similar a HTML. Son populares para mostrar elementos de diseño gráfico como logotipos, ya que puede ampliarlos sin perder calidad.

¿Qué es Lottie?
Un Lottie es un formato de archivo basado en JSON; esto básicamente significa que es un archivo que almacena datos sobre la animación como texto. Los archivos de Lottie son increíbles (está bien, somos un poco parciales, ¡pero es verdad!). Se amplían o reducen sin perder calidad, son súper livianos, funcionan en casi cualquier dispositivo y se pueden personalizar fácilmente.

Comparación de formatos de archivo PNG, SVG y Lottie
Ahora que sabe cuál es cada formato de archivo, esto es lo que necesita saber sobre cómo se comparan.

PNGSVGLottie
File sizeLargeSmallSmall
ScalableYes, but not without losing qualityYesYes
AnimationNot supported nativelySupportedSupported
TransparencySupportedSupportedSupported
Ease of customizationMediumMedium to hardEasy
User interactionNot supportedSupportedSupported

  1. Tamaño del archivo
    Los archivos PNG usan compresión sin pérdidas, lo que significa que no pierden la calidad de imagen cuando se comprimen. Pero esto también significa que tienden a ser grandes, lo que puede ralentizar la velocidad de la página de su sitio web o los tiempos de carga de la aplicación móvil.

Los archivos SVG son generalmente pequeños, pero los SVG complejos aumentarán el tamaño del archivo.

Las animaciones de Lottie son generalmente pequeñas. Es aproximadamente un 600 % más pequeño que un GIF, que es un formato de archivo animado popular. Esto significa que con los archivos de Lottie, puede incrustar animaciones enriquecidas en su sitio web sin ralentizarlo.

https://embed.lottiefiles.com/animation/102606
  1. Escalabilidad
    Un PNG es un formato de archivo basado en ráster, lo que significa que se compone de un número fijo de píxeles. Cada píxel individual es un pequeño cuadrado de color. Colectivamente, todos los píxeles forman la imagen completa. Pero debido a que un archivo PNG se compone de un número fijo de píxeles, ampliarlo puede hacer que se vea borroso, ya que cada píxel ahora se ha estirado para cubrir un área más grande.

Los SVG son formatos basados ​​en vectores, mientras que los archivos Lottie se basan principalmente en vectores. Esto significa que no están formados por píxeles, sino por puntos que están conectados por líneas y curvas. Estos son generados por fórmulas matemáticas. Debido a que las animaciones SVG y Lottie se calculan, no se componen de un número finito de píxeles, se pueden escalar infinitamente hacia arriba o hacia abajo, sin perder calidad de imagen.

  1. Animación
    Los archivos PNG no admiten de forma nativa la animación. Si necesita animar un PNG, deberá usar el formato de archivo PNG animado (o APNG). Esto implica el uso de un ensamblador APNG para fusionar una secuencia de imágenes PNG en una animación, pero este formato no se usa mucho.

Un archivo SVG por sí solo es estático. Para animar un SVG, debe manipularlo con elementos de animación SVG, CSS o JavaScript (JS). Sin embargo, MDN Web Docs señala que los SVG pueden complicarse rápidamente y que los SVG complejos pueden consumir mucho tiempo de procesamiento en el navegador; esto podría ralentizar la velocidad de la página.

Por otro lado, el formato de archivo Lottie realmente brilla cuando se trata de animación. Las animaciones de Lottie se crean con Adobe After Effects u otro software de animación y gráficos, y luego se exportan como una animación de Lottie.

Si bien la creación de una animación de Lottie puede implicar experiencia en diseño de movimiento, no necesita saber nada sobre animación, o código, para comenzar a usar las animaciones de Lottie. Sí, trabajar con las animaciones de Lottie no requiere código. Puede descargar, personalizar e incrustar miles de animaciones gratuitas de Lottie en LottieFiles, tanto para sus proyectos personales como comerciales.

  1. Transparencia
    Los formatos de archivo PNG, SVG y Lottie son compatibles con la transparencia. Esto contrasta con otros tipos de archivos de imagen populares como JPEG o GIF, que no admiten transparencia.

Las imágenes con fondos transparentes pueden ser útiles, ya que se mezclan con el diseño de su sitio web o aplicación móvil. No necesitará variaciones de la misma imagen con diferentes colores de fondo solo para adaptarse a diferentes casos de uso.

  1. Facilidad de personalización
    Los archivos PNG se pueden editar con cualquier software de edición de imágenes, como Adobe Photoshop, Adobe Lightroom o el Programa de manipulación de imágenes GNU (GIMP). Pero puede implicar un poco de una curva de aprendizaje. Por ejemplo, si desea cambiar el color de un objeto dentro de una fotografía con Adobe Photoshop, debe tener cierta familiaridad con el software, así como habilidades básicas de edición de imágenes.

Personalizar archivos SVG también implica una curva de aprendizaje. Para editar un archivo SVG, debe usar editores de gráficos vectoriales como Adobe Illustrator o Inkscape. Si usa SVG en línea (es decir, agrega directamente código SVG, en lugar de incrustar un archivo SVG) en su documento HTML, lo editará usando CSS y JavaScript. Por el lado positivo, para personalizaciones simples, puede probar el Editor de iconos de Iconscout: es un editor SVG en línea gratuito que le permite editar colores y trazos SVG.

Personalizar las animaciones de Lottie puede parecer complejo al principio; después de todo, son animaciones, no simples ilustraciones estáticas. Pero editar animaciones de Lottie puede ser fácil. Aquí hay un par de formas, tanto para personas técnicas como no técnicas:
Al usar el editor Lottie: puede usar el editor Lottie para cambiar los colores, la velocidad, la velocidad de fotogramas, las dimensiones y más, incluso si no sabe nada sobre el diseño de movimiento. Aquí hay un tutorial paso a paso sobre cómo editar animaciones con Lottie Editor.
Editando un Lottie JSON directamente: también puede editar un Lottie JSON directamente mediante el editor de Lottie JSON o un editor de código. Por ejemplo, aquí se explica cómo cambiar los colores de la animación de Lottie con el editor Lottie JSON o en Visual Studio Code.
Usando el reproductor web de Lottie: use el reproductor web de Lottie para incrustar animaciones de Lottie y personalizar funciones como el ancho, la altura, la velocidad de la animación y la transparencia del fondo.

Fuente: https://lottiefiles.com/blog/engineering/difference-png-svg-lottie?utm_source=newsletter&utm_medium=email&utm_campaign=apr