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

by Christopher Heng, thesitewizard.com

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

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.

  1. Additional Work and Maintenance Chore

    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.

  2. The Effective Image File Size Increases

    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.

  3. Your Bandwidth Increases

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

  4. Compatibility

    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.

  5. File Size Limits

    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.

Steps to Embedding Your Image

  1. Convert Your Image to Its Text Equivalent

    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.

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

      cd desktop

      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 -encode mypicture.png mypicture.txt

      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.

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

      base64 -i mypicture.png -o mypicture.txt

      On Linux and BSD systems, it is:

      base64 mypicture.png > mypicture.txt

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

  2. 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 "<img src="mypicture.png">", start by typing the following instead:

    <img src="data:image/png;base64,

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

    Demo image using Data URL

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

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

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





Home
Donate
Contact
Link to Us
No Spam Policy
Privacy Policy
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.