Responsive Images Using SVG Instead of Srcset
December 01, 2018 · Thomas Yip
Software Development Director · Web Design · Everything SVG
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
Using 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 srcset attribute:
<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 srcset attribute.
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 img tags.
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
srcset | SVG | |
|---|---|---|
| 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 srcset attribute | Simple, just use an img tag without extra work |
| 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!
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.
