Use SVG images to minimize file/download size, maintain image sharpness, react to changes in screen size and devices.

I have not been a fan of SVGs in the past. Editing them requires specialized knowledge (yes, Inkscape is specialised for me), editing them online has been flaky, and availability of SVGs for stock images have not been good.

All that has been changing for the good.

Today you can get high quality SVGs for free (or at minimal costs), and use them everywhere to achieve a much better end-result for images - without requiring any additional development effort.

Consider the use cases outlined below.

Use images on the front-page

SVGs are smaller and react better than PNGs to changes in screen size and resolution.
Many many sites convert PNG/JPG to SVGs with acceptable results (e.g. Online-convert, aconvert, svg-to-png, convertio).

In the circle SVG example provided below, you go all the way from ~150-300 bytes for a SVG to ~3-6 KB for PNG. The size is not quite drastic for complex images, but reduction can be in the order of 5-9x.

Use same images in multiple related pages

Use individual SVGs as static images or better still - create a sprite and use individual images to speed up download times and improve application performance.

For example show site images in main page, and one of those images in the detail page, include images of the same set of devices in product configuration page for individual products, and so on.

Icons

SVG icons are widely available. They are better than PNGs since they scale better, can be included individually (tree shake for icons!) and you change them colours based on user actions or context (e.g. change image colour when an option is selected). Sites like Flaticons provide high quality SVG images for any icon.

**Hard-code images!**

Images can be an over-kill. So how about including SVGs directly in the web page - include them inline?

Instead of -

1

<img src="circle.svg" />

.. use -

1
2
3
4

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="grey" stroke-width="3" fill="grey" />
  Sorry, your browser does not support inline SVG.
</svg>

You can even change colours or zoom-out in this image without modifying the overall image (well, technically you are modifying the display port within the image but overall image remains same).

Focus on a portion of the image

Changing focus of an image is quite easy within a SVG.

If you change the above circle example -

1
2
3
4

<svg height="50" width="50" viewBox="50 50 50 50">
  <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="3" fill="blue" />
  Sorry, your browser does not support inline SVG.
</svg>