I was asked by a visitor if it was possible to embed an image into an HTML file, so that the picture was inline and part of the page itself, and not a separate file that had to be downloaded (or in his particular case, distributed). He wanted his page to be self-contained, so that he could distribute it as a single file instead of multiple files with the HTML page separate from the pictures displayed on it.
This facility is available in all modern browsers, and is known as a data URL.
You will need to know some HTML and CSS (although you don't need to be an expert or anything like that), otherwise you will find this article incomprehensible.
If you are reading this page because you only want to insert an image into your web page, and not do the more esoteric task of making the page self-contained, you should follow the standard method used by everyone, including thesitewizard.com. For example, if you have a picture with the filename of "mypicture.png", place it in the same directory as your web page, and insert the following HTML code into that page:
Yes, it's that simple, although you may also want to add a description of the picture in the "alt" text for accessibility and search engine reasons. The method described below is not for normal situations, and comes with its own disadvantages. If you don't have any special requirements, and have no idea which method to use, stick with the simpler code given in this section instead. It is what nearly all of the websites on the Internet do, and it is really the best method to use in normal circumstances.
In addition, if you're not sure how to insert the image code given in this section, you probably should just use a visual web editor to do the job. I have separate tutorials showing how to do this, describing every step in great detail, for Expression Web (a free web editor from Microsoft), BlueGriffon (an open source web editor), and many others.
Embedding a picture into a self-contained web page does not prevent people from copying your images. The usual way of saving an image from a web page still works: for example, they can right click it and save it from the pop-up menu, or drag and drop the image from the page to their desktop. They can even view the source code of the page, copy the image code, save it as a separate file and convert it back into a normal picture. And so on. In other words, this is not a method designed to guard your pictures, over and above the usual copyright protection.
It's just a different way of inserting pictures into a web page, with its own advantages and disadvantages.
It's useful for HTML email messages, since you can embed pictures into the message so that they show up when your recipients view it. You will then not need to have a web server somewhere to host the picture, since everything is self-contained. The message will also display properly even if your visitors have set their email program or web email service not to display images hosted externally.
If you are distributing a document in HTML format to someone (eg on a USB drive, or together with your computer program as its documentation), it may be handy to have everything in a single file. That way, you will avoid problems with your recipients/users not copying all the files needed for the document to be displayed properly (and then complaining that your page is broken).
I'm sure that there are other reasons people embed pictures as well.
Before you rush out to embed every single picture because you think it is such a novel thing to do, consider this.
It adds extra steps that you need for each picture you embed. And if you make changes to your image, you will have to go through all the steps again. Contrast this with the normal method, where it's just a matter of replacing the existing file with the new one.
The textual equivalent of your image takes up more space than the original one. That is because every byte in the original picture is now represented by the more limited character set of small and capital letters, numbers and the "/" and "+" characters.
An analogy may be helpful here: it's as though previously you had a vocabulary of (say) 30,000 words to describe a particular object. So you could use the most apt word to say what you needed to say (eg, "that is a green frog"). But if you are restricted to a rudimentary vocabulary of (say) 100 words, the same description will have to be very much longer, because you will need a whole paragraph to replace the precise terms you previously used (eg, the words "green" and "frog" are no longer in your vocabulary, so you even have to explain the colour and describe the animal in simpler terms).
Note that this is just an analogy. The real situation is actually not as dire as a reduction of English vocabulary, since the bytes used for an image have a limited range that can be more easily expressed with alternatives than genuine human language, which must encompass everything. But the basic notion that you're expressing something with a more limited "language", and therefore need to say more to accomplish the same result, stands.
It adds to the bandwidth used by your web pages. Firstly, as mentioned earlier, your images will take up slightly more space when converted. Secondly, web browsers cannot cache the embedded images to reduce the amount they download each time. So if your image is shared by other pages on your site, the entire image has to be re-downloaded with each page every time, since it is part of the page itself.
This adds to your site's data traffic usage and the bandwidth used by your visitors (which may be a concern if they are using a mobile phone on a metered data plan).
Old browsers (eg, Internet Explorer) do not support data URLs in HTML files. It is supported, however, in the current versions of Microsoft Edge, Firefox, Chrome, Safari and the Android browser.
In general, for maximum compatibility, you should only embed small pictures. There are no requirements in the standards specifying the size a web browser should support, so browsers vary in what they can handle. For example, Microsoft Edge limits the size of the embedded data to 4 GB.
But even if there are no file size constraints, this HTML facility was not really meant to be used for large images.
Before you can embed the image, you will have to get the text equivalent of the image. How this is done depends on the operating system you're using.
If you use Windows, open a command prompt. You can do this in Windows 7 by clicking the Start menu, typing "command prompt", and clicking the "Command Prompt" line that appears. It should probably also work the same way in later versions of Windows.
You will be deposited at a line that says something like "C:\Users\christopherheng>". Don't worry if it doesn't say exactly that; the name that appears after "Users" depends on your Windows account name.
Now navigate to the folder containing your image. For example, if you placed your picture or photo on your desktop, type the following command and hit the ENTER key when you are done.
To convert the file, we will use a built-in command line program called "certutil" that comes with Windows. I'm not sure which is the earliest version of Windows that has this, but my Windows 7 machine has it preinstalled, so I suppose it should be available on Windows 8, 8.1, 10 and later too.
Let's say that your file is called "mypicture.png". Type the following line into the command prompt, followed by the ENTER key.
Certutil will proceed to create a file called "mypicture.txt" containing the text equivalent of your image.
This text representation of your picture is in something known as the Base64 encoding, which is used for a wide variety
of things on the Internet, such as email.
There are numerous commands available on Unix-type systems to convert the image to its textual form, including "openssl", "uuencode", "perl", "base64" and probably more. I will only describe the procedure for using "base64".
If you use Mac OS X, and your image is called "mypicture.png", the command line is:
On Linux and BSD systems, it is:
Mac users will need to run the Terminal application to be able to type that command. I'm sorry, but I don't have a Mac, so I can't tell you how to do that. Linux users should just open up a shell or terminal window (but if you are a Linux user, you probably don't need me to tell you that).
You will also need to change to the directory where the picture is saved, before invoking base64. The command
to do this is "cd [path]", where "cd" means "change directory" and "[path]" stands for the full path,
that is, the directory name starting from the topmost "/" directory. For example, if your picture is saved as
"/home/chris/images/mypicture.png", type "cd /home/chris/images" to go to that directory.
The base64 command line given earlier creates a text file called mypicture.txt containing a
representation of your image in something known as Base64 encoding. The latter is widely used on the Internet
for a number of things, including email.
Whichever system you're using, at the end of this step, you will have a file called "mypicture.txt".
Open your web page in an editor. If you use a visual web editor (eg, Expression Web or BlueGriffon), switch it into its Code or Source mode.
In the place where you will normally insert "<img src="mypicture.png">", start by typing the
following instead:
Notice that the last character on that line is a comma. Do not omit that.
Open mypicture.txt in a plain
text editor. For example, if you use Windows, doubleclick the file and it will probably open up in Notepad (unless
you have associated another editor with the ".txt" extension).
You will notice that the file contains numerous lines with letters, numbers, and the occasional "/" and "+". If you used the Windows "certutil" program, you will also see a line that says "-----BEGIN CERTIFICATE-----" and one that says "-----END CERTIFICATE-----". Ignore these two lines. That is, do not copy them. They are not part of the image. Certutil includes them because it is primarily a program written to deal with SSL/TLS certificates, the stuff your site uses when it is accessed with HTTPS instead of HTTP. We're merely using its base64 generation capability to convert images so that we don't have to download and install an extra program.
Copy each line from the file and append it to the end of the img line. Do not leave any space or
create new lines. Although the Base64 encoded text in mypicture.txt are separated into many lines,
join all of them into a single continuous line with no embedded spaces.
You can see an example of this by viewing the source code for this page for the picture below. For example, in Firefox, type Ctrl+U (ie, hold down the Ctrl key while typing "u") to open a tab containing the HTML source. Scroll down to (or search for) the image tag below this paragraph. And yes. It's a very long line. And that is despite the original image being only 885 bytes long (the encoded version is 1,181 bytes, a 33% increase in size).
If your image is in the JPEG format (with a ".jpg or ".jpeg" file extension), use
"image/jpeg" instead of "image/png". Likewise, if it is a GIF picture (with a ".gif"
extension), use "image/gif". This string is technically known as the MIME type, and it tells the browser
the type of data that follows.
Note: if you are using a plain text editor that wraps lines automatically, disable that function. Otherwise it may reformat it into multiple lines, possibly breaking your code.
After appending the data, end the "<img src=" line with
That is, put a quotation mark to match the earlier one in the src attribute, then
close the img tag. I know this is obvious, but I'm mentioning it in case you forget to do it
after the long and arduous task of pasting the lengthy Base64 encoded line.
That's it. When you view the page in a browser, it should show the image in the usual way.
Copyright © 2018-2020 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Embed an Image to Get a Self-Contained Web Page
