My website has a comment section in which people can post images. Many people post animations (which are actually MP4 converted from GIF's, so they are quick to load and save a lot of bandwidth), and until now I've had a play button available if the user wants to play the animation.

However, recently I, and other users, have been getting a little annoyed at how inconvenient it is. A lot of times people post an animation on every comment, and clicking on the play button for each is annoying. Others, however, think I should keep it because sometimes they don't want to play the animations. Not to mention that it's memory-consuming.

What should I do? What I did for now was - auto-play the first images, then pause them and add a play button when the user presses "load more." But is it wise to load them all?


  • How big can the GIFs be that they need compression? GIFs are usually pretty small in visual size and already use dithering to reduce the color palette to 256 colors. May 31 '14 at 4:24

How about autoplay on hover, and click for continuous play? You could also implement a user setting that could be set in their preferences for whether animations should play automatically or not.

This would solve all your problems at once.

  • 1
    How would this work if I don't use a mouse though? (Keyboard user, or a tablet user for instance).
    – JonW
    Mar 1 '14 at 23:55
  • you could trigger the autoplay when the page is scrolled to a certain point. Say, if the element is at a height less then 10% off the top of the page. This would be a form of non-mouse "hover" analogy
    – insaner
    Mar 2 '14 at 1:37

The best user experience is made of many elements, and one of the most important, is control, or feel of control.

If your users have control over a feature, in this case to play the animation or not, it shouldn't be removed unless there is a really god reason.

More specifically, animations on comments are usually something not relevant, and can get distracting, not to mention overload the browser and system, so leaving them inactive until the user wants to activate it, is the best option.

Since your question is related only to comments, that is the bes way. But for post, you can leave the animation active by default since we can assume that the person who wrote the text/post considers that animation to be important to convey the idea.

  • It sounds like the website has users who are logged in. In that case you can make it an option. Apart from putting it in the user profile, you could also add a dialogue when the user plays an animation and offer the different settings (always play/never play/ask me again next time). Perhaps an optional dialog like most browsers have when offering to save your password. Mar 1 '14 at 7:51

Why not indicate that the images have animation without having to click anything.


download bmml source – Wireframes created with Balsamiq Mockups

Outline persists regardless of playing state. Play button disappears when playing.

The advantage to the play button is the clarity in communicating animation, but it could be confused for a video (especially if users can also post videos in the forums). The outline would require users to learn (which is never good), but could be demonstrated with a tooltip (?) box or something similar.

A site like Memegen.com does a decent job indicating animation without having images constantly playing.


The choice to convert an uploaded gif to mp4 is purely a back-end architectural decision. However, by not autoplaying it, that decision has bled into the user experience. If I upload a gif, I expect the browser to "autoplay" it, because that's the default behavior. I don't have to click play on any other website.

The conversion, while important for bandwidth savings should be transparent to your users.

  • On Tumblr and (mobile) imgur GIF's (not MP4's) have a play button.
    – Shahar
    Mar 2 '14 at 16:28
  • The conversion does cause more load on the CPU and memory for decoding. In a user has multiple such pages open, each with many MP4s it may effect the user's machines resources in a negative way. May 31 '14 at 4:21

@insaner has got pretty much the correct answer imo.

  • Indicate on the picture that it is an animation .
  • Make the animation play when hovered upon

This makes sure that the user does not have to perform an additional action. A good implementation of this can be viewed on the site cartilagefreecaptain.com

edit: looks like the site has changed that implementation. so here is a basic mockup of what i meant


download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.