How to import images directly into the html code (base64)

A couple of months ago I received an interesting task - to create a small html application for iPhone. To be honest, for me that meant creating a small site with a specific size. Of course I was wrong. Together with couple of small bugs I had to deal with one other requirement - everything had to be in one html file. It was clear how to add the javascript and the css, but what about the images.The solution was to use base64 encoding. I wrote a small php script that accepts an image and shows me the equivalent in base64 string.

<?php
  $base64 = "";
  $css = "";
  $tag = "";
  
  if(isset($_FILES['f']['name'])) {
    $file = rand(0, 10000000).$_FILES['f']['name'];
    if (move_uploaded_file($_FILES['f']['tmp_name'], $file)) {
      if($fp = fopen($file,"rb", 0)) {
        $picture = fread($fp,filesize($file));
        fclose($fp);
        // base64 encode the binary data, then break It
        // into chunks according to RFC 2045 semantics
        $base64 = base64_encode($picture);
        $tag = '<img src="data:image/jpg;base64,'.$base64.'" alt="" />';
        $css = 'url(data:image/jpg;base64,'.str_replace("\\n", "", $base64).'); ';
      }
    }
  }
?>
<html>
   <head>
      <title>Base64 img convert</title>
   </head>
   <body>
      <form action="./index.php" method="post" enctype="multipart/form-data">
        <input type="file" name="f">
        <input type="submit">
      </form>
      The CSS code:      
      <textarea style="width:800px;height:100px;font-size:10px;"><?php echo $css; ?></textarea>
      The HTML code:      
      <textarea style="width:800px;height:100px;font-size:10px;"><?php echo $tag; ?></textarea>
      <?php echo $tag; ?>
   </body>
</html>

Just browse your image and click "Submit Query".

P.S. base64 doesn't work in IE

If you enjoy this post, share it on Twitter, Facebook or LinkedIn.

With over two decades of deep front-end expertise, I offer comprehensive web consultancy and stack audits, alongside specialized workshops, training, and engaging public speaking to elevate your team's skills and optimize your digital presence. Contact me.