{"id":1042,"date":"2017-03-17T14:24:50","date_gmt":"2017-03-17T14:24:50","guid":{"rendered":"http:\/\/sandjam.co.uk\/sandjam\/?p=1042"},"modified":"2018-08-03T13:50:12","modified_gmt":"2018-08-03T12:50:12","slug":"building-animated-gifs","status":"publish","type":"post","link":"https:\/\/sandjam.co.uk\/sandjam\/2017\/03\/building-animated-gifs\/","title":{"rendered":"Building animated gifs"},"content":{"rendered":"

I’ve recently spent some time on a project that involved generating and sharing some animated gifs and I thought I’d share some insights.<\/p>\n

Technologies<\/h2>\n

The best tool I found for generating animated gifs is Imagemagick<\/a>. It’s a well established tool with a command line<\/a> version and a PHP library<\/a> that allows you to programmatically create almost any type of image manipulation you might need.<\/p>\n

The only downside I could find in Imagemagick was that the animated gifs it outputs were quite large, and even using its own compression methods didn’t help a great deal. I solved this by running the results though Gifsicle<\/a> which is a popular choice for optimising animated gifs.<\/p>\n

Gifscicle has three options for compression which give different variations of speed to performance depending on your needs.<\/p>\n

Sharing Gifs<\/h2>\n

\"\"<\/p>\n

We’ve all seen loads of examples of animated gifs shared on our Facebook and Twitter feeds and there are lots of gif search engines out there like Gifly<\/a>.<\/p>\n

I was surprised when I started looking in to these sites that lots of the time they aren’t actually showing you an animated gif but a mp4 video of it.<\/p>\n

This is because animated gifs really aren’t a very efficient format for displaying videos. The compression methods use aren’t nearly as effective as mp4 so a 5MB gif might only take 400Kb when encoded as a video.<\/p>\n

If you want to use open graph tags to share your gif with Facebook or Twitter you can’t add the gif path in to the og:image tag because it will only show the first frame of your animation. Instead you must convert it in to a video and use the og:video<\/a> tag on Facebook or the Twitter Player Card<\/a> tags.<\/p>\n

Converting GIFs to Video<\/h2>\n

I used the FFmpeg<\/a> library to convert my animated gifs to mp4 video.<\/p>\n

FFmpeg is an amazingly powerful library and it’s always my first stop whenever I need to do anything to do with video manipulation.<\/p>\n","protected":false},"excerpt":{"rendered":"

I’ve recently spent some time on a project that involved generating and sharing some animated gifs and I thought I’d share some insights. Technologies The best tool I found for generating animated gifs is Imagemagick. It’s a well established tool with a command line version and a PHP library that allows you to programmatically create […]<\/p>\n","protected":false},"author":3,"featured_media":1043,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4],"tags":[23,16],"class_list":["post-1042","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code","tag-social-networking","tag-video"],"acf":[],"_links":{"self":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/1042","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/comments?post=1042"}],"version-history":[{"count":4,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/1042\/revisions"}],"predecessor-version":[{"id":1078,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/1042\/revisions\/1078"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/media\/1043"}],"wp:attachment":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/media?parent=1042"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/categories?post=1042"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/tags?post=1042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}