html-tags

How To Embed Images Directly Into Your HTML

When you code a web page, you’ll oftentimes want to include images. In almost every case you’ll throw down a line of code that looks something like this:

alternative text

But did you know that you can embed your image directly into the HTML without having to link to an external file? Yep, but first, why would you want to? In a word, portability. In certain cases, you may want to be able to pick up your page and simply relocate it without worrying about whether linked images are going to transfer correctly as well. How do we do this? Observe.

Let’s say you have an image that you want to include in your markup — when you link to it, the browser interprets it as encoded data in a format dictated by your tag. In theory, you can convert the image directly to encoded data and put it directly into the src parameter, right? Let’s find out.

A Blue Star is a tool for converting data, including images to Base64 encoding. It allows you to upload an image and then spits out the Base64 conversion for you. After uploading an image, you’re left with an image tag that has a stream of Base64 code instead of an image location.


beastie.png

Cute, right? It’s not exactly reader friendly, but look below to see how the browser interprets it — cool, that’s eight-bit me! And no linked image required!

beastie.png

If you’re interested in trying this on your own without a pre-made base64 conversion tool, pay special attention to data:image/png;base64, which precedes your converted string in the src of your image tag.

Whether you’re creating a Read Me or streamlining your file structure, embedding images directly into your HTML may be just the thing you need. This isn’t practical for day-to-day decide, but at least now you have the option.

  • MP

    Well done and thank you very much!

  • mic

    Great, very useful, i use it on my own website to see how it works: http://www.watchirobot2.com/ and it is cool!!!
    thank you

  • while

    Thanks! This is really sweet for local html docs.

  • Fin Lander

    Thanks for information and resource. This is also really cool for e-mail signatures, so the image does not have to be sourced.

  • Sohil

    this is not working,,when i want to send mail…image is not display at mail..plz help me

    • Norbert

      Embed images in E-Mails or as “file.mht” in “MIME-Format”-Code, f.ex.:

      The
      “MIME”-header has to have an “unique identifier”, here f.ex.:
      “—-10101″, and the first line has to begin with “MIME…”, following
      with the normal -code and at the end the referenced image in
      b64-code, ending with the identifier PLUS two slashes, like this: (look
      out for the b64-“MIME”-Code below, here perhaps malformed)…

      MIME-Version: 1.0
      Content-Type: multipart/related; boundary=”–10101″
      —-10101
      Content-Type: text/html; charset=”utf-8″
      Content-Transfer-Encoding: 8bit

      This is the image

      text…

      —-10101
      Content-Type: image/jpeg
      Content-Transfer-Encoding: base64
      Content-Location: smile.jpg

      /9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEP
      ERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4e
      Hh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAASABIDASIA
      AhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQA
      AAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3
      ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWm
      p6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEA
      AwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSEx
      BhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElK
      U1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3
      uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD2fxbr
      j67bHVrxpZ9Ekv4LOzsI5jHFNHLcJCJ5cf6zO7eFPyhdowGy1Z2no2lXusXHhJF0W40q7WAxRsfs
      t3+4il/exABcfvSuR8wxkMM1WtjqXhDVZdHkiuLs2ECWv2LzFQzW6M3k3MG9ghJDBZATyVwGBj2v
      U8T+J7zUIYrNdM1HTF86NmUyRvcXTBgUhiWF3zuIw2eoyoB3ZX8VxmKzJ5jKUpNTUnb3ttVZKPVb
      rbW9z6ijRhyJJe7/AF1PULD4r+CJrC3mvNahsrmSJWmtpFYtC5ALISFwSDkcelFeeQfs6WN9BHfa
      nrM1tfXCiW5hjiDrHKwy6ht3IBJGe9FfrEKuNcVeCv6ngSjQu7SZ6H8dLO0m+G2q3k1rBJc2kQe2
      meMF4WLKCyMeVOOMivPP2RoYr7TdU1O+iS6voJUSG5mUPLGrBtyq55AOBkA80UVwYj/ka0/Q6aX+
      5y9T3yiiivoTzT//2Q==

      —-10101–

    • Tony R.

      When you drag-and-drop an image into the body of the email, your email client will perform the conversion automatically at the time the message is sent. You shouldn’t even have to think about it.

      This is different from attaching the image to the message, although the attachment will also be converted from binary to text-encoding.

  • Norbert

    Another suggestion to embed images in html:

    // smile.jpg
    var ima =
    ‘/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAASABIDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD2fxbrj67bHVrxpZ9Ekv4LOzsI5jHFNHLcJCJ5cf6zO7eFPyhdowGy1Z2no2lXusXHhJF0W40q7WAxRsfst3+4il/exABcfvSuR8wxkMM1WtjqXhDVZdHkiuLs2ECWv2LzFQzW6M3k3MG9ghJDBZATyVwGBj2vU8T+J7zUIYrNdM1HTF86NmUyRvcXTBgUhiWF3zuIw2eoyoB3ZX8VxmKzJ5jKUpNTUnb3ttVZKPVbrbW9z6ijRhyJJe7/AF1PULD4r+CJrC3mvNahsrmSJWmtpFYtC5ALISFwSDkcelFeeQfs6WN9BHfanrM1tfXCiW5hjiDrHKwy6ht3IBJGe9FfrEKuNcVeCv6ngSjQu7SZ6H8dLO0m+G2q3k1rBJc2kQe2meMF4WLKCyMeVOOMivPP2RoYr7TdU1O+iS6voJUSG5mUPLGrBtyq55AOBkA80UVwYj/ka0/Q6aX+5y9T3yiiivoTzT//2Q==';

    var data = ”;
    document.getElementById(‘img01′).innerHTML = data;

  • Norbert

    Another suggestion to embed images in HTML:

    // smile.jpg in MIME / b64-Code
    // conversion f.ex. with “TotalCommander” and deleting all the inline-breaks 😉
    var image =
    ‘/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAASABIDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD2fxbrj67bHVrxpZ9Ekv4LOzsI5jHFNHLcJCJ5cf6zO7eFPyhdowGy1Z2no2lXusXHhJF0W40q7WAxRsfst3+4il/exABcfvSuR8wxkMM1WtjqXhDVZdHkiuLs2ECWv2LzFQzW6M3k3MG9ghJDBZATyVwGBj2vU8T+J7zUIYrNdM1HTF86NmUyRvcXTBgUhiWF3zuIw2eoyoB3ZX8VxmKzJ5jKUpNTUnb3ttVZKPVbrbW9z6ijRhyJJe7/AF1PULD4r+CJrC3mvNahsrmSJWmtpFYtC5ALISFwSDkcelFeeQfs6WN9BHfanrM1tfXCiW5hjiDrHKwy6ht3IBJGe9FfrEKuNcVeCv6ngSjQu7SZ6H8dLO0m+G2q3k1rBJc2kQe2meMF4WLKCyMeVOOMivPP2RoYr7TdU1O+iS6voJUSG5mUPLGrBtyq55AOBkA80UVwYj/ka0/Q6aX+5y9T3yiiivoTzT//2Q==';

    var data = ”;
    document.getElementById(‘img01′).innerHTML = data;

  • Isim Elek

    I use Base64 Image web tool to encode multiple image to base64 string.