Kieran France Kieran France is a programmer for IDRSolutions in charge of there internal test suite. In his spare time he enjoys tinkering with gadgets and code.

How to embed base64 images in HTML

1 min read

html5

When creating HTML files you can include images by several means using local images, external URLs, and using base64 images. This tutorial covers how base64 images can be included and why you would want to.

Why should I embed images as base64?

Embedding images as base64 content will decrease the number of requests required as the images are now part of the HTML file. However, the base64 content will be between 20-25% larger than the image. This means that this approach will be beneficial for small to medium images but large images would have a much larger impact on performance.

How to embed base64 images in HTML

Step 1 Convert image to base64 string
There are several ways to do this. Here is a Java example.

final ByteArrayOutputStream os = new ByteArrayOutputStream();
try {
    //Can be any support image format
    final String formatName = "jpg";
 
    //Convert image data to Base64 and write date to the output stream 
    final BufferedImage image = ImageIO.read(new File("/path/to/file"));
    ImageIO.write(image, formatName, Base64.getEncoder().wrap(os));
 
    //Create Base64 string
    final String base64 = os.toString(StandardCharsets.UTF_8.name());
 
} catch (final IOException ioe) {
    throw new UncheckedIOException(ioe);
}

Step 2 Create an img tag with an empty src value

<img src="" alt="Description of the image" />

Step 3 Construct a data URI in the src attribute

  1. Add a data media type to match the original image
    <img src="data:image/jpeg;" alt="Description of the image" />
  2. Add a charset that matches that used in the encoding
    <img src="data:image/jpeg;charset=utf-8;" alt="Description of the image" />
  3. Add the base64 data you created previously
    <img src="data:image/jpeg;charset=utf-8;base64,<DATA>" alt="Description of the image" />



Converting PDF/ Office Documents to HTML?

Convert PDF to HTML Find out why our customers use BuildVu for HTML conversion

Kieran France Kieran France is a programmer for IDRSolutions in charge of there internal test suite. In his spare time he enjoys tinkering with gadgets and code.

Converting your PDF files to HTML5 with BuildVu 

Recently we announced our updated product range for 2018 and are rebranding some existing products, like JPDF2HTML5 which has been renamed to BuildVu. It...
Georgia Ingham
2 min read

Favourite resources from our HTML development team

As the web progresses and grows, so do the technologies that come along with it. Trying to keep on top of everything you need...
Ovidijus Okinskas
1 min read

Leave a Reply

Your email address will not be published. Required fields are marked *

IDRsolutions Ltd 2021. All rights reserved.