It’s time to look at animated gifs again

Don’t look now but animated gifs are cool again!

Do you remember when Javascript was almost a dirty word? It was used for annoying popup windows and inaccessible navigation. Then things changed. A few people looked again at the technology and took a different approach to it. Now Javascript is everywhere and has transformed our web experience.

I believe the same thing is happening with the humble animated gif.

Most of us associate the animated gif with flaming logos, fluttering flags and under construction signs. However, as with Javascript, a few are looking at the technology again and using it in new and amazing ways.

The animated gif redefined

The pioneers of this next generation of animated gif are using it for everything from art to ecommerce and the results are spectacular.

A recent documentary by @pbsoffbook shows just how far the animated gif has come and clearly demonstrates its potential.

Why you should care

So is the animated gif a format that you should be using on your website? The answer is, quite possibly!

Animated gifs can breath some much needed life into the imagery on your website. They grab the users attention and act as design delighters, making your site stand out from that of the competition.

The alternative to the animated gif for adding movement to a site, is video. Admittedly this can be effective, as demonstrated by the Apple ‘new iPad’ site. However, video is considerably larger and often over the top for simply adding a bit of eye catching movement.

Personally, I am excited about the possibilities for the animated gif. As I look at our client base I see lots of opportunities. They could be used to enhance product imagery on ecommerce sites, demonstrate UX on an application or add personality and delight to a content heavy website.

Take a look at the examples below and ask yourself, how a similar approach might benefit your own website.

Boat sailing with the sea animated
Boat sailing with the sea animated

Woman watching a old fashion projector. The projector moves and room lights up.
Woman watching a old fashion projector. The projector moves and room lights up.

A man adjusts his jacket
A man adjusts his jacket

Photographers take photos at a fashion shoot
Photographers take photos at a fashion shoot

  • http://twitter.com/dakoon2003 Derrick Koon

    I think this is an issue of page weight. The one for the guy adjusting his jacket is almost 800k. While bandwidth in most areas is not a problem I could see a page full of these playing hell on someones processor and page rendering speed. If I am wrong about this I am willing to admit. I think that this might be good in a “one off” scenario where only a single image was an animated gif but site wide this could be taxing on someones device. 

    • boagworld

      True but when compared to a video this is actually not bad.

      Cheers,
      Paul

      Paul Boag [ Web Guy, Writer, Speaker and Polymath ]
      W: boagworld.com (http://boagworld.com)
      T: @boagworld (http://twitter.com/boagworld)
      M: 07760 123 120

      • http://twitter.com/deconspray Dennis Deacon

        Paul, agreed, yet animated GIFs in general are very short loops, difficult to be compared to an actual video (3-5 sec videos?).

        To Derrick’s point, I believe especially with page weight, bandwidth and search engines weighing heavily on performance, the real world application of  GIFs are limited to fairly small attention grabbers and creative, artistic scenarios.

  • http://www.facebook.com/profile.php?id=707052659 Sean Breeden

    One of my favorite sites is http://www.gifflix.com.  It’s more for forum gifs but lots of good ideas there!

  • http://www.koinoniaweb.co.uk Daniel Kemp

    I find animated gifs a bit spooky. I don’t know why. It’s all a bit Harry Potter!

  • admilne1982

    I love some of these subtle gifs. Like the photography one and the projector one in the examples above. I could see them adding some real weight to grabbing a users attention.

    Daniel is right when he says its all a bit Harry Potter, but thats what makes it eye catching. It would have to be subtle though otherwise I could see it getting old very fast.

  • http://www.facebook.com/robin.rowell1 Robin Rowell

    Around a year ago or so there was a big buzz about “cinemagraphs” amongst the photographer community.  You can visit the site of photographers Jamie Beck and Kevin Burg to learn more at http://cinemagraphs.com/ .

  • http://shinytoyrobots.com/ Robin Cannon

    Excellent piece. Definitely worth revisiting the potential of animated gifs without preconceptions about how badly it’s been used in the past.

    I do have some sympathy with Derrick’s comment about file size. Although video is certainly heavier overall, there is a degree to which the delivery method means that it doesn’t suffer the full initial load like a gif.

  • roshodgekiss

    Animated GIFs are a big deal in HTML email design, especially given the poor support for video and CSS across the most popular email clients. Hopefully we’ll see a similar artfulness make its appearance in the inbox, as is apparent on the web.

    For the curious, an overview of animated GIF support (and a couple of solid examples) can be found here: http://www.campaignmonitor.com/blog/post/3682/animated-gif-support-in-email/

    Thank you for the inspiration, Paul! :D

  • Sean Murphy

    Was just working on a new project last week… has anyone found a work-around for Safari not playing animated GIFs as CSS background rollovers in buttons? I’d love to have that user feed-back, but can’t find any shiv for it. Otherwise, yes: great ideas, Paul.

  • http://twitter.com/amosuro Ashley Mosuro

     Never really used gifs for anything apart from loading states – but this article has definitely made me think about other uses!

  • http://twitter.com/kevadamson kevadamson

    I use an animated gif on my own site, and have never really understood why they’ve been abandoned as an option over the years. Back in the day, many gif animations were so badly executed and naff (think “letter going in envelope” etc.) they almost tainted the whole technique as an option. It was the fault of those creating them, not the method itself. I think it has it’s place for certain types of animation, as they can be small in size and universal in browser output. Hooray for the animated gif!

  • http://www.facebook.com/profile.php?id=790850407 Mario Simón

    A brilliant article and it’s given me a new muse and inspiration. 

    It’s been years since I made a gif in photoshop. What are the new tools and methods to create gifs and especially the gif that have great photography movement? That really excites me.

    Any tips and links would be awesome. thx!

  • http://twitter.com/chuckkillorin Chuck Killorin

    Great article Paul, the examples you put up are a great way to acquaint people with the power of the Animated GIF. The thing I’m struggling with is that when I started (’94) a lot of people where using them VERY badly. It’s tough to get the stank off of them (for me).  All in all though, I’ve been seeing them used very effectively lately (especially in emails) – so its nice to see them used “for good” instead of the flaming fires of evil.

  • http://www.facebook.com/degenlucas Lucas Degen

    True as a koe but for one strange reason, chrome does not always wants to load these animated gifs on this page.

  • David Shing

    Very good points made here, I plan on looking into this much further because it has many applications…

  • Temi

    That was inspirational…
    I almost thought GIF’s were gone… now we can begin…again.
    Thank you.

  • ElleEphotography

    I love it…the Evolution of photography!!!!!

  • Pick A Name

    Why didn’t you give credit to where you got the gifs? I am looking for the site run by the fashion blogger who made the first and fourth of the gifs and all I can find is this page.
    Give Credit! At least, if not a link.
    You would expect the same respect.

  • Drew Baillie

    I can see this going very very wrong

Headscape

Boagworld