Practical Ecommerce

Encoding Images Using HTML

Overview

One of the most basic HTML elements is the image tag, which is used to tell a browser to display an image on a webpage. While it is a simple tag to learn, the image tag has quite a few attributes that are important to be aware of. For example, using these attributes we can tell the browser to put a border around an image, align the image to the left of the page, and even hide the image if there is an error loading it from the server. Since many shopping carts provide store owners the ability to add custom HTML to their pages in order to provide a more unique and customized experience, the knowledge to effectively control the way an image appears on your website is important.

In this tutorial we will begin by taking a look at the image tag itself. We will look at how to place an image into an HTML page. We will look at the required attributes to get an image placed, as well as attributes to declare the size that the image is displayed. Making certain that the image resources are available online is also important. As an inline element, by default images will not appear on their own line in a document. This means that if we place an image tag at the beginning of some text, the image will be placed with the bottom of the image in line with the text, which looks a little awkward in most cases. By manipulating a simple attribute we can align the image to one side of the text, and have the browser flow the text around the image. By aligning the image to our liking we can improve the way that our webpage looks, and the way our information is presented.

Other attributes that we will look at allow you to put a border around and image. These attributes let you tell the browser what color and thickness of a border, if any, to draw around the image that is placed on a webpage. A border will be the same height and width that we gave our image, which can present a problem if there is an error when our image is downloading. Let’s say that for some reason the image we wanted to display is not available. Our border will still be drawn in many browsers, in addition to the white space where our image should have been. Some browsers will even place a broken image icon to inform you that there was an error. Ideally we would never have this problem, but it happens, and rather than look unprofessional as though we lost our image, we want to tell our image to disappear if there is an error.

By using an example of how to place JavaScript into an image tag, we will place a script that will change the display settings on our image in the event that there is an error loading the image. To the user this will mean that there will not be any borders, white spaces, or alignment issues due to a broken image. To the administrator, it gives the piece of mind that if there is an error of some kind, the use experience will adjust seamlessly.

Instruction

The first thing that we want to do when placing an image into an HTML page is insert an tag. This tag tells a browser to display an image on the screen. However, there are important considerations when displaying an image. The first of which is where the browser will get the image from in order to display it. To show an image on a web page, it must be available for download, usually on the same server as the web page. We use the “src” attribute of the <img> tag to tell the browser where to look for the image. Take a look at the following piece of HTML code, which is in the section of the web page:

<code>&lt;img src=”images/sample.jpg”&gt;
</code>

This piece of code tells the browser to look for an image called “sample.jpg” inside a folder called “images” that is in the same folder as the web page that this code appears in. This is called relative addressing, and it means that the location of the image is given relative to the location of the web page. Another way to code the location of an image is called absolute addressing. Take a look at the same piece of code using absolute addressing:

<code>&lt;img src=http://www.yoursite.com/images/sample.jpg&gt;
</code>

When using absolute addressing, you give the location of the image on the Internet. Both pieces of code will show the same image. However, it is important to understand the differences. If you move a page that has relative addressing, you may have to change all the image references to adjust. In both cases, it is important to know where your images are located so that you can make sure to upload them to the correct location. If they are not in the right place, they will not display correctly in a browser.

Another required attribute for the image tag is the “alt” attribute. This tells the browser what the image means, and what text to display if the image cannot be displayed. These are important because search engines will read the “alt” attributes of your image tags, so make sure to include them. Here is our code with our “alt” attribute defined.

<code>&lt;img src=”images/sample.jpg” alt=”My Sample Image”&gt;
</code>

Now that we have placed our image, let’s look at some of the other attributes that are available. The first attributes that we will look at control the height and width of the image. Keep in mind that this is the browser controlling these attributes, so the image will distort if you change the aspect ratio (the height to width ratio) of an image. Take a look at our code with the height and width attributes added:

<code>&lt;img src=”images/sample.jpg” height=”100” width=”75” alt=”My Sample Image”&gt;
</code>

These are pretty easy to figure out, and the best way to understand how this code interacts with your images is to experiment with different values. One important thing to note is that it is best to scale images down, not up. For example, you might want to show a large image at half the size, which will look fine. But if you tried to show a small image at twice the size, the image will become pixilated and distorted.

Now, if we were to place the above piece of code at the beginning of a block of text, you will notice that the text aligns itself at the bottom of the image, which is not very attractive. This is because images are inline elements, which means that they will not force a line break when placed on a web page. We can fix this by using the “align” attribute of the <img> tag. For example, let’s say that we want the image to appear on the right side, with our text flowing around it. The following code will do that:

<code>&lt;img src=”images/sample.jpg” height=”100” width=”75” align=”right” alt=”My Sample Image”&gt;
</code>

By adding the “align” attribute, and setting it to “right”, we tell the browser to flow the text around the image and show it on the right. Other options for the “align” attribute are “left” and “center”.

Finally, we can use attributes to add a border to our images. The following code will add a black border around the image that we have placed in our text:

<code>&lt;img src=”images/sample.jpg” height=”100” width=”75” align=”right” border=”1” alt=”My Sample Image”&gt;
</code>

The “1” value for the border attributes tells the browser that we want our border to be 1 pixel thick. Experiment with this value to create thicker borders. Another option for the border attribute is “0”, which will tell a browser not to draw a border at all. However, you can achieve the same result by simply omitting the border attribute altogether.

So what happens if there is an error loading an image? Let’s say that for some reason our image was not uploaded to the correct location. Most browsers will show either a broken image icon or a white space where the image should be. If we used the code above to place our image on a web page, we would also see the border shown at the size declared in our tag. This is not good since it is awkward for users, and also highlights the fact that our image didn’t load.

There is a way to hide an image if it does not load correctly using JavaScript. While this means that it will only work in more recent browsers, it is better than nothing. Our simple script will set the “display” style of an image to “none” if there is an error loading it. Look at the following script:

<code>onerror="style.display='none';”
</code>

This piece of code says that when there is an error, which will trigger a JavaScript event called “onerror”, set the display style of our image to “none”. This will make a browser completely ignore the image, so that it will not display a border, it will not create a white space where the image should be, and most importantly there will be no broken image icon. Below is how we add this script to our image:

<code>&lt;img src=”images/sample.jpg” height=”100” width=”75” align=”right” border=”1” alt=”My Sample Image” onerror="style.display='none';”&gt;
</code>

And with that, we have placed an image on our web page. Since many shopping cart software packages allow storeowners to add custom HTML code to their pages, take the time to master the image tag attributes discussed here. You are now on your way to creating complex and engaging content on your website, without the need for a professional web designer. Have fun.

Brian Getting

Brian Getting

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

Comments ( 5 )

  1. Legacy User March 14, 2007 Reply

    This information would have been invaluable however, none of your sample html codes appeared in your page thus making it difficult to understand.

    Thank You

    — *Jessica Taleff*

  2. Legacy User March 14, 2007 Reply

    Noted and fixed. Thanks for pointing that out, Jessica. It should read better now.

    — *Brian Getting*

  3. Legacy User April 8, 2007 Reply

    In WordPress, the border doesnt work in the Rich Text Eitor, simply specifying border = x, doesnt produce any border at all…anyway the RTE in WordPress is really screwy

    — *Jeff*

  4. Legacy User October 10, 2007 Reply

    I used the boder="1" attribute however my border still doesn't show when I load the page. Any idea why?

    — *Neelu*

  5. Legacy User January 21, 2008 Reply

    My web page just don't show up the image..I typed the URL of my picture and it just doesn't work

    — *Jose*