How does ImageKit handle and optimize SVG and animated GIF images?

How does ImageKit handle and optimize SVG and animated GIF images?

Rahul Nanwani avatar
Written by Rahul Nanwani
Updated over a week ago

SVG image optimization

1. Basic optimization

SVG files, especially those generated from various design editors, contain a lot of redundant and unnecessary information. These can include editor metadata, hidden elements, default or non-optimal values, comments and other stuff that can be safely removed or converted without affecting the SVG rendering result. Once the extraneous code is removed, the file size decreases by a significant amount, which in turn speeds up website load time. This feature is enabled by default to ensure your website loads as quickly as possible.

SVG image optimization is always done for better performance regardless of the current setting for "Use best format for image delivery" in your ImageKit dashboard.

2. GZip compression
ImageKit also enables SVG GZip compression by default.

3. Conversion to other formats
SVGs are not converted to any other format like PNG or JPG because SVG is a vector graphic format whereas the others are raster graphic formats. Converting SVG to any other format would take away the benefits of choosing a vector graphic format. You can read more about vector vs raster graphic formats here.

Animated GIF image optimization

The use of animated GIF images have become very common on the internet now, especially with websites like Tumblr and Giphy becoming popular. 

However, animated GIFs are huge in size, often running into MBs. This makes the GIFs really slow to load.

ImageKit converts animated GIFs to animated WebP image format automatically on supported devices. Images in animated WebP format are almost one-third in size compared to the same image in animated GIF format. 

Animated WebP images are supported in Chrome 32+ (desktop and android) and Opera 19+ browsers.

Animated GIF to animated WebP conversion does not happen if "Use best format for image delivery" is turned off in your ImageKit dashboard settings.

If you have any questions or feature request related to SVG and animated GIF image optimizations, please reach out to us at support@imagekit.io

Did this answer your question?