Animated GIFs Heavier Than a Video

The heaviest file on the page

Animated GIFs turn up everywhere: a looping banner on a home page, a screen recording in a how-to post, a short clip in a newsletter.

They seem light. They are images, after all, and they play without anyone pressing a button.

But an animated GIF is often the heaviest file on the page, sometimes heavier than every photograph on it combined, and a phone has to download every frame.

A few seconds of animation can weigh more than a video several times longer.

Why GIFs are so heavy

• Every frame is stored as a picture in its own right.
• The format dates from the 1980s, with compression to match.
• Only 256 colours per frame, so photographs turn grainy.
• No controls, so nobody can pause or skip it.
• Size grows with every extra second, pixel and frame.

The first explains most of the weight. A video stores mainly what changes from one frame to the next; a GIF stores far more of each frame, so a few seconds of motion becomes dozens of near-complete pictures.

Finding them on your site

Open a page in Chrome or Firefox, open the developer tools and look at the network panel sorted by size. Any GIF near the top of that list deserves attention.

WebPageTest shows the same breakdown for a page, and PageSpeed Insights flags images that could be smaller among its suggestions.

Check the home page, your most visited blog posts and any landing page used in advertising.

Phone visitors pay twice

On a phone, a heavy GIF costs time and money. Over a cellular connection it can take long enough that the visitor scrolls past an empty box, or gives up before the page settles.

It also comes out of the visitor's data plan, whether or not they ever watch the animation.

And because a GIF starts downloading as soon as the page loads, nobody gets to choose.

What a short video does instead

The same animation saved as an MP4 video is usually a small fraction of the size, because video compression records changes between frames rather than whole frames.

MP4 plays in every current browser: Chrome, Firefox, Safari, Edge and Internet Explorer 11.

On a computer, a short, silent video can start by itself and loop, much like a GIF.

Phones are different, for now. iPhones play video full screen after a tap, and most Android phones also wait for a tap, so a phone visitor sees a still frame with a play button.

When a still image is better

Many GIFs are decoration: a looping banner, a spinning product, an animated logo.

One well-chosen frame usually says the same thing for a tiny fraction of the weight.

For step-by-step instructions, numbered screenshots are often clearer than an animation, because readers can stay on each step for as long as they need.

A worked example

A virtual assistant who manages inboxes, calendars and bookkeeping for small business owners writes a weekly blog of software tips: filtering email, sharing calendars, tidying spreadsheets.

Each post carried two or three animated GIFs recorded from the screen, showing every click as it happened.

Several posts did well in search. But readers on phones said the pages took a long time to appear, and one client mentioned that a single post had eaten into her phone's data.

Screen recordings saved as GIFs are heavy because they are wide and long: a full browser window, ten seconds or more, every frame stored.

The text and the few small images in each post were light. One post's GIFs weighed more than all the other images on the site together.

The longer recordings were exported again as short MP4 videos with a still first frame and a play button. The simplest became two or three numbered screenshots, cropped to the part of the screen that mattered.

One GIF stayed: a two-second loop of a single click, cropped small, where the motion was the whole point.

Converting what you already have

Most GIFs began life as a video or a screen recording. If the original exists, export it again as an MP4 at the width the page displays, rather than converting the GIF.

If only the GIF exists, many image editors and conversion tools can turn it into an MP4. Check the result for colour and smoothness.

Then replace it on the page with a small video player set to loop silently, with a still image shown first. Whoever maintains the site can set this up for each animation.

If a GIF stays, make it small

Crop it to the part that moves, reduce it to the width the page displays, shorten it and lower the frame rate.

A GIF displayed 400 pixels wide but saved at 1,200 is three times wider than it needs to be, and far heavier.

Never shrink a large GIF with the page's code alone. The visitor still downloads the full size.

Newsletters are a special case

Email newsletters use GIFs because email programs rarely play video. That is a reasonable use, but the weight still matters, since most opens happen on phones.

Keep email GIFs short and small, and make the first frame make sense alone, because some desktop versions of Outlook show only that frame.

The counter-case

A small GIF used once, such as a tiny loading indicator or a brief icon animation, weighs little and does no harm.

And where an animation has to play on phones without a tap, a short, small GIF is still the only reliable way to do it.

For anything long, wide or decorative, replace it: a short video where motion matters, a still image where it does not.

Lightening the page

1. Sort each key page's files by size.
2. List every GIF heavier than a few hundred kilobytes.
3. Find the original recording for each one.
4. Export long ones as short MP4 videos.
5. Replace decorative ones with a still image.
6. Crop and shrink any GIF that stays.
7. Check each page again on a phone.

Step one is where the surprise is. Few owners know which file is heaviest on their own home page, and a GIF at the top of the list is the easiest weight to remove.

A video playing behind a home page raises the same questions, covered in a dentist site with a video behind the home page.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.