Every possible way to compress a GIF

This first section covers the different features of a GIF that you can adapt to any software.

Skip to the execution section for the step-by-step tutorial on how to use modern software for GIF compression.

What the GIF?

GIFs are a bitmap image format that use LZW (Lempel-Ziv-Welch) compression to store sequential image frames in an indexed color palette.

A bunch of jargon – I know. But before diving into the different ways to export a GIF, it's helpful to understand what a GIF is and how it works. 

Unlike modern video formats that use highly efficient compression algorithms, GIFs are built on older, more limited technology that affects how they are exported and optimized. With any compression, there is unavoidable quality loss, but understanding these limitations can help figure out why and how to limit your GIF sizes with intentional choices that make the fuzz seem like a feature.

Let’s first define some important terms.

What are codecs?

Codecs (coder-decoder) are file packages that compress and decompress digital media files, like video, audio, or image sequences. Different codecs use different compression techniques to balance file size and quality by removing redundant data (lossy) or preserving all data (lossless). 

• Lossy: Permanently discards data (e.g., JPEG for photos, MP3 for audio). Smaller files, but quality degrades over repeated saves.

• Lossless: Reduces file size without data loss (e.g., PNG for images, FLAC for audio). Larger files, but perfect quality retention.

How do codecs work?

Codecs can analyze patterns (e.g., repeating colors in an image or similar audio frequencies) to replace redundant data with shorter references, using complex math (like Fourier transforms in MP3s) to discard "unnoticeable" details.

While modern video files (.mp4, .webm, etc.) use advanced codecs like H.264 or AV1 to limit redundancies between frames, GIFs do not use codecs, and instead use a much simpler form of compression that dates back to the late 1980s (look up Stephen Wilhite to learn more about the history of its origins).

So what do GIFs use?

GIFs use the LZW (Lempel-Ziv-Welch) lossless compression method, meaning no pixel data is discarded during compression. LZW works by building a dictionary of repeating pixel patterns and replacing them with shorter codes. Instead of storing the same shapes or colors multiple times, the GIF file references its dictionary entry, reducing file size efficiently.

**However, GIFs are limited to 8-bit indexed color, meaning each pixel is stored as a reference to a color in a predefined palette (1 byte per pixel). Each frame can contain up to 256 colors, selected from a full 24-bit (16.7 million color) range. Since the final GIF output is restricted to 8-bit color, any colors outside the selected palette must be approximated through dithering or color reduction. While LZW compression preserves pixel data, the GIF format itself can still result in noticeable quality loss due to its color limitations, leading to color banding or grainy patterns (known as dithering).

GIFs have:

• Indexed color palette: Limited to 256 colors per frame, reducing file size but restricting detail.

• Frame-based animation: Stores multiple images (frames) with timing controls for playback.

• Transparency: 1-bit transparency (pixels can be fully transparent or opaque).

• LZW compression: Efficient for flat colors and simple graphics (like icons or vector illustrations), but struggles with gradients/photos.

The process goes like this:

• Initialization: Starts with a base dictionary of individual values (e.g., 256 colors in a GIF).

• Scanning: Reads data sequentially, looking for repeating sequences.

• Encoding: When a new pattern is found, it’s added to the dictionary and replaced with a shorter code.

• Output: Compressed data is a string of codes referencing the dictionary.

So why is this important?

There are certain situations where using a GIF is preferable to a video file. GIFs are technically bitmap image files that have the ability to store multiple image frames in one file – like a flipbook. Since email clients treat GIFs as standard image files, they can be processed and displayed natively by email systems.

Videos, on the other hand, require decoders (video players) to play back properly. Since email clients like Outlook and Gmail do not support embedded video playback, they block video files from running directly within emails. Instead, you must either embed a link to an external video or use a GIF, which plays automatically without the need for a video player.

On the web, there is more flexibility, as you can embed video players, .riv files, or .json files to playback an animation or video. Modern video compression softwares can also often yield a higher quality video with a smaller size (like with the GOAT – Handbrake) than a compressed GIF. 

Understanding the pros and cons of the different file types available can help you make an informed decision on which file makes most sense on the web or email that best aligns with your goals.

