• Services
    • Headless Ecommerce Development
    • Ecommerce UI/UX Design
    • Agency Support Services
    • Platforms
    • Shopify Plus
    • BigCommerce
    • Craft CMS
    • Shogun Frontend
    • ButterCMS
  • Case Studies
  • Blog
  • About
  • Contact
  • Design UI/UX
Animated GIFs and Your Website’s Performance  |  Read time 2 Minutes

Animated GIFs and Your Website’s Performance

October 18, 2018 |  Read time 2 Minutes

By Electric Enjin
Animated Gif Website Performance

As fun and exciting as adding animations to your page is, using GIFs might not be the best route to go down. If you are considering using animated GIFs on your website, you need to be aware of the performance implications of doing so.

What are GIFs?

GIFs or “jiffs,” however you like pronounce them, are an early file format for displaying images on the web. GIF files come in two general forms, static and animated. Static GIFs have fallen out of favor to more modern and better performing JPEG, PNG, and SVG formats. The animated version of the GIF was popular in the 90’s, and decorated many GeoCities pages. They were one of the very few supported ways to include animations on websites in the 90’s and into the 2000’s. That is until Macromedia flash and the SWF format took over animations on the web.

The comeback of GIFs.

GIFs have become associated with low resolution looping animation or video, frequently with low frame rates. Some have a lo-fi meme-worthy aesthetic. Others are can be more cinematic and subtle. The GIF, in a way, has become an art form in itself.

The resurgence of animated GIFs can be linked to the rise of social media. GIFs work great in feeds, they can tell a joke and convey feelings that words can’t capture quickly. They are perfect for the short attention span of users.

On the production side, they are easy to create and widely supported by browsers and devices. The thing is, when you upload a GIF onto Facebook or Twitter, they are converted into a different video file, and what you are seeing is no longer an actual GIF file.

So what? They aren’t GIF files anymore, who cares?

It matters when you are asked by a client or your boss to include animated GIFs on a website. You go about embedding the GIF that you are provided or that you created, only to see that it causes a huge performance hit on the page load speed of the site. Sending a 2MB GIF to a mobile device will not create a good user experience, no matter how cute the cat riding a Roomba is.

What format then?

GIFs should be converted to work with HTML5 Video specification, which means converting the GIF to MP4 and WebM. These are file formats that will drastically decrease the file size of a GIF, allowing it to load much quicker and not slow down the rest of the site.

The next step is to set up the HTML5 video to simulate GIF behavior. In order to do that, you have to set the video properties to autoplay, looped, and muted. GIFs don’t have sound, but just in case you accidentally export an audio track in the video, setting it to muted will allow it to autoplay in the browser.

Now go make some GIFs! (But actually videos that have that GIF aesthetic).

Animated GIFs and Your Website’s Performance
Electric Enjin
  • Craft CMS Partner
  • Shogun
  • ButterCMS
  • Shopify Partners
  • Zendesk Partner
  • bigcommerce partner

Electric
Enjin

  • Home
  • Work
  • Company
  • Careers
  • Blog
  • Contact
  • Rss
  • Blog Archive
  • Work Archive
  • Sitemap

Our
Services

  • Headless Ecommerce Development
  • Ecommerce UI/UX Design
  • Shopify Plus
  • BigCommerce
  • Craft CMS
  • Shogun Frontend
  • ButterCMS
  • Agency Support Services

CMS
Guides

  • Shopify vs Magento: The best ecommerce platform for your business
  • Shopify vs Shopify Plus: Is the price tag worth it for your ecommerce business?
  • Craft CMS vs WordPress: Which is the best CMS? 2023 Edition
  • Craft Commerce vs Woocommerce
  • Craft CMS vs WordPress: SEO Matchup
  • Craft Commerce, Shopify & BigCommerce Platform Comparison

Let's
connect

  • 203-939-9344
  • [email protected]
  • Electric Enjin
    20 N Main St
    4th Floor
    Norwalk, CT 06854

Ecommerce tips & insights
straight to your inbox.

© Electric Enjin LLC 2023.
Electric Enjin is a certified Minority Business Enterprise.

Privacy Policy

×

Let's Talk

To get started, we just need a little information.

Noel Lopez, Client Success Manager

Chris Ching, Founder


What to expect

  1. Chris will reach out to schedule a free 30 minute consultation.
  2. We'll discuss your goals, requirements, timing, and other details.
  3. Afterwards, you'll receive a tailored proposal.
  4. We get to work.
×

Give us your email (so we know you’re not a bot) to access the case study.