{"id":605,"date":"2014-03-18T23:18:44","date_gmt":"2014-03-18T23:18:44","guid":{"rendered":"http:\/\/marianafun.es\/ds106\/engineering-who-doesnt-love-animated-gifs\/"},"modified":"2017-01-29T19:40:53","modified_gmt":"2017-01-29T19:40:53","slug":"engineering-who-doesnt-love-animated-gifs","status":"publish","type":"post","link":"https:\/\/marianafun.es\/ds106\/engineering-who-doesnt-love-animated-gifs\/","title":{"rendered":""},"content":{"rendered":"\n\t\t<style>\n\t\t\t#gallery-1 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-1 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div id='gallery-1' class='gallery galleryid-605 gallery-columns-3 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marianafun.es\/ds106\/engineering-who-doesnt-love-animated-gifs\/attachment\/606\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/marianafun.es\/ds106\/files\/2014\/03\/tumblr_n2nj3tO0Oh1qjk2rvo1_500-150x150.gif\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" srcset=\"https:\/\/marianafun.es\/ds106\/files\/2014\/03\/tumblr_n2nj3tO0Oh1qjk2rvo1_500-150x150.gif 150w, https:\/\/marianafun.es\/ds106\/files\/2014\/03\/tumblr_n2nj3tO0Oh1qjk2rvo1_500-300x300.gif 300w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/dt><\/dl>\n\t\t\t<br style='clear: both' \/>\n\t\t<\/div>\n\n<p><a class=\"tumblr_blog\" href=\"http:\/\/engineering.tumblr.com\/post\/80003435120\/who-doesnt-love-animated-gifs-believe-it-or\" target=\"_blank\">engineering<\/a>:<\/p>\n<blockquote>\n<p><em><strong>Who doesn\u2019t love animated GIFs?<\/strong><\/em><\/p>\n<p>Believe it or not, support for GIFs at Tumblr was a happy accident! When Tumblr\u00a0put together the code for handling JPEGs, support and GIFs (and PNGs) happened to also work using the same code. Perhaps even more surprising is that the tools used to handle GIFs at Tumblr hadn\u2019t changed much from those early days.\u00a0<\/p>\n<p>The image above is an original from <a class=\"tumblelog\" href=\"http:\/\/tmblr.co\/mM5O3L9rfwW03p6vVUiLdkw\" target=\"_blank\">sukme<\/a> that could not be posted to Tumblr last June. It also would have failed if he\u2019d tried last Sunday. If you click-through to the original post, you will see a muddy, reduced-saturation mess. All this because our resizer couldn\u2019t handle the original.\u00a0<\/p>\n<p><em><span><strong>I\u2019ve got ninety-nine problems and the GIF is one<\/strong><\/span><\/em><\/p>\n<p>There is a lot of misinformation about GIF limits on Tumblr, so let me set the record straight: We don\u2019t count colors or frames or pixels. We only count bytes and seconds. Every image that comes in is scaled to a number of smaller sizes and the smaller your image is, the fewer resizes need to happen, which means less time.\u00a0<\/p>\n<p>We had two core failure modes in our prior resizer: Some images would take as much as several minutes to convert. This was not directly attributable to color, dimensions, or frame count, but a mysterious mix of all of them. <a href=\"http:\/\/www.huffingtonpost.com\/2013\/04\/10\/snake-gif_n_3051625.html\" target=\"_blank\">Some images<\/a> would balloon in size (600KB at 400&#215;400, 27MB at 250&#215;250).<\/p>\n<p>The unpredictability of these failures made our GIF limits feel arbitrary and terrible to the end users. Some have gone so far as to threaten <a href=\"http:\/\/animalshurtingsmallchildren.tumblr.com\/\" target=\"_blank\">monkey kicks<\/a>. I don\u2019t want to get kicked by a monkey, so we started working hard late last year to fix it.\u00a0<\/p>\n<p><em><strong>A proposed solution<\/strong><\/em><\/p>\n<p>Some of you may have seen\u00a0<a href=\"http:\/\/dngrm.tumblr.com\/post\/65043297601\/the-state-of-gif-on-tumblr\" title=\"The State of GIF on Tumblr\" target=\"_blank\">this post<\/a>\u00a0where the performance of our current converter was compared with a new \u201cmystery\u201d converter. The mystery converter was roughly 1000x faster on the \u201cslapping\u201d GIF and happened to look great, but had quality problems on other images. Those were more\u00a0fully explored in\u00a0<a href=\"http:\/\/dngrm.tumblr.com\/post\/65361568850\/more-detail-on-the-state-of-gif\" title=\"More Detail on the State of GIF\" target=\"_blank\">here<\/a>\u00a0a couple of days later.<\/p>\n<p>If you haven\u2019t figured it out yet, the mystery converter is <a href=\"http:\/\/www.lcdf.org\/gifsicle\/\" title=\"gifsicle\" target=\"_blank\">gifsicle<\/a>.<\/p>\n<p><em><strong>Getting a better handle on it<\/strong><strong><br \/><\/strong><\/em><\/p>\n<p>To get an unbiased test set, I took a random sample of roughly 90K GIFs that Tumblr users\u00a0<em>tried<\/em>\u00a0to upload, not limiting the corpus only to those that succeeded. These were tested against the current converter, resizing down to the next size we produce. Each resize is given up to 20 seconds to complete in our application, but all resizes must complete in 30 seconds. All resizes must be under 1MB or we will convert the first frame to JPEG and call it a day.\u00a0<\/p>\n<p>2.6% of my 90K GIFs took longer than 20 seconds to resize. This is an underestimation of how many GIFs would be rejected for time because this is only one of several resizes required. A whopping 17.1% of all GIFs were over 1MB. Even if we bump up to 2MB, the rejection rate is 2.75%. The converter was making over 25% of all resizes larger than the higher-resolution originals! The total rejection rate for my sample set was 4.46% of all original GIFs uploaded.\u00a0<\/p>\n<p>Using gifsicle is so much faster that our CPU rejection rate drops to 0.00 on my test set. Also, just under 99% of all images were smaller when resized than they were at their original resolution. The size rejection rate was a much lower 0.59%.<\/p>\n<p><em><strong>Gifsicle problems<\/strong><\/em><\/p>\n<p>As compelling as the performance of gifsicle is, the quality problems are too much to ignore. We played around with the code a bit, but eventually we just got in touch with the author, Dr. Eddie Kohler. The specifics are in <a href=\"http:\/\/engineering.tumblr.com\/post\/80003110054\/meet-dr-eddie-kohler-a-gif-creators-best\" target=\"_blank\">this post<\/a>, but the short version is that Eddie was able to improve quality by adding some more advanced resampling methods as well as palette expansion for small-palette images. This increased our size rejection rate to 0.68% while still keeping us well under our CPU budget.\u00a0<\/p>\n<p><em><strong>Proving it<\/strong><\/em><\/p>\n<p>Image processing is all about choices. How do you resample? Do you sharpen? Where in the workflow is gamma correction applied, if at all? The list goes on and on.\u00a0<\/p>\n<p>As you can imagine from the performance differences, our previous converter and gifsicle take very different approaches to GIF resizing. The output images look different. Sometimes it is slight, sometimes it is significant, but there is no way we could put out a converter that messes up your images, even if it messes them up quickly.\u00a0<\/p>\n<p>We set up a qualitative study. The goal was simply to prove that we weren\u2019t doing worse than our old converter, not necessarily that we were doing better.\u00a0<span>This study was opened up to all Tumblr employees, as well as some \u201crandomly selected\u201d outsiders (my friends and f<\/span><span>amily).\u00a0<\/span><span>Participants were presented with one of two questions:<\/span><\/p>\n<p>1.)\u00a0<span>Given an original and 1 resize, decide whether it is ok, unacceptable, or completely broken.<\/span><\/p>\n<p>2.) Given an original and 2 resizes (randomly choses which was left and which was right, sometimes they were identical), choose the better image or say there is no difference.<\/p>\n<p>The results were everything I could have hoped for. The \u201cacceptable\u201d test showed that users found gifsicle better at producing acceptable results (87% vs. 84%), but not by a statistically relevant amount (p=0.086) and that gifsicle produced fewer broken GIFs (0.71% vs. 1.38%), but again not enough to say it is definitively better (p=0.106). The \u201cbetter\u201d test found users preferring gifsicle 37% of the time, the prior converter only 16% of the time, but users also preferred one identical image over the other 27% of the time. Again, it is hard to say that gifsicle is better, but it is clear that it is no worse.<\/p>\n<p><em><strong>Putting it all together<\/strong><\/em><\/p>\n<p>The development and testing described above took from late October until the beginning of March. Packaging, deployment, and integration took only a couple of weeks!<\/p>\n<p>We aren\u2019t done. There is work underway exploring how we handle JPEGs and PNGs. There are a slew of features that we can go after. This was a big step, a necessary step, but not the end for sure.\u00a0<\/p>\n<p><em><strong>We are a community, it takes a village, there\u2019s no \u201ci\u201d in GIF<\/strong><\/em><\/p>\n<p>This project couldn\u2019t have happened without the excellent work of Eddie Kohler in creating, maintaining, and enhancing gifsicle. Tumblr\u2019s Site Reliability Engineering group packaged and helped deploy gifsicle onto hundreds and hundreds of machines in our datacenter. Tumblr\u2019s Security Team vetted the code, both by inspection and by attacking it to make sure we stay safe. This was all for the awesome Tumblr creators, but I have to mention <a class=\"tumblelog\" href=\"http:\/\/tmblr.co\/mMn-4tP7jsunPY3HgwjHStA\" target=\"_blank\">qilme<\/a>\/<a class=\"tumblelog\" href=\"http:\/\/tmblr.co\/mM5O3L9rfwW03p6vVUiLdkw\" target=\"_blank\">sukme<\/a> (same dude, two blogs), <a class=\"tumblelog\" href=\"http:\/\/tmblr.co\/m61OFSshy1mr3_RrjrUVitw\" target=\"_blank\">reallivingartist<\/a>, and especially <a class=\"tumblelog\" href=\"http:\/\/tmblr.co\/mO3ARSQA4S1h4U_oGge92xw\" target=\"_blank\">gnumblr<\/a> for their help in understanding and ultimately attacking this monstrous problem.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>engineering: Who doesn\u2019t love animated GIFs? Believe it or not, support for GIFs at Tumblr was a happy accident! When Tumblr\u00a0put together the code for handling JPEGs, support and GIFs (and PNGs) happened to also work using the same code. Perhaps even more surprising is that the tools used to handle GIFs at Tumblr hadn\u2019t [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"gallery","meta":{"spay_email":"","footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[1],"tags":[],"class_list":["post-605","post","type-post","status-publish","format-gallery","hentry","category-uncategorized","post_format-post-format-gallery"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/marianafun.es\/ds106\/wp-json\/wp\/v2\/posts\/605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marianafun.es\/ds106\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marianafun.es\/ds106\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marianafun.es\/ds106\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/marianafun.es\/ds106\/wp-json\/wp\/v2\/comments?post=605"}],"version-history":[{"count":1,"href":"https:\/\/marianafun.es\/ds106\/wp-json\/wp\/v2\/posts\/605\/revisions"}],"predecessor-version":[{"id":607,"href":"https:\/\/marianafun.es\/ds106\/wp-json\/wp\/v2\/posts\/605\/revisions\/607"}],"wp:attachment":[{"href":"https:\/\/marianafun.es\/ds106\/wp-json\/wp\/v2\/media?parent=605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marianafun.es\/ds106\/wp-json\/wp\/v2\/categories?post=605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marianafun.es\/ds106\/wp-json\/wp\/v2\/tags?post=605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}