With these concepts in mind, there are certain techniques you can utilize to compress a gif.

Max Color Size

• GIFs use a 256-color palette per frame, this means dithering (a technique that simulates missing colors using patterns) is often needed, which increases file size.

• Reducing the color palette is one of the most effective ways to compress a GIF.

Frame Rate & Number of Frames

• Unlike video formats that can store high frame rates (e.g., 60fps) efficiently, GIFs store each frame as a separate image, making them larger in file size.

• The more frames you include, the bigger the file, so reducing the frame rate (e.g., from 30fps to 10fps) significantly reduces size.

• Frame skipping or dropping unnecessary frames can improve compression without major quality loss.

Note: Some platforms actually instill frame limits for gifs, not allowing them to be played back after a certain frame count - meaning, even if you could create a 10 minute GIF, it doesn't mean that the platform you’re playing it on could play it back. Keep GIFs short, around 5-10 seconds max.

Dimensions of gif:

• Like most bitmap file types, reducing the size of the gif (i.e. from 1080x1080 to 600x600), will reduce the file size.

Execution:

So we got the theory out of the way, now how do you actually reduce the file size?

Note: I will only be covering compression based on export settings of the respective listed software. Some of these can be combined (i.e building the animation in After Effects, exporting a .mov, then importing to Photoshop to finally export the GIF). I will also only be covering how to compress GIFs and not the GIF alternates, like .riv or .json files. 

Each software offers their respective way to export and compress a GIF file. One of the most comprehensive export systems is through Photoshop’s Save for Web feature. But depending on the content of the GIF, exporting through After Effects and ezgif can work just as well.

The first thing you should always determine before even creating the GIF, is what limitations do I have to keep in mind? 

Since your parameters will vary, for the sake of example, I’ll use the parameter that the GIF can’t be larger than 2 mbs because it is going to be used in an email that will have multiple different images throughout. I’ll also keep in mind the max dimensions I would need. I don’t necessarily need a 1920x1080 composition, and since the gif will be in a small section next to text, I opt to have it 600px wide. I’ll also build the GIF using as few colors as possible and limit any ‘opacity’, ‘fade’ animations to avoid adding any addition colors (since any ‘fades’ are gradations of color and count as a separate color value in the 256 colors you can assign in a GIF file., for instance 100-50% opacity animation will count each interval of color, 90%, 80%, 70% values, as a separate value in the gif, thus increasing its size).

In the perfect environment, by keeping the GIF below the 256 color range and frame size in mind, you would naturally end up with a smaller gif upon export. 

But then what do you do when your corporate overlords ask you to take a 1920x1080, 30 frame video with a 16-bit color range and gradations, and compress that for email?

It’s not ideal – but you can kind of finesse it.

We will be using this video as an example.

Video by Roger Jeffreys from Pixabay.

Adobe Photoshop

Video compression

First compress the .mp4 file as much as you can. I used Handbrake (free software). This took the 15.9 mb video to 4.9 mbs.

Don’t get too excited by the size at this stage, as making it into a GIF makes the size bigger. We will be aiming for our 2 mb limit as our previous example.

First import your video into Photoshop.

Save for Web

Lets check what the current estimated output size will be.

To do this, go to Files > Export > Save for Web (legacy).

These are all the save for web options. You can see by looking at the bottom left of the panel that the size of the gif is 248.4 Mbs.

That’s more than 100x what we’re looking for, so let’s change some things.

Click Done to return to the Photoshop file.

Frame Rate

The first thing you can do is limit the frame rate. Right now the frame rate of the video is 24 frames per second, but we don’t need it to be that smooth in playback. By lowering the frame rate, you lower the amount of frames that show up per second on playback, making the file size smaller.

On your timeline, click the hamburger icon on the right most size of that panel.

Click Set Timeline Frame Rate.

As you can see, this particular video plays back at 30 frames per second. Let's change this to 8.

Click the dropdown menu and click Custom. Then type in 8.

You may want to play around with these settings to see what frame rate you are fine with. 8 frames will make it really jittery, but it will reduce the frame rate by a great margin. If time permits, I would lower it to 12 fps first and test if you can reach your size needs with minor changes before jumping to 8. For this particular file, with it being so large and having many colors, I opted to go for the most extreme frame reduction. 

