Is Using SVG Images Good for Your Website’s Performance?

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

There are a few good reasons why Scalable Vector Graphics, or SVG, are a great choice of graphics format for the web. Having a relatively small file size is certainly one of them. However, this claim is not without some qualification. Let's delve a bit deeper.

Benefits of Vector Images

Raster images, e.g., .JPEG, .PNG, etc., are made of square pixels laid out in a grid. Therefore, the larger the image, the more pixels it uses, which causes the file size to increase.

Not only that, but pixels-based graphics don't scale very well. Here's what I mean. This is a .JPEG image of a flower at its original width of 300 x 225px:

Here's the same image when it is displayed at a much higher resolution:

Notice the fuzzy edges, the blurry surface and how the overall quality of the image is considerably degraded.

With retina screens being now common on users' devices, the risk of having raster images on your website looking like this is high. One alternative is to serve high resolution graphics, which of course can hit web performance pretty hard.

The srcset and picture Elements

Fortunately, modern HTML comes to the rescue with responsive images, i.e., the srcset and the picture elements, which at the time of writing are both supported in the latest versions of all major browsers, except for EI11 and Opera Mini.

The goal of responsive images is to serve the best quality image for the device being used. This involves making available images at various resolutions, but enabling the browser to load just that one image that fits the capabilities of the accessing device.

If you're curious to know more about how these techniques work, How to Build Responsive Images with srcset by Saurabh Kirtani goes deeply into the topic.

Here's what srcset looks like in practice:

[code language="html"]
<img srcset="image_3x.jpg 3x, image_2x.jpg 2x, image_1-5.jpg 1.5x" src="image.jpg" alt="image">
[/code]

And below is an example of the picture element in action:

[code language="html"]
<picture>
<source media="orientation:landscape" srcset="retina-horizontal-image.jpg 2x, horizontal-image.jpg">
<source media="orientation:portrait" srcset="retina-vertical-image.jpg 2x, vertical-image.jpg">
<img src="image.jpg" alt="image">
</picture>
[/code]

As you can see, although only one copy of your image will be served according to the accessing device, both techniques require you to prepare and upload to your server multiple copies of that image. It won't be a problem for your website's performance, but it can negatively impact on your time and your server's bandwidth.

SVGs are Resolution-Independent

Scaling is in the DNA of vector graphics, and SVG is an XML-based vector image format. SVGs are made of geometrical drawing instructions, e.g., shapes, paths, lines, etc., which are independent from pixel size. From the point of view of file size, it doesn't really matter at what size the image is rendered, simply because those instructions remain unchanged.

One more implication of being resolution-independent is that you don't need to prepare different copies of the same image for different devices; one size fits all and looks razor sharp at any screen resolution.

That said, there's something that can have a negative impact on SVG file size, i.e. how complex the image is. The more complex the drawing instructions the larger the file size.

Suggestions for Performant SVG Files

Continue reading %Is Using SVG Images Good for Your Website’s Performance?%

by Maria Antonietta Perna via SitePoint