Media Optimizer

npm install -g @clxrity/media-optimizer

A package that allows you to optimize animations for your web applications.

• Installation
• Usage
• Why?
• Examples

Installation

• The only required installation is ffmpeg
  • If you already have this installed, skip past this point.

Windows

Install ffmpeg manually: https://www.ffmpeg.org/download.html

Mac & Linux

optimize install

• If you get the following error: Permission denied

chmod +x /path/to/script/install.sh

Note: Linux users will be prompted to enter their password

Usage

Once a file/url has been optimized, it will output an output.webm & output.mp4 in the root directory of wherever the command is ran.

• Convert a .gif file to .webm & .mp4

optimize path/animation.gif

• From a URL:

optimize https://user-images.githubusercontent.com/6876788/96633009-d1818000-1318-11eb-9f1d-7f914f4ccb16.gif

Why you should replace animated GIFs with video

Large GIFs are inefficient for delivering animated content. By converting large GIFs to videos, you can save big on users' bandwidth. Consider using MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save network bytes.

For more information, read the Chrome developer documentation on efficient animated content

In short, this will allow you to serve a gif(s) as a video to save a user's bandwith, and ultimately display your animation better.

Example

BAD PRACTICE ❌

<img src="my-animation.gif" />

GOOD PRIACTICE ✅

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