Ultimately, you are making a choice to achieve the balance of how much quality loss is worth it and how noticeable for the average person it is while optimizing your GIF size.

If you check the GIF output size now from Save for Web, it is now 75.44 mbs. We’re aiming for 2 mbs, so there's a few more things we can do to compress.

Video Length

Another way is to determine if you need all 10 seconds of the video. Chopping the length is a great way to limit the size of the GIF. In this GIF, it is a timelapse of a busy street. I get the gist of what the GIF is showcasing five seconds in, and it loops. So in this case, I cut the length in half to 5 seconds.

Dimensions

Another way to reduce the size of the GIF is by reducing the overall canvas size. You can do this under Image > Canvas size, but I opt to do this in the Save for Web dialogue box instead to maintain the original look on the timeline for comparison.

Since this is for email, it doesn’t have to be 1920x1080 as the GIF won’t take up the whole monitor width. 

Instead I will lower the size to 600 width. 

I chose 600 for this as most email platforms max width tends to be 600 pixels wide, but I would check with the email system you are using for most accurate numbers. Also consider, 600px would be a header width size, but if you are doing a two column, GIF-next-to-text, you can make the dimensions even smaller. There may be cases where you would still want to use 600 pixels in the case of mobile stacking of your email, but even in cases like this, most mobile ‘full-widths’ would range from 300px to 350px, so plan the size accordingly to your needs. 

Since we are trying to reduce Mb size, it’s good practice to make the gif the smallest size possible while still being legible across Desktop and Mobile. So I will keep it to 600px wide.

The size of the gif now is 8.72 Mbs.

Resampling

You will notice that in the Image Size section there is a Quality dropdown option saying Bicubic. Changing this will only adjust the size by the kilobytes, so it isn’t as useful to us in this case, but here's a rundown on the resampling methods in Photoshop if you are curious on the differences.

Resampling is the process of changing an image’s pixel dimensions (resolution) by adding or removing pixels. For example, resizing a 1920×1080 image to 600×337 (downsampling) or to 6000×4000 (upsampling).

Resampling will always degrade quality to some degree, even when downsampling. Downsampling loses pixel data permanently; upsampling invents new pixels (interpolation), often creating softness or artifacts.

Resampling methods:

• Nearest Neighbor: Preserves hard edges by copying the nearest pixel's value without interpolation. It’s ideal for pixel art, retro graphics, or when avoiding anti-aliasing. But note it creates "jagged" edges in smooth images, so it’s not so great for photos.

• Bilinear: Faster scaling, but lower quality (uses 4 nearby pixels for interpolation). Rarely used today as it has largely been replaced by Bicubic in most workflows as it can appear slightly blurry compared to Bicubic.

• Bicubic (Default): Smooth results for photos (uses 16 nearby pixels with weighted averages). It is best for gradients, skin tones, and tonal transitions. In older versions of Photoshop it was labelled "Bicubic (Smooth Gradients)".

• Bicubic (Linear): A linear variant of Bicubic (It’s called ‘linear’ since it uses simpler math to calculate the resampling, not to be confused with Bilinear). It has a very niche use case, like resampling a satellite temperature map, as it keeps colors separated rather than smoothing them. Think of it like a middle ground between Nearest Neighbor’s jaggedness and Bicubic's default smoothness. This method is not commonly used in design/photo editing.

• Bicubic (Sharper): Sharpness-optimized downsampling. Applies subtle sharpening to counteract resampling blur. More aggressive than standard Bicubic and not ideal for upsampling.

Changing the Resampling Method is only necessary if you either downsample or upsample using the Save for Web panel, as we did with this gif. Since it’s such a small difference, and our colors are largely blended gradients in this video, I opt to maintain the default Bicubic Resampling method.

If you want to learn more about resampling, here are some youtube videos that explain the differences mathematically.

Color Table

The next thing we can limit is the colors. As you can see, the color table represents all 256 colors in this image. These colors were determined by Photoshop through their Color Reduction algorithm (currently set to Selective for me, I’ll touch more on the differences in a bit).

