December 01, 2018 · SVG · Web · PNG

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

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 a 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 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 normally mobile devices, where internet connections are normally 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!

Like the article? Give the author some claps.

Share it with your friends!
AUTHOR

Thomas Yip

Founder at vecta.io, created Electra, engineering nerd.

Creating a diagram?

Introducing the world's first SVG editor with javascript based plugins

Learn more...

RELATED POSTS

The definitive guide to CSS styling order

Ever wondered why your CSS does not apply and require the important keyword instead? Or why SVG editors uses inline attributes instead of CSS style sheets? Read on to find out how styling methods affect what's being applied to your elements.

October 28, 2018 · SVG · Web · Fonts

Using fonts in SVG

A year after SVG 1.0 was introduced back in 1999, SVG fonts was introduced with intention to allow designers to design SVG graphics with any fonts they like and have the fonts showing up correctly on the end user browser. But 18 years later now, how ...

October 25, 2018 · SVG · Web

How to create a customized vector background for your website within 1 minute

Searching high and low to get a vector background for your website? Want to get a vector wallpaper quick but don’t want to be paying for stock vector graphics? You can now create a vector background like below for yourself in less than 1 minute! ...