Animated Content

Correct use of animated content

Speed performance

Correct use of animated content

SeoChecker displays in a table like the one below the animated GIFs of the page, their size and the potential savings in terms of KiB (kibibytes) and in seconds if they were converted in video:

animated content

 

Why should I use video instead of animated GIFs?

If you use video you'll save a lot of network bytes; rather than GIF, you should use:

  • MPEG4/WebM videos for animations;
  • PNG/WebP for static images.

 

How can I create MPEG videos?

Consider using FFmpeg tool and run this command in console:

ffmpeg -i my-animation.gif my-animation.mp4

In this way, the instruction for FFmpeg is to consider my-animation.gif the input (signified by the -i flag) and to convert it to a video (my-animation.mp4).

 

How can I create WebM videos?

Still using FFmpeg tool, run this command in console:

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

 

How can I replace the GIF image with a video?

GIF images are based on:

  • automatic play;
  • continuous loop;
  • no sound.

You can set this up with the element <video>:

<video autoplay loop muted playsinline>  
  <source src="my-animation.webm" type="video/webm">  
  <source src="my-animation.mp4" type="video/mp4">  
</video>

Related guides

Learn more about Speed performance

Seo Audit

SEO Audit

On page SEO performance and page checkup.

Over 300 parameters for the deeper page analysis.

Try it now

Share this Guide

Did you like it? Share it!

Share this tool

Web tools for modern developers. Try these one!

Over 50 generators, builders and validators to improve your SEO and web performances

Home Back to top of the page