You can actually manually change what colors appear by double clicking a square and launching the Color Picker window. 

You will also see that there is one transparent square on the bottommost row. This is because we have transparency enabled. This transparent ‘color’ does counts to the 256 colors that can be used.

In this case we don’t have any transparent elements in our GIF, so I could remove the transparency. You’ll notice that this does add a few more Mbs of file size since it will replace the transparent box with a new matte color. When I start removing colors this won’t be too drastic of a size difference so I opt to remove transparency, but test with your gif on what makes most sense.

As a fun side note, you may be wondering, why some colors have a white dot in the middle of them. A white dot in the center signifies that the color belongs to the legacy 216-color web-safe palette, which was historically important for consistent display across older 8-bit monitors. These markers are purely informational and don't affect your image's output quality unless you're specifically targeting antiquated systems. The center dot is essentially a relic of early web design practices. If you select any color and click the cube icon along the bottom of the color table, you can switch your colors to their Web-Palette variants. Totally not needed in this day and age where monitors can display millions of colors, but just so you know.

Back to our current assignment of reducing file size, one way to do so would be to limit the amount of colors on this color table.

On the very top of the menu, you will see the Colors dropdown option.

Currently it should say 256. 

By reducing this number, you can lower your GIF size.

Remember, if any of the colors seem more muted or are sampled to an undesired range, you can still manually shift the color to the value you’d like. You can also lock colors so they are untouched with color shifting by selecting the desired color and clicking the lock icon on the bottom of the color table.

Note: You can Shift + Click to select multiple color boxes in a row next to each other and Ctrl + Click to click multiple colors not next to each other.

To help determine what colors are used most to see which to lock, you can sort the colors by ‘popularity’ from the hamburger dropdown menu. 

I will lock a few colors and reduce the colors to 32. But before I do that, let’s look at Color Reduction Algorithm, as they are related.

Color Reduction Algorithm

You will notice a dropdown for the Color Reduction algorithm next to the Colors amount. This is essentially the algorithm that determines how Photoshop decides to retain which colors from the image.

Here's a rundown of the different options and the differences:

• Selective (Default): Best for most photographs and complex images. Prioritizes colors that appear frequently and preserves web-safe colors (though rarely needed today). Favors broad color ranges and skin tones. Balanced approach that maintains color integrity. May include some unnecessary colors for very simple vector graphics.

• Perceptual: Best for images where human vision perception matters (e.g., photos with smooth gradients). Emphasizes colors the human eye is more sensitive to, even if they’re less frequent in the image. Natural-looking results for photos. Less precise for graphics with limited colors (e.g., logos).

• Adaptive: Best for images with dominant color tones (e.g., a sunset with lots of reds/oranges). Samples colors most common in the specific image, ignoring frequency in other images. Tailored to the image’s unique palette. Can perform poorly if the image has no dominant colors.

• Restrictive (Web): Best for legacy purposes (only relevant for 8-bit displays). Forces colors into the 216-color web-safe palette. Ensures consistency on ancient monitors. Severely limits color range; rarely useful today.

• Custom: Advanced users who want manual control. Lets you define a fixed color table (e.g., for brand-specific palettes). Full control over exact colors. Time-consuming since you have to manually double click each square and assign a color.

• Black & White / Grayscale: Best for 1-bit (B&W) or 256-shade grayscale images. Converts to pure black/white or shades of gray. Tiny file size for simple graphics. No color data preserved.

• Mac OS/Windows: Uses the native system color palettes of classic Mac OS (8-bit) or Windows (8-bit) to dither colors. Both are legacy dithering methods that map colors to their respective operating system’s 8-bit color system.

Dithering

You will also notice an option for choosing the Dither algorithm, currently set to Diffusion, and the Dither amount, currently set to 100%. Dithering is a trade-off between the visual smoothness of the GIF and file size.

The Dither Algorithms determine the pattern/style of dithering.

• Diffusion (Default): Scatters errors across neighboring pixels for natural blends. Best for photos, gradients, and smooth transitions between colors, but the drawback is that it can look slightly fuzzy.

