Logo

dev-resources.site

for different kinds of informations.

It’s Probably Worth Converting that GIF to an Animated WebP

Published at
8/23/2024
Categories
webp
gif
performance
Author
alexmacarthur
Categories
3 categories in total
webp
open
gif
open
performance
open
Author
13 person written this
alexmacarthur
open
It’s Probably Worth Converting that GIF to an Animated WebP

Find one of your favorite GIFs on Giphy and download it. You might be surprised that the result saved to your device won't be a GIF. It'll be an animated WebP.

It’s a very intentional move by Giphy, citing the maximization of quality and reduction in load times. After all, we're in a time when page performance has prominent focus in the industry, especially after Google unveiled its Core Web Vitals as a ranking factor. Coupled with the fact that WebP has extremely good browser support, the move shouldn't be all that surprising.

Still, moving away from the GIF hits different. The format's become such a big part of meme culture, and has been responsible for ripping apart friendships over the correct pronunciation. It's hard to imagine a world in which GIFs... aren't actually GIFs.

But in context of the web, it makes a lot of sense to fully embrace WebP as an alternative, even with the complicated feelings that linger around it.

A Brief History of the GIF

Believe it or not, the motivation behind the invention of the GIF had nothing to do with looping animations. It was all about performance. Back in 1987 (before the web was even a thing), CompuServe's Steve Wilhite & team needed a way to save, share, and render images without hogging a computer's RAM or storage.

The Graphics Interchange Format (GIF) was the result. It sported a relatively efficient compression algorithm, it could access 256 distinct colors per frame, and it could even contain multiple frames in a single file.

This was all big deal at the time, but the animated GIFs we're more familiar with didn't hit the scene until 1995, when Netscape Navigator 2.0 was released. It was the first browser that supported looping GIF animations, leading to some interesting, now-vintage web art. If you'd like to relive some of them yourself, check out GifCities. You'll find some gems:

weird GIF

Since then, the GIF has been through a lot, including some fierce licensing fights that nearly ended its role on the internet in the late 90s.

But soon enough, it intersected with a growth of meme culture and the explosion of digital connectedness. It quickly emerged as the preferred format for sending bite-sized, animated media between people. And that set up GIF platforms like Tenor and Giphy to thrive.

Times (and Tech) Have Changed

The technical implications of the GIF were significant at the time, but today, the landscape is different, and there’s a really good alternative available: WebP. Among the benefits:

Significantly broader color depth.

The GIF supports a maximum of 256 colors. WebP, however, touts a depth of 24 bits, which amounts to 16.7 million colors, meaning you're able to produce far more vibrant; detailed images than before.

More efficient (and flexible) compression.

Lempel–Ziv–Welch, the compression algorithm behind the GIF, is an old, straighftforward, and reliable one. But it's not the most efficient, it isn't suited for datasets with repetitive data, and it sometimes gets hairy due to licensingrestrictions.

WebP, on the other hand, was born out of the VP8 video format and uses a more modern compression approach. Both lossy & lossless compression is supported, making it more flexible than its legacy counterpart as well, depending on your needs. To put it plainly, WebP was built for image animations.

Smaller file size.

Aside from all of that, another big advantage over GIF is the file size reduction for most images. On average, lossy WebP animations are 64% smaller, while lossless versions are 19% smaller. Given the amount of imagery on the web, widespread mobile connectivity, and the SEO implications, this is no trivial benefit.

Still, Some Vehement Resistance

Search for "WebP" on Reddit, and you're going to see a lot of this:

It's all over X too:

The nerds of the world might respect WebP for its technical advantages, but we're in a bubble. The rest of realityvehemently hates it. That's largely because of compability issues with software that's not the web. If you download an animated WebP in the Windows Photos app, for example, it won't play. You'll just get a still. Especially when the format was still relatively new, I could see that being pretty annoying if you're one to right-click + download lots of pictures from online.

But at this point, I suspect much of that hatred is riding the momentum of the cultural bandwagon. It's cool to hate on WebP, much like it is Bootstrap, Internet Explorer, or PHP. In addition to the fact that software is still rapidly moving to support animated WebPs, legitimate criticism is thin, at least for the vast majority of use cases on the web.

Just Do It Already

The reactionary defense of the GIF makes sense given the cultural role it's enjoyed. But the technical benefits alone are quickly eroding any effort to resist modern formats like WebP.

Particularly for the web, straight-up moving from GIF to WebP offers very few (if any) downsides. There's some work involved in manually converting images yourself, but solutions exist for automating the entire process as well – without even changing your image URLs (hard plug: consider PicPerf.io).

If you’re serving GIFs on your website, consider the move. For all the reasons mentioned here, may be well-worth the effort.

gif Article's
30 articles in total
Favicon
It’s Probably Worth Converting that GIF to an Animated WebP
Favicon
GIF App Development – How to Develop GIF Encoding
Favicon
GIF App Development – Challenges & Tips
Favicon
Happy Birthday Gifs
Favicon
Bring Your Drawings to Life: A Step-by-Step Guide to Animation with Pivot Animator 5
Favicon
Tool Breakdown : Show/Hide Timer
Favicon
How to convert your screen recordings to GIF on macOS?
Favicon
Adding Gif Canvas Features : Grid Snap
Favicon
Create GIFs Like a Pro with Our Professional-Grade Gif Maker
Favicon
Animated texture library for react-three-fiber available in react's hooks base
Favicon
How to Add GIFs to Your Dev.to Articles with Cloudinary
Favicon
Peek: Simplify Screen Recordings
Favicon
Contributions can lead to unexpected solutions
Favicon
How does the GIF function works in Whatsapp and Telegram?
Favicon
Linking to a Giphy gif
Favicon
Creating animated gifs from your terminal
Favicon
Gif Widget : "Paint it Black"
Favicon
Gif Widget : "Text Watermark"
Favicon
Gif Widget : "Markdown Meme Maker"
Favicon
Thinking in "GIF" with React
Favicon
React JS Gif : Starter Kit
Favicon
What's the best way how to a movie file convert to an animation image(animation gif or animation png or webP)?
Favicon
Como fazer GIF animado com Python
Favicon
FFmpeg: Convert video to gif
Favicon
Gifit: Convert Screen Recordings to easy-to-share Animated gifs
Favicon
How do you deal with large GIF sizes?
Favicon
Search For GIFs Without Leaving Your Terminal
Favicon
How to make a video with 9VAe
Favicon
How to make Barrel Fish animation from SVG : 9VAe
Favicon
Converting GIF to MP4

Featured ones: