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:

[code lang=”html”]
<img src="location/of/image.png" alt="alternative text" />
[/code]

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 <img> 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.

[code lang=”html”]

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAAD
NCAMAAAAsYgRbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5c
cllPAAAABJQTFRF3NSmzMewPxIG//ncJEJsldTou1jHgAAAARBJREFUeNrs2EEK
gCAQBVDLuv+V20dENbMY831wKz4Y/VHb/5RGQ0NDQ0NDQ0NDQ0NDQ0NDQ
0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0PzMWtyaGhoaGhoaGhoaGhoaGhoxtb0QGho
aGhoaGhoaGhoaGhoaMbRLEvv50VTQ9OTQ5OpyZ01GpM2g0bfmDQaL7S+ofFC6x
v3ZpxJiywakzbvd9r3RWPS9I2+MWk0+kbf0Hih9Y17U0nTHibrDDQ0NDQ0NDQ0
NDQ0NDQ0NTXbRSL/AK72o6GhoaGhoRlL8951vwsNDQ0NDQ1NDc0WyHtDTEhD
Q0NDQ0NTS5MdGhoaGhoaGhoaGhoaGhoaGhoaGhoaGposzSHAAErMwwQ2HwRQ
AAAAAElFTkSuQmCC" alt="beastie.png" />
[/code]

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.


Posted

in

, ,

by

Tags:

Comments

18 responses to “How To Embed Images Directly Into Your HTML”

  1. MP Avatar
    MP

    Well done and thank you very much!

  2. mic Avatar
    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

  3. while Avatar
    while

    Thanks! This is really sweet for local html docs.

  4. Fin Lander Avatar
    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.

  5. Sohil Avatar
    Sohil

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

    1. Norbert Avatar
      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–

    2. Tony R. Avatar
      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.

  6. Norbert Avatar
    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;

  7. Norbert Avatar
    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;

  8. Isim Elek Avatar
    Isim Elek

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

  9. Volvera Avatar
    Volvera

    Thank you so much for this!

  10. neel logan Avatar
    neel logan

    amazing article post thank you

  11. Anuj Shah Avatar
    Anuj Shah

    http://lcamtuf.coredump.cx/squirrel/ any guesses? how does this worked?

  12. mheanhadid Avatar
    mheanhadid

    Useful commentary . my colleague several days ago was told about http://goo.gl/1zEkp0 to modify pdf . It’s really convenient to learn and it’s inexpensive.

  13. vanshi Avatar
    vanshi

    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.
    http://www.emailnumbers360.com/gmail-customer-support.html

  14. Shawn Avatar

    Nice, can you embed other things like html snippets?

  15. dlhoangkim Avatar
    dlhoangkim

    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!
    bao hanh may nuoc nong ariston tai tphcm

Leave a Reply