• Pattern: Uses a rigid geometric pattern, kind of like a checkerboard. This works best for retro/vintage aesthetics and a more predictable, stylized look, but has this obvious repeating texture.

• Noise: Uses a completely random distribution of pixels to simulate missing colors. By avoiding error diffusion, Noise dithering prevents the streaky artifacts in areas with subtle gradients or fine details. It scatters pixels in a more irregular, grain-like pattern, which often preserves sharp edges and hard contrasts. This makes it a strong choice for graphics where edge clarity is critical, such as pixel art, technical illustrations, or images with high-contrast elements, but has a noticeably grainier or noisier appearance.

The Dither Amount slider controls how aggressively the software simulates missing colors when reducing an image to a limited palette When an image’s colors are reduced (e.g., 256 to 32 colors), dithering mixes adjacent pixels to trick the eye into seeing colors not in the palette. For example, a gradient might use alternating red/white pixels to approximate pink.

Dither Amounts:

• 0% (No Dithering): Colors snap to the nearest available in the palette. Creates banding (visible stair-stepping in gradients). Best for crisp graphics (e.g., logos, text).

• 50–80% (Balanced Dithering): Adds subtle noise to blend colors smoothly. Ideal for photos or complex gradients.

• 100% (Maximum Dithering): Applies heavy noise to simulate missing colors. Can look grainy but avoids banding. Rarely needed; use sparingly.

Consider increasing Dither for photos with smooth gradients (e.g., skies, shadows) to avoid banding in limited-color GIFs.

Decrease Dither for flat graphics (e.g., logos, pixel art) and smaller file sizes (less dithering = better compression, more dithering = larger files, as random pixel patterns compress poorly). Always preview at 100% zoom to judge the trade-off.

Try to also pair with the right color reduction algorithm. For example, pair Perceptual/Selective + Diffusion Dither of 50-100% for photos and Adaptive + No Dither for flat colors.

Since I decided to lock some of the colors from the full 256 color range, I stick to the default Selective and Diffusion Dither with 80% dithering amount, and dropped the color range down to 32 colors. 

This brings the size of the gif down to 2.3 mbs.

Lossy and Web snap

We’re almost done. To get to our final goal of 2 mbs, we have to shave off 31 kbs of size from this gif. You can revisit any of the above systems and further tweak those, such as the size, length, and color, but you can also adjust the web snap or lossy settings.

Web Snap: Web Snap shifts colors in your image toward the nearest web-safe colors (the legacy 216-color palette from early internet days). The percentage slider (0–100%) controls how aggressively Photoshop forces this conversion.

If you're intentionally designing for very old systems (e.g., retro pixel art for 8-bit displays). To reduce file size slightly by limiting colors to the web-safe palette (though modern formats like PNG-8 or WebP handle this better). May marginally improve compatibility with ancient browsers. Sacrifices color accuracy and vibrancy. Rarely useful today. Leave this at 0% unless you’re targeting vintage hardware. Modern screens render millions of colors accurately.

Lossy: Lossy compression selectively discards pixel data in GIFs to reduce file size. Unlike .jpeg (which blurs), it removes redundant details while preserving edges. It’s great for complex GIFs with photos, gradients, or noise (e.g., memes, short clips) and when file size matters more than perfect fidelity (e.g., email animations). You can for the most part shrink GIFs Lossy value by 5–40% without obvious quality loss. Overuse (values >20%) introduces artifacts like blockiness or speckling. Start with 5–10% and preview.

For crisp graphics (logos, text), it's probably best to keep it at 0 and instead adjust some of the previous parameters

Combine Lossy + Selective color reduction + Diffusion dither for optimal balance of size/quality. Ignore Web Snap unless you’re time-traveling to 1998 (Fun fact: The year I was born 😛).

I set my lossy value to 27%, bringing the final GIF size to 1.991 mbs.

Final gif size: 1.991 mbs

We reached our goal! But I will cover a few more features even if it is not applicable to this GIF.

Transparency

