Top 5 GIF alternatives: When to rather use APNG, WebP and more

Animated images are great. When they appear as memes and emojis, they are fun and bring laughter. And on websites they add dynamics. In this segment we introduce 5 formats that surpass the classic GIF image. So which format is the best GIF alternative? 

What is GIF and why do I need an alternative?

GIF is a true veteran among all animated image formats. Up till today, it is also the most commonly used format. A living fossil, if you will.

GIFs have outlived many other image formats and have persisted on the web since the early days of the Internet. Just think of times when the advertising industry had nothing better in mind than to produce wildly flashing advertising banners and wallpaper the Internet with them.

Since the early 2010s, the GIF format has been making a big comeback thanks to Tumblr, 4chan, and Giphy. They are shared with friends, e.g., Facebook and Whatsapp. Apart from its 90s charm, however, the format has a few downfalls that can negatively impact websites:

• Comparatively large files result in long loading times and thus a poor page speed rating on Google.
• Resolution and color depth are also anything but contemporary, making animated GIFs look amateurish in professional environments.

Fortunately, GIF alternatives with contemporary key data and more compact file sizes exist. 

Today we cover:

• 5 different animated image formats
• Which context suits these 5 formats 
• Popular browsers each is compatible with 

Let's go!

Animated SVG

The SVG format is a XML-based vector graphic. It is composed of simple geometric shapes, such as curves, lines, or circles. Meaning it consists exclusively of code with information about coordinates, colors, color gradients, integrated texts, etc., leading to efficient compression.

Despite their small file size, SVG files are scalable to any size without losing quality. Since SVG files don't store actual pixel data, photos and screenshots can’t be part of an SVG and shouldn’t be converted to it. The outcome would be quite different.

Additionally, SVG files are animated with CSS, Javascript, or the XML-based SMIL. Hence, all information about the animation is also stored in text form. And don't worry about needing special programming skills. In graphics programs such as Adobe's Animate CC or Svgator, the animations can be defined as usual and exported as a finished file - without necessary programming skills. 

So if you're looking for lossless and scalable animated graphics (e.g., for responsive websites and web applications), try out animated SVGs!

Advantages:

• Small file size
• Flexibly scalable
• No programming skills needed
• Supported by most internet browsers (even mobile)

Disadvantages: 

• Photos and screenshots not suitable for SVG 
• SVG limitedly supported by Microsoft,
• SVG not supported by Internet Explorer and Edge 

Adobe's application Animate CC is a way to animate SVG graphics. (Image: Adobe)

Animated WebP images

Developed by Google, the image format WebP is related to the well known video format WebM. Further, WebP attains a higher image quality than the established format JPEG despite its high compression.

Effectively, the file size using WebP is slightly smaller than JPEG, but still quality and dimensions remain unchanged. Plus, WebP files can also contain transparencies just like PNG files.

The same properties also apply to animated WebP images. As with GIF, they are composed of several individual images using, e.g., one of many online converters. 

As for browsers: Currently, all browsers except for Internet Explorer and older Safari versions support the WebP format. With regard to Safari, Apple added support for the format in the latest Safari 14 version.

To sum it up: Know that you can use Google's format with a clear conscience as a replacement for JPG and PNG's static formats. Animated WebP is one of the great GIF alternatives!

Advantages:

• Small file size
• Lossless compression 
• Can contain transparencies 
• Supported by most internet browsers 

Disadvantages: 

• WebP not supported by Internet Explorer
• Limited support by Safari (only browser version 14)

GIFs are usually known as pixelated and as low frame rate images. And while there are ways to avoid this, the files then quickly go beyond the scope of what is tolerable online.

APNG-animated PNG images

PNG is the most universally used image format on the internet. It offers high color depth, partial transparency, good compression and image quality. APNG is basically PNG, only animated. That is why it is superior to GIFs. It offers all the PNG qualities, which GIF clearly doesn’t. 

