However, there are steps you can take to optimize the file size even more and ensure your visitors get an awesome experience on your website. It’s likely such simple SVG images have a small file size compared to their raster counterparts. Generally speaking, SVGs for web use are quite simple, things like logos, maps, icons, etc.
The more complex the drawing instructions the larger the file size. That said, there’s something that can have a negative impact on SVG file size, i.e. 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. 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. SVGs are made of geometrical drawing instructions, e.g., shapes, paths, lines, etc., which are independent from pixel size. Scaling is in the DNA of vector graphics, and SVG is an XML-based vector image format. It won’t be a problem for your website’s performance, but it can negatively impact on your time and your server’s bandwidth. Here’s what srcset looks like in practice: Īnd below is an example of the picture element in action: Īs 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.
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. 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. The goal of responsive images is to serve the best quality image for the device being used. The srcset and picture Elementsįortunately, 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. One alternative is to serve high resolution graphics, which of course can hit web performance pretty hard. With retina screens being now common on users’ devices, the risk of having raster images on your website looking like this is high. Notice the fuzzy edges, the blurry surface and how the overall quality of the image is considerably degraded. Here’s the same image when it is displayed at a much higher resolution: JPEG image of a flower at its original width of 300 x 225px: Not only that, but pixels-based graphics don’t scale very well. Therefore, the larger the image, the more pixels it uses, which causes the file size to increase. PNG, etc., are made of square pixels laid out in a grid. Thank you for supporting the partners who make SitePoint possible.
This article is part of a series created in partnership with SiteGround. However, this claim is not without some qualification. Having a relatively small file size is certainly one of them. There are a few good reasons why Scalable Vector Graphics, or SVG, are a great choice of graphics format for the web.