Homework Tumblr Gif Sizes

Another change to a social networking site, another user-driven backlash. Nearly 50,000 Tumblr users have now signed a petition asking the Yahoo-owned blogging platform to reverse its decision to increase the image size requirements, claiming the changes have affected older images hosted on Tumblr, which are now stretched and blurred. Some portion of these angry users also went on a “Tumblr strike” yesterday, logging out of their Tumblr dashboards and vowing not to return for 24 hours.

The strike, of course, had little material impact on a network that now touts 206 million blogs, and has seen its audience grow 40 percent to over 420 million visitors since its acquisition over 15 months ago.

Upset users created a hashtag for their social media campaign, #TumblrStrike2K14, which they unsuccessfully tried to get to trend on Twitter. A blog post about the strike hosted on Tumblr, however, has nearly 19,500 “notes” (shares and reblogs).

The issue at hand is Yahoo’s recent decision to adjust its image size requirements by 40 pixels, meaning photographs are now 540 pixels wide instead of 500 pixels. GIFs and edits have also increased from 245px to 268px and 160px to 177px, respectively, the petition claims. That means images uploaded before the sizing changes went into effect now look stretched, blurry or grainy.

The change greatly impacts those who had worked on GIFs and photosets, which are some of the most popular forms of self-expression on Tumblr today. Tumblr is home to a number of online fandoms ranging from celeb-fueled popular culture-related fandoms to others for those with more niche and narrower interests. Whether Tumblr’s teens are quoting favorite lines from “The Fault in Our Stars” or are just creating artistic designs using imagery, the image adjustments affect all those who previously created (or enjoyed) GIFs or other graphic content on the site.

But Tumblr’s ambitions, seemingly, are to extend itself beyond the GIFs and subcultures it became known for. Under Yahoo’s direction, word has it that Tumblr is looking to expand further into video. Video posts are now growing twice as fast as photo posts on Tumblr, a recent Fortune article detailing the transition noted, and wider posts for wider images and other content will help those videos (which are now ads, too), look better on users’ dashboards, presumably.

However, the rollout of Tumblr’s newly revamped, Vine-like video player and the widening to the Tumblr dashboard are two, separate changes to the site. Tumblr could, if it chose to do so, roll back the image resizing changes without having to kill its new video player. It’s not likely to do so, of course.

Yahoo/Tumblr declined to comment for this post.

Reader comments on the above-mentioned Fortune article are filled with Tumblr users lamenting the changes, including both Tumblr’s transition to a video-heavy site and the image adjustments. Writes one commenter: “All of my friends have been extremely frustrated about the changes and either will stop blogging or relocate to another website. They are popular fandom blogs, each with 6k-20k followers. Their frustration comes from the resize of the posts from 500px to 540px. Not only does it ruin their years of gifs, fanedits, and artwork by changing HQ art into a blurry, pixelated mess, but even uploading with the new size, the current upload system purposefully forces animated gifs and photos to drastically lose quality.”

“If people wanted a video site, they would go to youtube or vine or something,” they added.

Cries another, “While I love the new video player, I HATE the wider post dimensions. Primarily because it messed up the gifsets created prior to the change – reblogs are like 90% of the content on the site, so why would you mess up all of the old content?”

Ironically, the changes that are causing the uproar were introduced by way of the official staff blog at the end of October with the note, “Wider posts: We went ahead and did it. There was no reason not to.” 

Some on Tumblr clearly disagree.

