May 26, 2018 · SVG · Web · PNG

Comparing SVG and PNG File Sizes

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 (2018).

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

Simple penrose triangle with no text
Simple penrose triangle with no text
Original
3rd party
Nano
Nano (svgz)
PNG @ 1x
PNG @ 2x
PNG @ 3x
Size
4.75KB
3.15KB
2.72KB
621B
6.33KB
11.5KB
16.9KB
Savings
33.7%
42.7%
86.9%
-33.3%
-142.1%
-255.8%

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

Complex image with no text
Complex image with no text
Original
3rd party
Nano
Nano (svgz)
PNG @ 1x
PNG @ 2x
PNG @ 3x
Size
191KB
116KB
78.2KB
13.6KB
56.3KB
146KB
249KB
Savings
39.3%
60.9%
92.9%
70.5%
23.6%
-30.4%

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

General image with text and fonts
General image with text and fonts
Original
3rd party
Nano
Nano (svgz)
PNG @ 1x
PNG @ 2x
PNG @ 3x
Size
70.3KB
65.8KB
22.0KB
11.7KB
12.0KB
26.5KB
42.6KB
Savings
6.4%
68.7%
83.4%
83.0%
62.3%
39.4%

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 70.3KB, a whopping 6 times the equivalent PNG at 12.0KB. As expected, 3rd party SVG optimizer produces very little savings at 6.4%.

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 22.0KB, substantially smaller compared to embedding fonts manually. With GZip compression, the SVG size is brought down to only 11.7KB, a savings of 83.4%, 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.

SVG images with embedded text appear much sharper compared with rasterized PNG
SVG images with embedded text appear much sharper compared with rasterized PNG
Because of rasterization, PNG text will not enjoy font system optimizations
Because of rasterization, PNG text will not enjoy font system optimizations

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.5KB
  • Complex image: 5000 * 56.3KB + 4000 * 146KB + 1000 * 249KB = 1114.5KB
  • Image with text: 5000 * 12.0KB + 4000 * 26.5KB + 1000 * 42.6KB = 208.6KB

Your total bandwidth will be: 1417.65KB

If you use Nano compressed SVG with GZip compression:

  • Simple image: 10000 * 621B = 6.21KB
  • Complex image: 10000 * 13.6KB = 136KB
  • Image with text: 10000 * 11.7KB = 117KB

Your total bandwidth will be: 259.21KB

Your total savings will be 1158.4KB, or a whopping 81.7% 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?

Like the article? Give the author some claps.

Share it with your friends!
AUTHOR

Thomas Yip

Founder at vecta.io, created Electra, engineering nerd.

Creating a diagram?

Introducing the world's first SVG editor with javascript based plugins

Learn more...

RELATED POSTS

The definitive guide to CSS styling order

Ever wondered why your CSS does not apply and require the important keyword instead? Or why SVG editors uses inline attributes instead of CSS style sheets? Read on to find out how styling methods affect what's being applied to your elements.

December 01, 2018 · SVG · Web · PNG

Responsive images using SVG instead of srcset

It used to be, if you embed an image onto your website, that will be the end of the story. But with the proliferation of high resolutions displays, webmasters all over the world are scrambling to update their websites with high-res images using srcse...

October 28, 2018 · SVG · Web · Fonts

Using fonts in SVG

A year after SVG 1.0 was introduced back in 1999, SVG fonts was introduced with intention to allow designers to design SVG graphics with any fonts they like and have the fonts showing up correctly on the end user browser. But 18 years later now, how ...