Image to Data Uri

Image to Data Uri is a Visual Studio Code extension that can convert an image to an html data uri.

A data uri is a way to inline an image directly into the html code by base64 encoding the bytes of the image and inserting the data into the image src tag. The data uri can also be used in other contexts like in SVG files, in javascript or CSS. You can read more detailed about the data uri scheme in this Wikipedia article.

Find it on the Visual Studio Code marketplace.

Convert an image in the Explorer menu

You can convert an image from the Explorer menu by right-clicking any Png, Jpeg, Svg or Gif file and the choose the context menu 'Copy image to clipboard as data Uri'.

Inline an image from within the text editor

If you have the image files located on your local storage an referenced them in your source code with a relative or absolute url, you can inline the image as a data uri by selecting the image url an then right-clicking the selection and choose the context menu 'Inline image src as data Uri'.