Embed Images in HTML with API support

Sometimes you want to distribute your HTML application (*.hta) or a pure HTML file (*.html) without any external images. However, it would be nice to include some images, such as company logo in the HTML report. Well, this is easy and nothing new (still using the well-supported <img> tag).

How do we achieve this? We first need to convert the binary images (*.jpg/*.png/*.bmp etc) to base 64 format, which returns the ASCII-printable characters for non-text binary image data. This will increase the size to 4/3 of original e.g. every 3 bytes will be converted into 4 bytes.

After the conversion, we just append the data to the value of the attribute src of the <img> tag, so it looks like the following:

<img src=”data:image/jpeg;base64,DATA-DATA-DATA….”>

For example, the following should show an embedded Company logo.

Common supported image types are image/jpeg, image/png, image/bmp, and image/gif.

API to convert

Now, we provide a free API that allows you to easily convert images to base64 source that can be embedded in HTML.

https://helloacm.com/api/image-to-base64/?url=https://justyy.com/YY.png

will return string for HTML img src.

data:image/png;base64,iVBORw0KGgoAAAANSUhEU…. lots of data

You can also upload images to https://uploadbeta.com if you are looking for a free image host.

Do it Locally

https://rot47.net/base64encoder.html provides a client side implementation that can convert any text/binary files to BASE64 format without sending data to the server.

When to Embed images in HTML source

1. Images are small.
2. Images not updated frequently.
3. You have gzip support to compress the HTML. This approach reduces the number of network requests, but increases the size of images to 1/3 (due to base64 encoding). And images won’t be cached locally by browsers.

PHP Source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

  $url = '';
  if (isset($_GET['url'])) {
    $url = trim($_GET['url']); 
  }
  $data = '';
  if ($url) {
    $size = getimagesize($url);  
    switch ($size['mime']) { 
        case "image/gif": 
            $data .= "data:image/gif;base64,";
            break; 
        case "image/jpeg": 
            $data .= "data:image/jpeg;base64,"; 
            break; 
        case "image/png": 
            $data .= "data:image/png;base64,"; 
            break; 
        case "image/bmp": 
            $data .= "data:image/bmp;base64,"; 
            break; 
    } 
    if ($data) {    
      $data .= base64_encode(file_get_contents($url));
    } 
  }
  header("Access-Control-Allow-Origin: *");
  header('Content-Type: application/json');
  die(trim($data));

  $url = '';
  if (isset($_GET['url'])) {
    $url = trim($_GET['url']); 
  }
  $data = '';
  if ($url) {
    $size = getimagesize($url);  
    switch ($size['mime']) { 
        case "image/gif": 
            $data .= "data:image/gif;base64,";
            break; 
        case "image/jpeg": 
            $data .= "data:image/jpeg;base64,"; 
            break; 
        case "image/png": 
            $data .= "data:image/png;base64,"; 
            break; 
        case "image/bmp": 
            $data .= "data:image/bmp;base64,"; 
            break; 
    } 
    if ($data) {    
      $data .= base64_encode(file_get_contents($url));
    } 
  }
  header("Access-Control-Allow-Origin: *");
  header('Content-Type: application/json');
  die(trim($data));

References:

1. http://www.techerator.com/2011/12/how-to-embed-images-directly-into-your-html/

2. https://rot47.net/base64encoder.html

3. https://steakovercooked.com/src/online_encode/

–EOF (The Ultimate Computing & Technology Blog) —