MandalaTV
Personal and Professional Blog of Rich Hauck

Saving bitmap images as base64 SVGs

by: Rich Hauck

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.

_MG_2198

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.

save-as-svg-screen

Here’s the final result, an 224kb SVG that looks identical to it’s 1.3MB JPG counterpart (!):

SVG file saved from Illustrator

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
Original JPEG 1.3MB
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.


Categories:HTML5 photography
Comments: 0

Leave a Reply

About Rich Hauck

Rich Hauck

I'm a creative technologist at Hauck Interactive, Inc. and an adjunct instructor at HACC. I live in Harrisburg, Pa. with my wife and two boys. I enjoy good coffee, Trappist beers, Orioles baseball, and good design.