Lesson 3.1: Lay It Out! – Images

In our last lesson we learned how to display the basic text we use for our sites. However, it is exceptionally dull. Our next step is to add some color and implement our layout.

There are several elements we will be covering in this lesson which help us lay out the basic structure of our website, namely images, divisions, spans, horizonal rules, and tables. Nearly any element goes into the layout because you style it and such, but these are the basics which we will use.

Images

Nearly every website on the web today has at least a few images. Images are an integral part of modern websites, but must be used with caution because they can easily be overused.

There are two primary ways to use an image: as an image or as a background.

You want to use an image as an image when… you want to use it as an image (wow, how redundant). Basically, I mean that you want to use it as an image when you don’t want to use it as a background, when the image is something contextual. For example, the header on this website is contextual, because it tells you the name of the site, it isn’t just there for decoration. Another use of a contextual image is if you were selling products, those product images would be contextual.

Images used for context use the <img> element. The image element doesn’t require a closing tag, so it is just one tag. We use attributes to set everything else up. The image element has four important attributes: image source, alternate text, height, and width.

The image source (the “src” attribute) specifies the source of the image, namely, the filename. You can specify filenames on websites in either absolute or relative terms. Absolute terms means that it has a complete URL, such as http://www.htmlblox.com/myimage.png. A relative link is based on the location of the image with the relative link, so something like images/myimage.png would possibly refer somewhere different for each new page. If you have a / at the beginning of a relative link, the / refers to the root, which is the website domain, so http://www.htmlblox.com in our case. In most cases, it is usually best to use a relative link for images.

The alternate text is something that is very important for a lot of people, especially those that are visually impaired and utilize screen readers (a technology which converts websites into text and reads them using a synthetic voice) or those using browsers or devices that can’t display the image. Basically, what it does is the alternate text is what is displayed if the image can’t be displayed for whatever reason. The text should briefly describe the image. If it is an image that has text, then using that text is usually sufficient, such is the case with the HTML Blox logo which simply has an alternative text of “HTML Blox”. If it is an image, try to describe the image in a short sentence.

The height and width of the image are the height and width that the image is displayed at. While we will eventually control the image height and width with CSS if it needs altering (which it shouldn’t… we’ll cover that in a future design lesson), setting it in the image element itself will make it so some browsers will automatically allow for that space when the page is loading, even before your image is actually loaded, preventing a rather large and unsightly shift in your layout as it loads.

So, to use the image element, we simply place it where ever we want in our code, and then specify these properties. Here is an example:

<img src="/images/logo.png" alt="HTML Blox" height="100" width="250">

Remember, if you are using XHTML, you would place a / right before the > to close the tag.

The other way to use an image is as a background. A quick-and-easy rule of thumb you can use for determining whether it is contextual or background is ask yourself what the alternate text would be. If you can’t think of a good text, then it’s pretty certain that it should be used as a background.

To use an image as a background, you would use CSS and use the background element. We’ll cover this shortly in another lesson. Essentially though, you would make a division element, or some other element, and then set the background of that element with the image that you want to use. The background at the top of these pages, as well as the menu bar’s background and the rounded corner, all make use of this technique.

Related Extra Credit

Though we’ll cover the why and how in-depth in a future design lesson, I just wanted to expand a bit on why you should never have to adjust the size of an image with CSS or the height/width attributes.

Images, as do all other files on a computer, take up disk space. When someone goes to view a website, all files on a website, including images, must be transferred to that computer. The larger are more numerous the files are, the longer it takes to load. This is why it is important to minimize the number and size of images you use.

If you have to adjust an images size, it is either one of two things: too small or too big.

If it is too small and you try to make it larger, you get a very pixelated and amateur looking image because each of the pixels in the image are just made larger. This results in ugly images.

If your image is too big and you want to make it smaller on your website, you are making the image take up more disk space than is require, and thus making it take that much longer for your pages to load. Not only that, but you often have a limited amount of transfers that your web host lets you transfer, so it ends up costing you more as well. If you want to take an image that is too big and make it the right size, open it in Photoshop or GIMP and use the crop tool to shrink it down to size. We’ll cover how to do this in a future design lesson.