Making GIFs load faster
AKA why are some of my GIFs being turned into videos?
Overview
- We’re experimenting with serving GIFs as MP4 videos instead of GIFV (which typically serves animated WebP) on the web to a small subset of folks on Tumblr, not everyone. This does not affect anyone using the mobile apps.
- The performance improvements from using MP4s in this way are huge, and will make Tumblr load animated images faster and use less data in almost every circumstance, with no discernible loss in quality.
- This conversion only applies to specific types of GIFs, such as ones without transparency in the first frame. We’ve tested this conversion on thousands of GIFs, and we’re still tuning it to be virtually indistinguishable from the original GIF.
- XKit’s “Vanilla Videos” extension was causing a bug with this experiment, but a recent new XKit version release has fixed that issue.
- If you’re served an MP4 instead of a GIF, clicking on the image will still open it in a lightbox, which you can download as GIFV or GIF, depending on what’s served.
- Since this is still just an experiment, there is no way to opt-out yet; adding some kind of opt-out (on the creator and/or consumer side) is a possibility though.
- If you’re served a GIF as MP4 and it looks wrong, please contact Support with a link to the image and what looks wrong about the conversion. We need examples to help us improve the experience. Also, please do not send duplicate support requests.
What
As a recent Changes post mentioned, we’re experimenting with transforming GIFs into MP4s on the dashboard on web. Our goal is to get GIFs onto dashboards as fast as possible, while retaining as much of the original quality as possible.
For years now, we’ve delivered GIFs using our GIFV format, which transparently transcodes GIFs to more modern formats, like WebP, supported by the <img> tag. We’ve made improvements to that process over the past year, better supporting large GIFs and increasing the quality of the transformation, but conversion to WebP has limited benefits. A typical conversion only halves the file size and animated WebP isn’t well supported by Safari. Meanwhile, MP4 conversions offer even smaller files, often 8 to 10x smaller than the original GIF, as well as faster loading times and broader browser support.
We’re being picky about which GIFs get converted to MP4. We only apply the transformation to GIFs that pass our criteria for transformation. Currently, that means GIFs that don’t use transparency in the first frame, have constant frame rates, and are under 10 seconds long.
We’ve tested this new process against thousands of GIFs from Tumblr, ranging from your typical TV show gifset to pixel art to animated text, and are confident the transformation looks good for the vast majority of content. However, we’re still tweaking the algorithm and are open to feedback. This is a subjective process, and if you see an MP4 that looks worse than the GIF, please send it our way!
Currently, the change only affects the experience within Tumblr (www.tumblr.com). The blog network (i.e. your-blog.tumblr.com) is not affected and continues to use GIFV to deliver GIFs.
Why are we doing this?
As mentioned above, GIFs are almost always inefficient compared to modern formats. They’re larger in size, take longer to load, are slower to render, and use more cache space. Whereas our GIFV conversion usually halves the size, the new GIF->MP4 conversion is often 8 to 10 times smaller for film- or TV-like content. We have a lot of that kind of content on Tumblr (go check out #filmedit or #moviegifs) and delivering the content as MP4 makes those tag pages load quite a bit faster, especially on slower connections.
As an example, here’s an original GIF that’s 3.4 megabytes. Converting it to webp using GIFV gets us down to 2.3 MB, 68% of the original. But converting it to MP4, gets us down to 641K, 19% the size of the original and 5x faster to load. On tag and search pages, where we often show many many GIFs at the same time, this makes a huge difference in the loading and browsing experience.
However, Creators on Tumblr regularly churn out hand-tuned, pain-stakingly optimized GIFs that really take advantage of the format. We really don’t want to make these look bad – they’re works of art, and they’re natively better than these modern competing formats. For now, since this is still just an experiment, we haven’t determined yet how we’ll handle the ability to opt-out of this change (for creators and/or consumers of GIFs), but we have it in mind.
In the meantime, if you’d like to download the actual GIF version of any GIF, just replace the extension on the image url with .gif. So https://64.media.tumblr.com/af554ca5b0e60d313e40c8c47e13824b/d422d5f60551ce04-12/s2048x3072/4b5293df9726acfe461f7eaf661f92acd060dd21.mp4 becomes https://64.media.tumblr.com/af554ca5b0e60d313e40c8c47e13824b/d422d5f60551ce04-12/s2048x3072/4b5293df9726acfe461f7eaf661f92acd060dd21.gif
When
We’re rolling out this change on the web in phases over the next month. We’re currently only analyzing newly uploaded GIFs, so existing GIFs won’t be affected for a while. And it’s only rolled out to a percentage of users, so you may or may not see the feature yet today.
Guidelines for GIF creators
Reporting bad conversions
If you found a poor quality conversion on one of your GIFs, we’d love to hear about it. Please contact Support with the URL of the post and let us know which GIFs could be better. Please include what aspect of the transformation is problematic.
How can I preview what my GIF will look like after the transformation?
If you want to see how any GIF would look converted to MP4, just find the media URL for the GIF and replace the extension in the URL from gif or gifv to mp4. This works for any GIF on Tumblr, not just the GIFs that we’ve flagged as good candidates, so that we can see what the results could be like.
As a GIF creator, how can I opt-out?
For the moment, adding a single transparent pixel to the first frame of the GIF will opt that image out of conversion to MP4. It will not opt you out of conversion to WebP or other formats that our GIFV implementation may support. We’re still thinking through what another kind of creator and/or consumer opt-out could look like.
That said, we would love to hear from you! So please send in anything that looks wrong. Also, keep an eye on the Changes blog for more updates about this.
