{"id":1991,"date":"2016-02-06T20:55:05","date_gmt":"2016-02-06T20:55:05","guid":{"rendered":"http:\/\/johnjohnston.info\/106\/?p=1991"},"modified":"2016-02-06T20:55:05","modified_gmt":"2016-02-06T20:55:05","slug":"drunken-gifs","status":"publish","type":"post","link":"https:\/\/johnjohnston.info\/106\/drunken-gifs\/","title":{"rendered":"Drunken Gifs"},"content":{"rendered":"<blockquote><p>One should always be drunk. That&#8217;s all that matters&#8230;But with what? With wine, with poetry, or with virtue, as you chose. But get drunk.<\/p><\/blockquote>\n<p>\u2015 Charles Baudelaire<\/p>\n<p>I find gifs intoxicating, not the looking at them but creating. This is ridiculous. I find sitting down to rip a gif out of a movie and crush it to as small as possible, or to script some sort of weird concoction a lot of fun.<\/p>\n<p>This morning I read Alan&#8217;s post: <a href=\"http:\/\/cogdogblog.com\/2016\/02\/ooh-ooh-mr-kotter\/\">Ooh Ooh Mr Kotter! I Know How To Optimize My GIFs!<\/a>. It is great, a reminder than some of the fun of giffing is keeping the file size down.<\/p>\n<p>Alan uses photoshop. I&#8217;ve never really got a grip of that application. I tend to use firefox, gifsicle or even <a title=\"Don's Gif Zen\" href=\"http:\/\/johnjohnston.info\/oddsandends\/don\/\">javascript<\/a>.<\/p>\n<p>I though that I would se if I could replicate the sort of optimisation he writes about using gifsicle, for a wee bit of fun and learning. I&#8217;ve <a title=\"Search Results for \u201cgifsicle\u201d \u2013 106 drop in\" href=\"http:\/\/johnjohnston.info\/106\/?s=gifsicle\">blogged about gifsicle<\/a> a fair bit here. Gifsicle is a commandline application for working with gifs. It can be downloaded from <a href=\"http:\/\/www.lcdf.org\/gifsicle\/\">Gifsicle: Command-Line Animated GIFs<\/a>.<\/p>\n<p>I stared by a sort of replication Alan&#8217;s use of <a href=\"http:\/\/giphy.com\/create\/gifmaker\">GIPHY&#8217;s GIF Maker<\/a>. I took:<\/p>\n<div class=\"jetpack-video-wrapper\"><iframe loading=\"lazy\" title=\"True Grit (7\/9) Movie CLIP - Looking for Sign (1969) HD\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/Lb13v2-bBJQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<p>and fed it through the giffy tool.<\/p>\n<p>Like Alan I ended up with a <a title=\"Animated GIF - Find &amp; Share on GIPHY\" href=\"http:\/\/giphy.com\/gifs\/Zdh9HuBdWztL2\">huge gif<\/a> 4.5MB worth.<\/p>\n<p>So I downloaded it and got some info about it with gifsicle on the commandline:<br \/>\n<!-- HTML generated using hilite.me --><\/p>\n<div style=\"background: #000; overflow: auto; width: auto; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"background: #000; margin: 0; line-height: 125%;\"><span style=\"color: #ff0;\">john$ gifsicle -I drunk.gif<\/span>\n<span style=\"color: #ff0;\">* drunk.gif 45 images<\/span>\n<span style=\"color: #ff0;\">  logical screen 480x270<\/span>\n<span style=\"color: #ff0;\">  global color table [256]<\/span>\n<span style=\"color: #ff0;\">  background 2<\/span>\n<span style=\"color: #ff0;\">  loop forever<\/span>\n<span style=\"color: #ff0;\">  + image #0 480x270 transparent 2<\/span>\n<span style=\"color: #ff0;\">    disposal asis delay 0.07s<\/span>\n<span style=\"color: #ff0;\">  + image #1 480x270 transparent 2<\/span>\n<span style=\"color: #ff0;\">    disposal asis delay 0.06s<\/span>\n<span style=\"color: #ff0;\">  + image #2 480x270 transparent 2<\/span>\n<span style=\"color: #ff0;\">    disposal asis delay 0.07s<\/span>\n<span style=\"color: #ff0;\">  + image #3 480x270 transparent 2<\/span>\n<span style=\"color: #ff0;\">    disposal asis delay 0.07s<\/span>\n<span style=\"color: #ff0;\">  + image #4 480x270 transparent 2<\/span>\n<span style=\"color: #ff0;\">    disposal asis delay 0.06s<\/span>\n<span style=\"color: #ff0;\">  + image #5 480x270 transparent 2<\/span>\n<\/pre>\n<\/div>\n<p>There were a good few more lines, but I got the idea that there were 45 frames, each about 0.07 seconds long.<\/p>\n<p>The plan was to reduce the colours, the number of frames and increase the length of frames to compensate.<\/p>\n<p>The first thing I tried was:<br \/>\n<code>gifsicle -U -O3 -d 28 --colors 128 drunk.gif `seq -f \"#%g\" 0 4 45` -o drunk-128.gif<\/code><\/p>\n<p>What this does<\/p>\n<p>-U: unoptimises the input gif<\/p>\n<p>-O3: optimises the output<\/p>\n<p>-d 28: set the delay to 28\/100 sec<\/p>\n<ul>\n<li>colors 128: cuts down the number of colours<\/li>\n<\/ul>\n<p><code>seq -f \"#%g\" 0 4 45<\/code> is a clever bit:-) it produces a sequence of numbers with # in front between 0 &amp; 45 in jumps of four. This causes gifsicle to use those frames of the original gif. We have reduced the number of frames and increased their length to keep the animation the same length.<\/p>\n<p>This resulted in a 1.1MB file, not too good. I repeated the exercise with 64 colors, which got the gif down to 800kb<\/p>\n<p><a href=\"http:\/\/johnjohnston.info\/106\/wp-content\/uploads\/2016\/02\/drunk-64.gif\" rel=\"attachment wp-att-1992\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1992\" src=\"https:\/\/johnjohnston.info\/106\/wp-content\/uploads\/2016\/02\/drunk-64.gif\" alt=\"drunk-64\" width=\"480\" height=\"270\" \/><\/a><\/p>\n<p>Not too bad but still a bit big. I then remembered there was a version of gifsicle that could do lossy production of gifs. Alan mentions using this in photoshop. I had downloaded this before but lot it. A qick google found this interesting post: <a href=\"http:\/\/rigor.com\/blog\/2015\/12\/lossy-optimization-for-animated-gifs\">Lossy Optimization for Animated GIFs &#8211; Rigor<\/a> and lead to <a href=\"https:\/\/kornel.ski\/lossygif\">Lossy GIF compressor<\/a> where I downloaded the modified version again.<\/p>\n<p>I could now:<\/p>\n<p><code>gifsicle -O3 --lossy=80 -U -d 28 --colors 128 drunk.gif `seq -f \"#%g\" 0 4 45` -o drunk-lossy-128.gif<\/code><\/p>\n<p>Which give me, a 480k gif:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1993\" src=\"https:\/\/johnjohnston.info\/106\/wp-content\/uploads\/2016\/02\/drunk-lossy-128.gif\" alt=\"drunk-lossy-128\" width=\"480\" height=\"270\" \/><\/p>\n<p><code>gifsicle -O3 --lossy=80 -U -d 28 --colors 64 drunk.gif `seq -f \"#%g\" 0 4 45` -o drunk-lossy-64.gif<\/code> reduces the colours and weighs in at 391k (from the original 4.5MB).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1994\" src=\"https:\/\/johnjohnston.info\/106\/wp-content\/uploads\/2016\/02\/drunk-lossy-64.gif\" alt=\"drunk-lossy-64\" width=\"480\" height=\"270\" \/><\/p>\n<p>I decided to push the lossyness a bit to:<br \/>\n<code>gifsicle -O3 --<strong>lossy=160<\/strong> -U -d 28 --colors 64 drunk.gif `seq -f \"#%g\" 0 4 45` -o drunk-lossy-160-colors-64.gif<\/code><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1995\" src=\"https:\/\/johnjohnston.info\/106\/wp-content\/uploads\/2016\/02\/drunk-lossy-160-colors-64.gif\" alt=\"drunk-lossy-160-colors-64\" width=\"480\" height=\"270\" \/><\/p>\n<p>This only shave the gif down to 325K so I think lossy=80 seems a good compromise.<\/p>\n<p>This sort of gif fun might not be everyones drink, but if you are interested, I&#8217;ve some more scattered around this blog including: <a href=\"http:\/\/johnjohnston.info\/106\/taking-command-of-gifs\/\">Taking Command of Gifs \u2013 106 drop in<\/a> and <a href=\"http:\/\/johnjohnston.info\/oddsandends\/gifsicle\/faces\/compare.html\">Gifsicle Comparison<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>One should always be drunk. That&#8217;s all that matters&#8230;But with what? With wine, with poetry, or with virtue, as you chose. But get drunk. \u2015 Charles Baudelaire I find gifs intoxicating, not the looking at them but creating. This is ridiculous. I find sitting down to rip a gif out of a movie and crush &hellip; <a href=\"https:\/\/johnjohnston.info\/106\/drunken-gifs\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Drunken Gifs&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[74,113],"tags":[202,207],"class_list":["post-1991","post","type-post","status-publish","format-standard","hentry","category-animatedgif","category-tutorial","tag-animatedgif","tag-gifsicle"],"better_featured_image":null,"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3RLlC-w7","_links":{"self":[{"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/posts\/1991","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/comments?post=1991"}],"version-history":[{"count":2,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/posts\/1991\/revisions"}],"predecessor-version":[{"id":1997,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/posts\/1991\/revisions\/1997"}],"wp:attachment":[{"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/media?parent=1991"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/categories?post=1991"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/tags?post=1991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}