Are you able to determine the difference between the two images below? Is it the same picture?
You probably guessed it, but it's not the same picture! The image on the right is actually an optimized version of the original image on the left.
This improvement was made manually using a tool I discovered this year in on of the latest Frontend Focus newsletter: SVGOMG.
SVGOMG is the Missing Graphical user interface of a Node.js tool specialized in optimizing SVG files, named SVGO.
SVGOMG's interface is straightforward to use and can be summarized in three steps:
- Upload your SVG image
- Play with the different controls offered to have an almost identical image, but with a lower weight than the original image
- Download the resulting SVG image
One of the advantages of using a GUI and going about it with a manual process is that we can more easily ensure the quality of the resulting image.
My favicon's image size went from 73,728 bytes to 20,480 bytes! This represents a saving of approximately 72% of the original image! Impressive, right?😮
Indeed, it compares the size of files compressed with gzip! 😉
You will now have one more tool in your toolbox! 😋
