A few colleagues of mine stumbled across this technique to save out bitmap images as SVGs using Adobe Illustrator that substantially saves on file size. I’ve personally done some testing with this approach (below), and my results yielded more than 80% file size reduction with no noticeable compression.
This approach is production-ready (provided your target browsers support SVG), and what makes it so eye-opening to me is I can’t seem to find anyone that has documented it online. Not only that, but Adobe’s documentation would lead you to exporting the SVG in a manner that doesn’t offer this file size benefit.
Here’s what I did:
I started with this image of the late 5ptz as a guinea pig. It’s 72ppi, 1200×800, and weighs in at 1.3MB. I copy it out of Adobe Photoshop CC 2015 and paste it into Adobe Illustrator CC 2015.
In Illustrator, I choose “File > Save As… > SVG”, NOT the “File > Export As…” option. Illustrator will prompt you to use “Export As…” for web-optimization, and while this is the correct approach for vector graphics, it doesn’t suit our needs for a bitmap image.
Here’s the final result, an 224kb SVG that looks identical to it’s 1.3MB JPG counterpart (!):
I did a series of export tests to see how I could achieve this, but saving from Illustrator seems to be the best approach. My results (with resulting output files linked):
|Approach||Resulting File Size|
|Export as SVG from Photoshop CC||2.9MB|
|Export as SVG from Illustrator CC||3.4MB|
|Save as SVG from Illustrator CC||224KB|
All of these export options are converting the image into a base64 format, but the biggest reason the save to SVG version is so small is because it’s the only option that minifies the file.
Now, bitmap-based SVGs have a few limitations in the modern production flow–some servers aren’t configured to render SVGs, forcing one to use an SVG htaccess settings tweak. SVG bitmaps scale proportionally, but don’t have an inherent size that one can automatically rely upon when embedding into an HTML page. Lastly, some CMSs (WordPress included) do not permit uploading SVGs through the admin WYSIWYG, though workaround and/or plugins are available.
This out for yourself and let me know what you find. As for me, I’m already eyeing it as a solution for large website images that aren’t generated by the client.