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
srcset. The entire process is convoluted and time-consuming, but is there a better way?
If you're using
srcset for JPEG images or because of art direction, then this post is not for you, because
srcset is the correct way to deliver these images to different devices with multiple resolutions. But if your images can be vector-based, and you're still using
srcset, then read on to find out how to drastically reduce bandwidth, and improve productivity with a simplified workflow, by using SVG images.
Problems with using srcset
srcset involves a convoluted workflow, a bunch of scripts and normally, a complicated build process.
The first step is to export a single image into multiple (1X, 2X and 3X) resolutions, and usually involves running a script in your favorite editor to output the images. If you are manually exporting these PNG images, it means you would have to export at least 3 times, and therefore the reliance on a script to do the work for you.
The second step is to ensure all your
img tags, have a
<img src="domain.com/images/some_image.png" srcset="domain.com/images/some_image.png 1x, domain.com/images/[email protected] 2x, domain.com/images/[email protected] 3x" alt="Some alternate text">
As you can see, it's not easy to ensure the entire team, to have the discipline to insert the above correctly without mistakes, resulting in broken links for images. Therefore, most teams insert only the
img tag and use a build process with more scripts to scan for
img tags and automatically insert the
Penalizing users with high res displays
PNG is a raster image format, which means every pixel is represented with color information. For example, a 100 x 100 image would require 100 x 100 = 10,000 pixel information. If a user with a 2X display access your website, you would require 200 x 200 = 40,000 pixels, a 4X increase in file size (generally), even after optimizing your PNG image.
This increase in file size and bandwidth, is especially problematic because the majority of high res displays are usually mobile devices, where internet connections are metered and not as speedy as fixed line connections.
All in all, users with high resolution displays gets a worse experience, as they are forced to download higher resolution images.
Using SVG for responsive images
We all know SVG images will render perfectly on displays of all resolutions, mainly because it is a vector-based image format. What this means, is that SVG images can be displayed at any size without requiring a change in its file size. This allow us to use a single SVG file, to be displayed on devices of all resolution compared to multiple images when using
srcset, therefore simplifying our workflow.
If you use any other editor, exported SVG images is required to pass through the Nano compressor, where the SVG will be minified to a size that is usually smaller than equivalent PNG images. In addition, if any web fonts are used, Nano will also minify fonts and embed into the SVG to ensure no loss of fonts when used on
If you use an editor like Vecta, with its built in Nano compressor, SVG exported from the editor will automatically be compressed, and suitable for embedding into HTML immediately, without further work.
Embedding fonts also has the added advantage of text being shown much more sharper compared to equivalent PNG images, mainly because operating systems will optimize text using technologies such as ClearType, which make text much more legible.
Rewarding users of high res displays
By using SVG, users of high-resolution displays can download a small SVG image, and is therefore rewarded with low bandwidths and speedy images, resulting in a much better user experience.
SVG vs SRCSET
|Image creation||Complicated, require scripts to produce different resolutions||Simple, export to SVG. May require drag and drop to compressor|
|HTML insertion||Complicated, require scripts to insert ||Simple, just use an |
|Bandwidth||High, especially for high res displays||Low, a single small file can render on all devices|
In conclusion, if your images can be exported to SVG, use SVG instead, and save a ton of bandwidth and your users will thank you for it. Thanks for reading!