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.

Complicated workflow if using srcset for img tag
Complicated workflow if using srcset for img tag

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.

Simplified workflow when using SVG
Simplified workflow when using SVG

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.

Export web ready SVG directly from Vecta
Export web ready SVG directly from Vecta

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

srcsetSVG
Image creationComplicated, require scripts to produce different resolutionsSimple, export to SVG. May require drag and drop to compressor
HTML insertionComplicated, require scripts to insert srcset attributeSimple, just use an img tag without extra work
BandwidthHigh, especially for high res displaysLow, 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!

AUTHOR

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.

Keep yourself updated with the latest development on SVG, Web development, CSS and Javascript.

vecta.io Early Access