[sarahintampa/tumblrstrike2k14″>View the story “#TumblrStrike2k14” on Storify]

Why dynamically resize images in the first place?

Before the dawn of on-demand resizing at Tumblr, every posted image was resized into seven or eight different sizes, and each was saved into our backing media store (a massive S3 bucket). This made serving our images very fast—just grab the size you want right from the bucket! While this was great, it also meant that any changes to our image processing would not affect any images we had already saved (billions of images). If we were to upgrade image quality, add a new size crop, or change how we handle taking down media, the effect would only be marginal…what a bummer! The cost of storing all the resizes as separate files (petabytes of data!), along with a lack of agility moving forward, motivated us to adopt a dynamic resizing and serving strategy.

We began with resizing jpg and png images on-demand instead of persisting each different resize crop in our S3 bucket. This has been a great success; our “Dynamic Image Resizer” churns through over 6,000 images a second, at a roundtrip request latency of only 250ms per image. Not having to store the resizes saves us tens of thousands of dollars a month! So, the natural question was, can we also do this for gifs and make a “Dynamic Gif Resizer?”

The problem with resizing gifs on-demand

Gifs, as a medium, are a wonderful thing. They capture a special or hilarious moment and repeat it back to you, forever. However, the actual Graphics Interchange Format leaves much to be desired. Last touched in 1989, the format is woefully outdated, and this begets massive, low quality animated images. When compared to video format counterparts (H.264 and the like), the gif file size can be tens of times larger at similar visual quality. Many companies have punted on the gif file format entirely; imgur released their gifv format, which wraps an mp4 video. Instagram will loop your video clips, but will flatten gifs to a still image. However, as the true “home of the gif,” Tumblr isn’t ever giving up on your gif files!

Resize it faster

A while ago, one of my colleagues @dngrm posted about updates we made in our gif resizing technology. Essentially, we switched our gif resizing library from ImageMagick to gifsicle with great success—we got lower latency and higher-quality results. In order to resize a gif in a realistic timeframe for on-demand resizing and serving, we proposed some changes to gifsicle that parallelizes the resizing step. Since a gif is just a stack of image frames, we figured that resizing them using a thread pool could lead to a performance improvement. Luckily for us (and the world!), gifsicle author Eddie Kohler accepted and merged our changes into gifsicle. With this new threaded resize option in gifsicle, we gained about a 1.5-2x speed-up in resizing an average gif against using the vanilla gifsicle. This brought down the average wall time of a gif resize to about 100ms. The entire gif resize request (downloading the upstream image, resizing the gif, and serving the response) is now only 400ms on average.

Cache is king

To make all this possible, tumblr heavily relies on CDNs to cache massive amounts of static content and avoid repeated work. Thanks to this, the Dynamic Gif Resizer only gets a little over 1,000 resize requests per second, thanks to an incredibly-high cache hit ratio on our CDNs.

On top of that, we rely on the usage of conditional GET requests and 304 Not Modified responses to cut down on the amount of real work we must do in the resizing level. The number of 304s we serve fluctuates between 30-50% for all gif responses, which saves us a tremendous amount of compute time!

Putting it all together

The resizer itself is an nginx server with a custom module that does the upstreaming and resizing, and is written in C. The jpg/png resizer utilizes OpenCV for image manipulation, while the gif resizer uses the aforementioned gifsicle library.
Our fleet of resizers and their surrounding architecture are housed in AWS. The main motivation for this was colocation to our image store (S3) and the ability to automatically scale our instance count up and down, depending on time of day (our traffic pattern is heavily cyclic over a 24h window). The rest of tumblr’s architecture is housed in our own DC. Below is a minimalistic diagram of our resizer setup.


Both the Image Resizer and Gif Resizer were massive undertakings, and a lot of people deserve credit for fantastic work:
Massive thanks to co-developer @naklin, and to @neerajrajgure who helped with improvements.
To @dngrm, @michaelbenedict, @heinstrom, @yl3w, and @jeffreyweston for architecture help and sage advice.
To our AWS enterprise support team Frank Cincotta, Shaun Qualheim, Darrell DeCosta, and Dheeraj Achra.
And to Eddie Kohler who helped clean up my ugly gifsicle changes and let them be a part of his library.

Questions? Comments?

Talk to me on tumblr using our new messaging system! My tumblr is @hashtag-content

0 Thoughts to “Homework Tumblr Gif Sizes

Leave a comment

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *