We want to learn about your experience with Tuts+. Take part to earn $50! Help us out to earn $50! Get Started
  1. Design & Illustration
  2. GIF

Cómo optimizar GIF animado: 10 maneras

by
Read Time:8 minsLanguages:
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 Javier Salesi (you can also view the original English article)

En este tutorial, veremos detenidamente todas las opciones disponibles para convertir un video en una animación GIF y cómo optimizar el tamaño de su archivo.

¿Qué es un archivo GIF?

Antes de comenzar, veamos minuciosamente lo que es un archivo GIF. El término GIF es el formato estándar para comprimir imágenes con grandes áreas de colores uniformes y detalles nítidos como los de arte lineal, logos o texto. El formato de imagen de 8 bits de profundidad habría desaparecido de la web tras la introducción de los formatos de archivo JPEG y PNG, pero GIF todavía es un formato de archivo favorito para la web gracias a su característica de animación de fotogramas. 

A propósito, si trabajas a menudo con GIFs animados, podrías querer consultar una solución automatizada: la Acción para exportar GIF con Photoshop disponible en GraphicRiver.

Gift Export Photoshop ActionGift Export Photoshop ActionGift Export Photoshop Action

Cómo optimizar un GIF con Photoshop: 10 maneras


Si quieres aprender estas técnicas a través de un video, consulta nuestra lección en el canal de Envato Tuts+ en YouTube:

1. Cómo recortar la animación para comprimir GIF

Primero que nada, necesitarás abrir el archivo de video con Photoshop. La mayor parte del tiempo no necesitarás toda la secuencia para la animación GIF, así que puedes recortar el video aplicando Ventana > Línea de tiempo. Activa la opción de Reproducir indefinidamente y trata de encontrar un buen punto para recortar tu video.

Trimming the video in adobe photoshopTrimming the video in adobe photoshopTrimming the video in adobe photoshop

2. Cómo reducir el tamaño de la imagen para optimizar GIF

Puedes reducir el tamaño de la imagen, aplica Imagen > Tamaño de imagen o pulsa la combinación de teclas Alt-Control-I. La capa de tu video tendrá que convertirse en Objeto inteligente si redimensionas la imagen, pero no tienes que preocuparte de esto pues no afectará nuestro flujo de trabajo. 

Resizing the image sizeResizing the image sizeResizing the image size

3. Cómo guardar para la web el archivo de calidad GIF

Otra opción de reducir el tamaño del archivo GIF es la función "Guardar para web", puedes encontrarla aplicando Archivo > Exportar > Guardar para web o usa la combinación de teclas Alt-Mayúsculas-Control-S. 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 fotograma, pues el cuadro de diálogo Guardar para web hará el trabajo por nosotros una vez que selecciones el formato de archivo GIF como tu salida. Nota que las opciones de animación aparecerán en la esquina inferior derecha del cuadro de diálogo. En caso de que decidas reducir más el tamaño de tu imagen puedes hacerlo aquí.

saving the gife file for Websaving the gife file for Websaving the gife file for Web

4. Cómo reducir el número de fotogramas para comprimir GIF

También puedes reducir el tamaño de la animación GIF si reabres el GIF exportado de nuevo en Photoshop y eliminas cada segundo o tercer fotograma del panel Línea de tiempo. Luego deberías seleccionar todos los fotogramas restantes e incrementar la duración de ellos para compensar la pérdida de fotogramas. Si no haces esta compensación tu animación se reproducirá más rápido que la original. Una vez que estés listo puedes guardar la nueva versión, que debería ser mucho más pequeña que la original.

Reducing the number of frames in GIFReducing the number of frames in GIFReducing the number of frames in GIF

5. Cómo cambiar el número de colores para reducir el tamaño del GIF en Photoshop 

La opción más relevante para optimizar el tamaño de un archivo GIF es el número de colores utilizados en la tabla de colores. La cantidad máxima de colores es 256, que surge de la limitación de los 8 bits de profundidad. En términos generales, es bueno apegarse a 64 colores o menos, pero dependiendo del video original podrías necesitar incrementar el número de colores para obtener un mejor resultado.

How to change the number of the colors of the GIFHow to change the number of the colors of the GIFHow to change the number of the colors of the GIF

6. Cómo elegir el algoritmo de reducción de color para la calidad del GIF

  • Perceptual para crear una tabla de colores personalizada dando prioridad a los colores para los que el ojo humano tiene mayor sensibilidad.
  • Selectivo para crear una tabla de colores similar a la tabla de los colores perceptivos, pero favoreciendo áreas amplias de color y la preservación de colores web. Esta tabla normalmente produce imágenes con la mayor integridad del color. (Selectivo es la opción predeterminada). 
  • Adaptable para crear una tabla de colores personalizada muestreando colores del espectro que aparecen más comúnmente en la imagen. Por ejemplo, una imagen con únicamente tonos de verde y azul produce una tabla de colores hecha primordialmente de verdes y azules. La mayoría de las imágenes concentran los colores en áreas particulares del espectro.
  • Restrictivo utiliza la tabla estándar de seguridad web de 216 colores común para los paneles de 8 bits (256 colores) de Windows y Mac OS. Esta opción asegura que ningún tramado de navegador se aplica a colores cuando la imagen es desplegada utilizando colores de 8 bits. Si tu imagen tiene menos de 216 colores, los colores inusuales son eliminados de la tabla.
choosing the color reduction algorithmchoosing the color reduction algorithmchoosing the color reduction algorithm