You might have noticed the Matte and Transparency dither algorithm. GIFs only support 1-bit transparency (fully opaque/transparent). The Matte and Dither settings work together to simulate anti-aliasing on the edges of your GIF as it transitions to a transparent background, preventing any halo artifacts, ugly color fringes (if Matte mismatches the final background), and over-dithering grainy edges that inflate file size unnecessarily.

We didn’t need to use this in my case since we don’t have transparency, but if you are creating a transparent gif, you can set the dither algorithm to either have No Transparency Dither, Diffusion, Pattern, or Noise. If you select Diffusion, you can also adjust the amount of diffusion. 

The dither method controls how semi-transparent edges (anti-aliased pixels) blend into transparency:

• Diffusion: Softens edges by scattering transitional pixels naturally. Adjust the Dither Amount (0–100%) to control bleed:

  • Low (20–40%) Cleaner edges, but may show jagged transitions. 

  • High (60–80%) Smoother fades, but adds graininess. 

  • Diffusion dithering helps disguise jagged edges where opaque pixels meet transparency, but overdoing it can create a fuzzy halo. Preview at 100% zoom to balance smoothness vs. crispness.

• Pattern: Applies a geometric dither (e.g., checkerboard) for stylized, uniform transparency transitions. I personally rarely use this.

• Noise: Randomizes edge pixels, preserving sharpness but introducing grain. Ideal for pixel art or hard-edged graphics.

There is also a Matte option. This determines how semi-transparent pixels blend before the GIF’s 1-bit transparency is applied. This simulates how the GIF will look against a specific background (e.g., white, black, or another color). If your GIF will sit on a white webpage, set Matte to white to pre-blend edge pixels. This prevents a grayish halo. If the background is unknown, use Matte: None for true transparency (but edges may appear harsh on some backgrounds). Try to match the Matte color to your final display background. Mismatched Matte colors cause visible halos around edges.

Manually reduce frames

One more thing I’d like to cover. This method is what I consider the ultimate way to finesse with gif exports in Photoshop, but depending on the length of your gif, it may take a lot longer to achieve. 

There may be cases where due to your corporate overlords, you can’t compromise on drastic frame per second limitations. For this GIF, I have it currently at 8 fps, which can be very jittery, but there is a way to have it at a higher fps, but make it so that there are actually less frames saved in your GIF file. It just takes more work to do, but it is possible.

I do this by manually deleting and adding frames and frame holds to simulate the impact of a higher frame animation, while not having the GIF file actually save out all of the frames. 

I would first export the Video file as a GIF in the desired frame rate you prefer. I have it at 24 fps, which, with all my other compression settings, creates a 6 mb GIF. Already, by total frame size, it is 120 frames, whereas with 8 fps, it was at 40 frames.

Drag the newly exported 6 Mb gif back into Photoshop.

You will see already, that it looks different than the video version, as the timeline has changed into a Frame animation timeline rather than a Video timeline.

This essentially shows each individual frame as their own ‘layer’ sequentially, rather than one merged timeline.

Clicking the frame will reveal the image that the GIF is saving for that frame slot, totaling 120 images.

But as you click though you’ll realize, that even at 24 frames playback, some frames sequentially are duplicated, meaning the information on the frame, for example for frames 2 and 3, hold the same image, but are separated out as two separate frames in the animation. 

If you click the dropdown arrow on each frame, you will see that each frame is held for 0.04 seconds.

The value 0.04 seconds for frame delay in Photoshop stems from the foundational calculation for achieving 24 fps in a GIF. To determine how long each frame should be held, you divide the total duration of one second (1000 milliseconds) by the target frame rate (24 FPS), which gives ~41.67 milliseconds per frame (1000 ÷ 24 ≈ 41.67 ms). This repeating decimal is the exact theoretical duration needed to maintain 24 FPS. However, the GIF format’s technical capacity to support fractional frame delays is often constrained by software limitations. While the GIF specification itself allows sub-millisecond precision in theory, most tools—including Photoshop—round delays to whole milliseconds or two decimal places. For instance, 41.67 ms cannot be directly input in Photoshop; the closest options are 42 ms (~23.8 FPS) or 40 ms (25 FPS). Photoshop defaults to rounding down to 40 milliseconds (0.04 seconds), prioritizing simplicity and near-equivalent playback speed. This rounding occurs because Photoshop’s interface displays frame delays in seconds (up to two decimal places), and 40 ms ÷ 1000s = 0.04 seconds. Though this results in a slight deviation from true 24 FPS (yielding 25 FPS instead), it’s the software’s closest practical approximation.