APNG is probably most similar to GIF in terms of how it works. Both are composed of several individual images and are then merged to create an animated image. In other words, you throw a handful of pictures into a converter (e.g., free web-based programs or downloadable converter apps) and combine them to receive an APNG file.

When it comes to frame rate, there really are no limits. You can easily adjust how long each picture should be visible in settings. 

As perfect as this format sounds, it also comes with its flaws - don’t we all? APNG is great, but its browser support is just okay. Microsoft's Edge, Internet Explorer, Opera Mini, and the default Android browser all don't support APNG. But at least these browsers display the first frame of the animated image. 

The takeaway: Although both these formats function similarly, technically, APNG is ahead. On the other hand, though, pretty much all browsers love GIFs.

Advantages:

• High color depth
• Lossless compression 
• Customizable frame rate
• Superior to GIF 

Disadvantages: 

• APNG not supported by most browsers

With HTML5, videos are integrated into websites just as easily as images. Modern video formats are, therefore, equally ideal as an alternative to animated images.

HTML 5 (WebM, H264, Theora)

Hang on a minute: HTML5 isn't even an image format, right? Yes, you're right! But it's come to our attention that incorporating video clips into websites is possible just as smoothly as it is with images. A few great video formats serve as nearly perfect replacements for animated images, including WebM, H264 (MP4), and Theora. 

Videos in these formats are nicely suited for online use because of their optimal compression and lossless image quality. Plus, you even have the option to add sound.

And lastly, HTML5 is compatible with any web application and thus is easily integrated into all. 

Advantages:

• Video formats as replacement for animated images possible  
• HTML5 compatible with all web apps.
• Option to add sound to your videos 

Disadvantages: 

• Only few great video formats that work well with HTML5

CSS3 animations (CSS motion pass)

CSS animations are a bit of a stand-out compared to other animated images because CSS is a stylesheet language, meaning it defines the look or layout of websites. A bit of programming preknowledge comes in handy with this format, but it isn't a must. If you're a newb, for example, and like playing around until you figure things out, then CSS3 may be the right pick for you too. 

A lot is possible with CSS3. You can add movement to a website by changing individual CSS properties within a defined time. Moreover, Objects can grow, change position, shape, or color. 

Another cool aspect of CSS3 is its transitions (starting state and ending state) to, for example, visually highlight buttons when hovering over them with the cursor.

Further, more complex keyframe animations (initial and final state plus various intermediate forms) allow entire objects to move fluidly across the page. These features may be used, for example, for so-called parallax scrolling effects found on many modern websites.

Advantages:

• Stylesheet language
• More creative freedom with CSS

Disadvantages: 

• Stylesheet language 
• Programming preknowledge beneficial

A lot of modern websites use CSS3 animations to add a dynamic component.

So which GIF alternative is best?

To integrate fluid animations or short video clips into websites, we recommend using video formats and HTML5. However, some scenarios in which animated images are better suited still exist.

For example, when it comes to transparencies. Videos don't support these, meaning only square formats are possible. But sometimes you want circular-shaped animations. And those need transparency. Therefore, in this case, animated images instead of videos are the correct choice.

Another scenario in which video formats may not be the best is when you, for example, want to place several animated graphics on a page. That's because video formats eat more performance than animated images do. And browsers like Google's Chrome are designed to play one or two videos at a time, which isn't conducive either.

We've tested alternative GIF formats - here's the result

To give you a real-life example, we converted a short video in RAW format to GIF, APNG, WebP, and MP4 formats, each with a size of 600 x 600 pixels.

And our results were as follows:

• Since we used a simple animation, the quality remained pretty good in all of the formats - however, the resulting file sizes for each varied quite a bit.
• The GIF came to a whopping 2.26 MB and the APNG to an unbelievable 2.46 MB.
• The WebP format, on the other hand, only weighs 740 KB.
• But the winner, in our case, was the MP4 coming in at only 370 KB even though the frame rate was set at 30 frames per second (three times higher than that of GIF, APNG, and WebP).

So, we would choose the HTML5 embedding of an MP4 video among the GIF alternatives in this specific case.