7. Cómo usar el tramado para reducir tamaño del GIF en Photoshop

Ya que los archivos GIF contienen un número limitado de colores, podríamos querer imitar los colores faltantes con los disponibles utilizando el tramado. Del menú Tramado, elegimos uno de los algoritmos para tal imitación. El método Difusión nos permite ajustar la cantidad de tramado. Con los algoritmos Motivo y Ruido, no hay nada que ajustar. A mayor tramado en una imagen, mayor es el tamaño del archivo. El tramado añade pixeles de diferentes colores próximos para simular colores secundarios o degradados suaves en color. Algunas imágenes deben contener tramado para lucir bien, pero es mejor usar la menor cantidad de tramado posible para mantener el tamaño del archivo con el menor peso. 

choosing the dither functionchoosing the dither functionchoosing the dither function

8. Cómo usar las funciones de ajuste a web, menos calidad, transparencia y entrelazado para comprimir GIF 

  • Ajuste a web se usa para ayudar a evitar tramado en un navegador. Se lleva a cabo ajustando algunos de los colores a colores seguros para la web. Mientras más colores seguros para la web estén presentes en un GIF, se traducirá en menos tramado del navegador. Un valor de 10% no cambiará ningún color mientras un valor de 100% cambiará todos los colores en la imagen a seguros para la web.
  • Una compresión con menos calidad descarta información visual, lo cual puede reducir el tamaño del archivo.
  • Si la imagen contiene Transparencia, selecciona Transparencia para conservar los pixeles de transparencia; deselecciona Transparencia para llenar completamente y parcialmente los pixeles de transparencia con el color mate.
  • Los archivos GIF entrelazados se cargan en un navegador en pocos pasos (como los JPEGs progresivos).
using web snap lossy transparency and interlaced functions using web snap lossy transparency and interlaced functions using web snap lossy transparency and interlaced functions

9. Cómo comparar el archivo original y la versión optimizada del GIF con Photoshop

Una vez que agregaste muchos cambios personalizados puedes verificar la diferencia en el tamaño y la calidad del archivo utilizando la vista horizontal de 2 hojas.

comparing the original and optimized gifscomparing the original and optimized gifscomparing the original and optimized gifs

10. Cómo usar las funciones de previsualizar, guardar ajuste preestablecido y optimizar a tamaño de archivo para la calidad del GIF

Si estás satisfecho con tus parámetros observa tu GIF final con la opción Previsualizar en un navegador y no olvides guardar tus parámetros como ajustes preestablecidos. También puedes especificar un límite de tamaño de archivo con esta opción adicional del Menú optimizar y una vez que se aplique entonces Photoshop tratará de encajar el tamaño con la mejor calidad de imagen posible.

saving the preset using preview and optimizing to file sizesaving the preset using preview and optimizing to file sizesaving the preset using preview and optimizing to file size

¿Qué manera de comprimir el GIF prefieres utilizar? 

Ahora sabes diez maneras sencillas de reducir el tamaño de un GIF en Photoshop. Espero que este artículo haya sido útil y si buscas productos de Photoshop relacionados con el formato GIF, entonces consulta estas asombrosas acciones y plantillas:

Acción para exportar GIF con Photoshop

La acción para exportar GIF con Photoshop te permite tomar múltiples imágenes, cargarlas automáticamente en el software y exportarlas como GIF.

Gif Export Photoshop ActionGif Export Photoshop ActionGif Export Photoshop Action

Plantilla de historias de Instagram VHS animadas con calidad GIF v.2

Si quieres crear historias de Instagram animadas con aspecto VHS y distorsión de video o archivos GIF animados a partir de tus fotos, checa esta plantilla Photoshop, que es extremadamente fácil de usar y adecuada para cualquier imagen.

Animated VHS Instagram Stories Template v2Animated VHS Instagram Stories Template v2Animated VHS Instagram Stories Template v2

Acción de Photoshop para ilustración de zombie mugriento animado

Esta fabulosa acción de Photoshop te ayudará a añadir a tus fotos el efecto de zombie mugriento animado que es muy popular en la actualidad. En el archivo principal, encontrarás un archivo de acción, un archivo de motivo y un enlace a un videotutorial.

Animated Zombie Grime Art Photoshop ActionAnimated Zombie Grime Art Photoshop ActionAnimated Zombie Grime Art Photoshop Action

Acción para convertir chispas animadas en un GIF con Photoshop

Si buscas algo más brillante y de aspecto mágico, esta acción es la mejor elección para ti con la finalidad de optimizar un GIF. Dale a tus fotos esa apariencia fabulosa y resplandeciente en pocos clics.

Gif Animated Sparkles Photoshop ActionGif Animated Sparkles Photoshop ActionGif Animated Sparkles Photoshop Action

Póster alusivo al Synthwave de los años 80 con animación - Acción de Photoshop

Esta acción también es una de mis favoritas. Te brinda la posibilidad de crear fantásticos pósteres animados en Adobe Photoshop con un estilo synthwave/retrowave. Una formidable y útil herramienta para recrear la atmósfera de los años 80.

Animated 80s Synthwave Poster - Photoshop ActionAnimated 80s Synthwave Poster - Photoshop ActionAnimated 80s Synthwave Poster - Photoshop Action

¿Quieres aprender más sobre la creación y edición de GIFs en Photoshop? Lee estos fenomenales tutoriales:

One subscription.
Unlimited Downloads.
Get unlimited downloads