Unit 11: Intro to Photoshop
Unit 12: Design Accessibility
Unit 13: Product Design Thinking
Unit 14: User Experience Design
Unit 16: Introduction to Design Portfolios
Unit 17: Portfolio Development
Unit 18: Personal Branding
Unit 19: Case Studies
Unit 20: Portfolio Website Design
Unit 21: Career Coaching
2 of 2

HTML Video vs. GIF

In this lesson, we will talk about whether it’s better to use HTML video or GIFs for video content concerning accessibility.

Use HTML Videos Instead of Animated GIFs

Animated GIFs are extremely popular these days; websites use them all the time. However, their impact on accessibility is barely ever questioned and is actually quite disturbing. Accessibility issues get especially nasty when a website uses several animated GIFs on the same page. Just think about list-type articles in which each item is decorated with a separate GIF animation, frequently moving in all kinds of unpredictable directions.

The problems with animated GIFs are auto-playing, infinite looping, and the lack of user control, to be precise. Google Developers also cite performance problems (animated GIFs can be very big). One of the possible solutions is replacing them with HTML videos that run natively in all modern browsers.

By using HTML videos instead of animated GIFs, you enable users to stop or pause the animation or opt-out of watching it at all. Plus, you significantly improve page load time which is also an important metric of accessibility, especially because of mobile users and people in low connectivity areas.

Imgur and Gfycat also use HTML5 videos to display animated GIFs on their websites (you can test it with your browser’s developer tools). The technique is already widely tested in production.

Scroll to Top