Advertisement
  1. Design & Illustration
  2. GIF

10 formas de optimizar un archivo GIF animado

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Animation in Adobe Photoshop.
How to Create an Animated Pixel Art Sprite in Adobe Photoshop
Create Your Own Animated Pre-loader in Photoshop

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

GIF es el formato estándar para comprimir imágenes con grandes áreas de colores sólidos y detalles nítidos como los de arte lineal, logotipos o tipo. Al ser un formato de imagen de 8 bits de profundidad, desaparecería de la web después de la introducción de los formatos de archivo JPEG y PNG, pero GIF sigue siendo un formato de archivo web favorito gracias a su función de animación de cuadros. En este tutorial, veremos de cerca todas las opciones disponibles para convertir un video a una animación GIF y cómo optimizar su tamaño de archivo. ¡Empecemos!

Por cierto, si trabaja con GIF animados a menudo, tal vez quiera ver una solución automatizada: la acción Gift Export Photoshop disponible en Envato Market, que le permite tomar múltiples imágenes, cargarlas automáticamente en Photoshop y exportarlas como GIF.


1. Animación de recorte

En primer lugar, deberá abrir el archivo de video con Photoshop. La mayoría de las veces no necesitará toda la secuencia para la animación GIF, por lo que puede recortar el video en el panel de la línea de tiempo. Active la opción Loop e intente encontrar un buen lugar para recortar su video.

10 Ways to Optimize a GIF File

2. Reducir el tamaño de la imagen

Puede reducir el tamaño de la imagen desde el menú Imagen o hacerlo más tarde en el cuadro de diálogo Guardar para Web. Prefiero hacerlo al principio con el cuadro de diálogo Tamaño de imagen, ya que puede ahorrar una cantidad considerable de tiempo de carga al abrir el cuadro de diálogo Guardar para Web. Su capa de video tendrá que convertirse en un Smart Object si cambia el tamaño de la imagen, pero no tiene que preocuparse por esto, no afectará en absoluto nuestro flujo de trabajo.

10 Ways to Optimize a GIF File

3. Guardar para Web

Lo que más me gusta de este flujo de trabajo es que no tenemos que hacer ninguna conversión en el panel Línea de tiempo para poder guardar una animación de cuadros, ya que el cuadro de diálogo Guardar para Web nos hará el trabajo una vez que seleccione el formato de archivo GIF como tu salida. Tenga en cuenta que las opciones de Animación aparecerán en la esquina inferior derecha del cuadro de diálogo. En caso de que decida reducir aún más el tamaño de su imagen, puede hacerlo aquí.

10 Ways to Optimize a GIF File

4. Reducir la cantidad de marcos

Puede reducir aún más el tamaño de la animación GIF si vuelve a abrir el GIF exportado de nuevo en Photoshop y elimina cada segundo o tercer fotograma del panel de la línea de tiempo. Luego debe seleccionar todos los cuadros restantes y aumentar la duración de ellos para compensar la pérdida de cuadros. Si no haces esta compensación, tu animación se reproducirá más rápido que el original. Una vez que esté listo, puede guardar la nueva versión, que debería ser mucho más pequeña que la original.

10 Ways to Optimize a GIF File

5. Número de colores

La opción más relevante para optimizar el tamaño de un archivo GIF es la cantidad de colores utilizados en la Tabla de colores. La cantidad máxima de colores es 256, que proviene de la limitación de 8 bits de profundidad. En general, es bueno quedarse con 64 colores o menos, pero dependiendo del video original es posible que necesite aumentar la cantidad de colores para obtener un mejor resultado.

10 Ways to Optimize a GIF File

6. ¿Qué algoritmo de reducción de color elegir?

  • Perceptual para crear una tabla de colores personalizada dando prioridad a los colores para los cuales el ojo humano tiene una mayor sensibilidad.
  • Selectivo para crear una tabla de colores similar a la tabla de colores Perceptual, pero que favorece amplias áreas de color y la preservación de los colores de la Web. Esta tabla de colores generalmente produce imágenes con la mayor integridad de color. (Selectivo es la opción predeterminada).
  • Adaptable para crear una tabla de colores personalizada mediante el muestreo de colores del espectro que aparece con mayor frecuencia en la imagen. Por ejemplo, una imagen con solo tonos de verde y azul produce una tabla de colores compuesta principalmente de verdes y azules. La mayoría de las imágenes concentran colores en áreas particulares del espectro.
  • Restrictivo utiliza la tabla de colores estándar, de 216 colores y segura para la web, común a los paneles de 8 bits (256 colores) de Windows y Mac OS. Esta opción garantiza que no se aplique ningún efecto de oscilación del navegador a los colores cuando la imagen se muestre con color de 8 bits. Si su imagen tiene menos de 216 colores, los colores no utilizados se eliminan de la tabla.
10 Ways to Optimize a GIF File

7. Tramado

Dado que los archivos GIF contienen una cantidad limitada de colores, es posible que deseemos imitar los colores que faltan con los disponibles mediante el difuminado. Desde el menú "Dither", elegimos uno de los algoritmos para dicha imitación. El método de "Difusión" nos permite ajustar la cantidad de oscilación. Con los algoritmos "Pattern" y "Noise" no hay nada que ajustar. Cuanto más difuminado en una imagen, mayor será el tamaño del archivo. El difuminado agrega píxeles de colores diferentes muy cerca el uno del otro para simular colores secundarios o gradaciones suaves en color. Algunas imágenes deben contener tramado para que se vean bien, pero es mejor usar la menor cantidad de tramado posible para mantener el tamaño de archivo más pequeño.

10 Ways to Optimize a GIF File

8. Web Snap, Lossy, Transparency and Interlaced

  • Web Snap se usa para ayudar a evitar el tramado en un navegador. Se realiza al ajustar algunos de los colores a colores seguros para la Web. Cuantos más colores seguros para la Web estén presentes en un GIF, menor será la oscilación del navegador. Un valor de 0% no cambiará ningún color, mientras que un valor de 100% cambiará todos los colores de la imagen a Web-safe.
  • La compresión con pérdida Lossy descarta la información visual, lo que puede reducir el tamaño del archivo.
  • Si la imagen contiene Transparencia, seleccione Transparencia para conservar píxeles transparentes; anule la selección de Transparencia para rellenar píxeles total y parcialmente transparentes con el color mate.
  • Los archivos GIF entrelazados se cargan en un navegador en unas pocas pasadas (como las JPEG progresivas).


9. Compara versiones originales y optimizadas

Una vez que haya agregado una gran cantidad de cambios personalizados, puede verificar la diferencia en el tamaño y la calidad del archivo utilizando la vista 2-Up.

10 Ways to Optimize a GIF File

10. Vista previa, guardar ajustes preestablecidos y optimizar a tamaño de archivo

Si está satisfecho con su configuración, eche un vistazo a su GIF final con la opción Vista previa en un navegador y no olvide guardar su configuración como preestablecida. También puede especificar un límite de tamaño de archivo con esta opción adicional del menú Optimizar y, una vez que se aplique, Photoshop intentará ajustar el tamaño con la mejor calidad de imagen posible.

10 Ways to Optimize a GIF File
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.