Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Photo & Video
  2. GIF
Photography

Cómo comprimir archivos GIF animados sin perder la calidad de la imagen

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Animation in Adobe Photoshop.
Cinemagraphs: How to Create Animated Photographs in Adobe Photoshop

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

Los GIFs animados, más que cualquier otro formato de imagen digital, se han arraigado a la cultura en línea. Los JPEGs son más o menos una continuación de la fotografía tradicional, pero los GIFs son algo nuevo y poderoso. La banda ancha de uso generalizado ha dado lugar a la transmisión de video en la última década, pero antes de eso, la única manera de compartir imágenes en movimiento fácilmente era el uso de GIFs.

Los GIFs se han vuelto más que un formato de video primitivo y sin sonido. Con el éxito de sitios como Tumblr y Reddit, estos son una forma de arte en sí mismos. Los GIFs de reacciones son algunos de los memes más populares.

Sin embargo, el formato GIF no es tan bueno como el JPEG o el PNG cuando se trata de la compresión. La única razón por la que los GIFs siguen siendo tan exitosos es que el formato permite la animación. Por lo tanto, crear un GIF comprimido con buen nivel de detalle requiere un poco de reflexión. La mayoría de los GIFs que ves en línea son archivos ridículamente grandes o están horriblemente comprimidos.

Veamos cómo podemos comprimir GIFs animados sin pulverizarlos.

¿Por qué comprimir GIFs?

Como mencioné anteriormente, los archivos GIF tienden a ser grandes. El tamaño de un GIF puede ser diez veces más grande que el de un archivo de película idéntico. Si quieres tener GIFs atractivos que puedan ser compartidos en la web, esto supone un problema.

Si estás usando banda ancha de alta velocidad, entonces cargar un GIF de 10 MB incrustado en una página web no representa problema alguno. Quizá tarde un segundo o dos, pero apenas lo notarás. El problema es que hay muchas personas que no están accediendo a Internet usando una conexión rápida.

Millones de personas nuevas obtienen acceso a Internet cada año, la gran mayoría en países en desarrollo. Las personas no siempre cuentan con el lujo de tener un acceso a Internet rápido y asequible. Sus conexiones a menudo son lentas y caras. Al diseñar contenido para Internet, como GIFs animados, debes tener en cuenta a esos usuarios.

iamagoptim
ImageOptim puede comprimir imágenes sin pérdida para hacerlas más accesibles.

Incluso en los países desarrollados existe una gran cantidad de gente que tiene acceso limitado y costoso a Internet: los usuarios de dispositivos móviles. Hoy en día los teléfonos inteligentes son la forma dominante en la que la mayoría de la gente se conecta. Si bien los datos móviles pueden ser increíblemente rápidos en algunas áreas, estos son costosos. Si más de la mitad de las personas que verán tu GIF lo van a hacer con un teléfono inteligente, entonces debe comprimirse correctamente.

Finalmente, la mayoría de los lugares en donde los GIFs son alojados comprenden estos dos problemas. Esto significa que establecen límites en el tamaño de los archivos para las cargas o los envían a sus propios algoritmos de compresión. Si no comprimes tu propio GIF correctamente, este se encontrará a merced de cualquier compresión con pérdida que alguna otra persona haya elegido. Si tus GIFs están comprimidos correctamente, esto será mucho menos problemático.

Cómo hacer buenos GIFs

No tiene sentido comprimir un GIF ineficiente y mal hecho. Entra como basura, sale como basura. Si te vas a esforzar por hacer un GIF, entonces debes hacerlo bien en cada etapa. Si apenas estás comenzando a hacer GIFs, te sugiero el tutorial "Cinemagrafías: Cómo crear fotografías animadas en Adobe Photoshop" de Jose Antunes.

optimising photoshop
Creando un GIF bien optimizado en Photoshop.

Martin Perhiniak ha escrito un excelente tutorial sobre formas de optimizar un archivo GIF animado. Deberías echarle un vistazo antes de continuar. La conclusión principal es que hay una serie de decisiones importantes que deben tomarse en cuanto al tamaño de la imagen, la longitud del GIF, la cantidad de cuadros, la cantidad de colores y la calidad. Al limitar tu GIF en áreas menos importantes, puedes mantener el detalle en donde lo desees.

Cómo comprimir GIFs sin pérdida

Si bien hay herramientas comerciales disponibles, uno de los mejores algoritmos de optimización proviene de la herramienta de código abierto Gifsicle. El algoritmo de compresión de Gifsicle compara cada cuadro con el anterior y calcula la diferencia. Después guarda solamente los cambios, en vez de incorporar todos los detalles redundantes. Esto significa que, si solamente hay cambios en un área pequeña de la imagen entre cada cuadro, obtendrás un tamaño de archivo mucho más pequeño. Es una manera increíblemente eficiente de comprimir algo sin pérdida.

Sin embargo, Gifsicle es una herramienta de línea de comandos. Si estás familiarizado con la línea de comandos, entonces puedes seguir adelante y usarla como es. Simplemente clona Gifsicle desde GitHub y estarás listo para comenzar.

gifsicle
Usando el algoritmo de Gifsicle, ImageOptim puede ahorra bastante tamaño en los archivos de GIFs optimizados incorrectamente.

La opción de línea de comandos es demasiado técnica para la mayoría de las personas. Afortunadamente, existen un par de aplicaciones para la optimización de imágenes que usan el algoritmo de Gifsicle.

Si estás trabajando en una Mac, ImageOptim es la mejor solución. Además de comprimir GIFs sin pérdida, también puede gestionar archivos JPEG y PNG.

Para los usuarios de Windows, FileOptimizer también usa Gifsicle para impulsar su compresión de GIFs. Además de imágenes, FileOptimizer parece ser capaz de comprimir casi todo.

También existen algunas aplicaciones web que comprimen GIFs. La compresión de GIF sin pérdida de Compressor.io usa Gifsicle, así que esa es la que te recomiendo. Muchas de las otras aplicaciones web solamente ofrecen compresión con pérdida.

 

Poniéndolo en práctica

El grado en el que Gifsicle puede comprimir tu GIF depende de qué tan bien lo hayas optimizado previamente. Si creas un GIF bien diseñado en Photoshop, Gifsicle puede comprimirlo entre un dos y un cinco por ciento más. Sin embargo, si comienzas con un GIF mal optimizado, este puede comprimirlo mucho más.

He creado el GIF anterior en Photoshop a partir de un video corto que grabé. Hice la tarea lo más difícil posible para Gifsicle deliberadamente; casi toda la imagen se mueve entre cada cuadro.

El archivo de video original llegó a los 20 MB. Cuando lo convertí a GIF en Photoshop, pude reducirlo a alrededor de 4 MB, aunque a costa de muchos detalles. Pasarlo por ImageOptim lo redujo otro 4% a 3.8 MB exactamente sin perder más calidad.

También pasé una variedad aleatoria de GIFs de Giphy por ImageOptim. Obtuve un rango de valores entre 0% y 24.9% para la compresión. Nuevamente, esto fue sin pérdida en la calidad de los GIFs.

Concluyendo

Los GIFs son increíblemente populares en línea. Desafortunadamente, estos tienden a ser archivos bastante grandes o a estar mal comprimidos. Para las personas que acceden a Internet con conexiones lentas o caras, esto representa un problema.

Con aplicaciones como ImageOptim, FileOptimizer y Compressor.io, puedes usar el poderoso algoritmo de compresión de Gifsicle para reducir tus GIFs sin pérdida. Dependiendo de qué tan bien lo hagas, puedes reducir entre un 2 y un 25% del tamaño del archivo.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.