Html image embedded in text

How to Embed an Image to Get a Self-Contained Web Page

How to insert a picture into an HTML page so that it is not a separate file

How to Embed an Image to Get a Self-Contained Web Page

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.

Some Preliminaries

• 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:

Possible Reasons for Embedding a Picture

1. 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.
2. 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.

Disadvantages of Embedding Pictures

Before you rush out to embed every single picture because you think it is such a novel thing to do, consider this.

Additional Work and Maintenance Chore

The Effective Image File Size Increases

Your Bandwidth Increases

Compatibility

File Size Limits

Steps to Embedding Your Image

Convert Your Image to Its Text Equivalent

Windows users

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.

Mac OS X, Linux and BSD users

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:

Whichever system you’re using, at the end of this step, you will have a file called » mypicture.txt «.

Insert the HTML into Your Web Page

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 » «, start by typing the following instead:

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 »