Comparing SVG and PNG File Sizes

May 26, 2018 ·  Thomas Yip
Software Development Director · Nano SVG Compressor · Everything SVG · Web Design

You may have heard that SVG have the lowest size while offering the best quality. Is it true? Why are developers still using srcset and generating PNG @ 1x, 2x and 3x resolution? Can you save any bandwidth with using SVG instead of PNG?

Depending on your use cases, SVG can offer anything from 60% to 80% bandwidth savings, higher image quality, faster loading and a simplified workflow.

Why are file sizes important?

We all know that page speed affects SEO (Search Engine Optimization) ranking, and one of the easiest way to ensure our pages load faster, is to optimize our images.

With the proliferation of high resolution devices like retina displays, developers need to ensure images are displayed clearly and as sharp as possible across all devices, and therefore the usage of srcset attribute on an <img> tag, to ensure browsers load high resolution images only when necessary to save bandwidth.

If you are inserting a photo from a camera or using srcset for art direction, then this post is not for you, as using srcset is the only option. But, if you have control on the production of the image, and can convert it to SVG or PNG, then selecting the right format may save you a lot of bandwidth and your users will thank you for it!

Image selection

For the purpose of this comparison, we shall be looking at using <img> tag to embed our SVG. It would'nt be fair to use <object> or other tags that allow our SVG to reference external CSS and fonts to save file size, where PNG images cannot do so. Therefore, all image formats must be able to be displayed correctly, on its own without external references, see The best way to embed SVG on HTML (2021).

A total of 3 images will be used, a simple and a complex image without text, and also a general image with text and fonts. These images are chosen more by convenience rather then by selection (more about this later), so your results may vary.

All images including SVG and PNG are optimized with industry leading optimizers to squeeze further reduction in file size. Especially for PNG, these optimizations can result in about 70% reduction.

Simple image without text

All PNG files are optimized using tinypng

It is clear for simple images, SVG has a clear advantage. Straight out of the editor, SVG already has one of the lowest file size at 4.75KB (we used vecta.io, your results may vary).

After passing through SVG optimizers, Nano offers the lowest file size at 2.72KB for savings of 42.7%. What's even more amazing is the 621B file size when using GZip compression, resulting in a whopping 86.9% savings. While we are not advocating content encoding, you could easily setup your servers for transfer encoding and still save 86.9% bandwidth!

Before optimization, PNG images are about 70% larger in size. Even after optimization, PNG images are way bigger than SVG, so the winner is clear in this case. Since PNG is already a compressed format, using GZip compression on PNG images does not yield much savings, if any (6.33KB unzipped, 6.38KB zipped).

SVG (1) vs PNG (0)

Clearly, SVG with GZip at 621B versus 6.33KB for PNG, results in 90.2% bandwidth savings. Therefore, for simple images, there's a ton of bandwidth to be saved when using SVG compared to PNG. Just ensure your SVG images passes through an optimizer (we recommend Nano).

Complex image without text

The complex image was chosen to ensure we have a SVG file that is bigger than its equivalent PNG @1x image, as complex patterns can sometimes have a larger file size compared to its equivalent raster image format. Coming in at 191KB straight off the editor, it is about 3.5 times bigger than PNG at 56.3KB.

After optimization, again Nano has the smallest file size at 78.2KB, while still bigger than PNG @1x, one could argue that a single SVG image renders beautifully on all resolution, while PNG would require 3 files, @1x, @2x and @3x to cover the same, resulting in a more complicated workflow and penalizing users with high resolution.

Amazingly, GZip compression reduces the SVG to 13.6KB, for an unbelievable file size savings of 92.9%. This single file renders sharply on devices of all resolutions, reducing bandwidth and rewarding users using high resolution displays with fast rendering.

SVG (2) vs PNG (0)

With compressed SVG using GZip coming in at 13.6KB vs 56.3KB for PNG, for a 75.8% reduction in size, the advantage is incomparable. If you have not turned on transfer encoding on your servers, then you should, because even for a complex SVG, the file size and bandwidth savings are substantial when using SVG compared to using PNG, in addition to a reduction in workflow complexity.

General image with text and fonts

For an SVG image with text, when used on an <img> tag, all web fonts will fail to render on ALL browsers due to security reasons. In order to display text with its intended fonts, we have to go through a complicated manual process to embed fonts into the SVG file.

For our test image, we used Roboto and bold + normal, so we embedded these 2 fonts (minus italics and bold + italics) into the SVG, and the file size came up to 77.4KB, 2 times the equivalent PNG at 39.1KB. As expected, 3rd party SVG optimizer produces little savings at only 12.3%.

Easily embedding fonts with Nano

In addition to optimizing SVG, Nano also optimizes fonts, in a single automated step. All that is needed is dragging and dropping an SVG, and Nano will scan the SVG, detect any fonts beind used, and selectively insert only the required fonts. Compared to manually embedding fonts, Nano offers a much simpler automated workflow.

Nano is able to compress embedded fonts to 36.2KB, substantially smaller compared to embedding fonts manually. With GZip compression, the SVG size is brought down to only 24.6KB, a savings of 68.2%, slightly smaller then equivalent PNG @1x size.

SVG (3) vs PNG (0)

At the time of this writing, Nano is the only SVG optimizer able to compress, embed and optimize fonts. What this means is that you can have a single SVG file that will render beautifully on all resolutions, without resorting to multiple PNG and a complicated workflow, and still have a file size that is arguably smaller than equivalent PNG size, saving substantial bandwidth and resulting in speedy loading of your images.

In addition, because fonts were embedded, your images will appear incomparably sharper and clearer on all devices compared to raster images (PNG). For example, on windows, ClearType will automatically apply to these SVG images with embedded fonts.

Conclusion

With or without text, SVG images trumps PNG images on all counts. With Nano SVG optimizer, file sizes are very small and yet allow users to have a simplified workflow that will render extremely well under all resolutions.

Assuming you have the 3 images above on your site, and you have 10,000 hits on each image, with 50% of them normal resolution, 40% 2X and 10% 3x resolution. If you use PNG:

• Simple image: 5000 * 6.33KB + 4000 * 11.5KB + 1000 * 16.9KB = 94.6MB
• Complex image: 5000 * 56.3KB + 4000 * 146KB + 1000 * 249KB = 1114.5MB
• Image with text: 5000 * 39.1KB + 4000 * 96.4KB + 1000 * 172KB = 753.1MB

Your total bandwidth will be: 1962.2MB

If you use Nano compressed SVG with GZip compression:

• Simple image: 10000 * 621B = 6.21MB
• Complex image: 10000 * 13.6KB = 136MB
• Image with text: 10000 * 24.6KB = 246MB

Your total bandwidth will be: 388.21MB

Your total savings will be 1573.99MB, or a whopping 80.2% bandwidth reduction, a significant amount by any measure. If you have a highly trafficked site, these small images offer your users much better image quality, faster loading speed even on high resolution displays and substantial workflow and bandwidth savings for you. What's not to like?

Thomas Yip
Software Development Director

As the creator and founder of Electra Cloud, which is now known as Capital Electra X, he introduced the market to an innovative, disruptive, and fully cloud-native electrical CAD solution. The driving force behind Capital Electra X, he is committed to shaping the future of easy-to-use Electrical CAD software development. Find him on Linkedin.