With that in mind, logistically, the GIF is saving these repeat images twice when the file is compiled, which increases the file size. 

What you can do is delete frame 3, and instead having the frame hold for 0.04 seconds on frame 2, hold frame 2 for 0.08 seconds (double the time), to simulate the effect of two frames by just having one frame held longer. Since the GIF is only saving one bitmap image for the frame plus the “time hold” data, it will make the GIF size smaller.

The time consuming part is going through (in this case) all 120 frames, deleting the extra ones, and updating 0.04 to 0.08.

Ideally you want to have as few frames as possible. Besides updating the timing by deleting extra layers, you can also intentionally delete non duplicate layers that in playback don’t seem to compromise the motion of the gif.

To delete a frame, click the frame, and press the trash can icon on the timeline.

Note: Don’t use the Delete key on your keyboard or Ctrl+X as they won’t properly delete your frames and will instead just delete the layer information, creating an empty frame in its place.

Since I’m intentionally making the decision on which frames are needed, I’m able to cut down from 120 to 40 physically saved frames, dropping the gif size to 1.98 Mbs.

Finally press Save to export your GIF.

Optimize to file Size

There is also a feature that does the optimization for you.

I tend to not use it, as it will prioritize shrinking to the desired file size opposed to the intentional decisions we can make along the way to ensure it doesn’t look that bad when lower res- but if you’re in a rush, that feature does exist.

Ensure that you first set your desired image size before optimizing, as this feature prioritizes the settings in the Color Table when it optimizes the GIF.

In the Save for Web window, click on the hamburger icon next to “Preset” on the right. 

Then in the dropdown, click Optimize to File Size.

Here you will set your desired size:

This will optimize your GIF to your desired size. Note the size is labeled in kilobytes, so for us, 2000 kbs is 2 mbs.

Shameless plug: Ever get the "Write Permissions Error" in Adobe Photoshop when exporting GIFs? I wrote about how I work around this issue here.

Canva

Not one for fancy design software? Or are you a marketer volun-told to wear multiple hats? 

Canva unfortunately doesn’t have an in-depth, built-in GIF compression algorithm, but there are some things you can do. 

Under the “Share” button, highlight the GIF export.

Depending if you are using a page animation or a video animation, you can drag the slider to lower the size of your frame. By making the overall canvas smaller, this can decrease the GIF size. *Note this is only available in premium. So if you’re a free user, I’d opt to keeping the original canvas size small to begin with.

The work around for compressing GIFs in Canva is typically using a third party GIF compressor. 

One free alternative is:

ezgif

https://ezgif.com/optimize 

Start by adding the GIF you exported from Canva to ezgif.

Note: There is a max file size of 200 mbs and using this function, you can only import a GIF file. ezgif also has a video to gif feature if that is needed (https://ezgif.com/video-to-gif/).

Once added, choose the desired optimization method and compression level.

Ezgif actually explains the difference between each below the line on their website.

Note: If you are just exporting a video to a gif, you might as well just use EZgifs video to gif feature (https://ezgif.com/video-to-gif/) to skip the extra Canva step. The only real reason you’d need Canva is if you were designing your gif in Canva first or you need a production file record in your team's Canva projects folder. 

Lottie Labs

Lottie labs only supports vector-based imports, meaning we won’t be able to import the video we’ve been using above. Naturally though, vector files tend to be smaller in size than bitmap images, as a vector style will typically yield a smaller range of color use.

Therefore there are actually only a few options for compression for GIFs exported through Lottie Labs. None-the-less, the option is available.

In the export format options, select GIF.

Here are the options available to change upon export. You can choose the size, frame rate, and whether you’d like a transparent background.

The lower the frame rate and smaller the size of the GIF will lower the final size of the file.

After Effects

[Coming soon]

Looking ahead

[Coming soon]

🔹 Have other cool ways to compress a GIF? Let’s me know in the comments!