Images!

Because a picture tells 1000 words.

Introduction

Images can add a lot to your page. They can make it look more appealing but they can also convey information much better than words in many circumstances. Including images is not too difficult but there are a few little tricks to doing it well. In this section we'll look at both.

If you just want to learn about the img tag feel free to read just the first bit but if you want to discover more then I encourage you to keep on reading.

Displaying an Image

An image is displayed using an img tag. It stands for image. Within the tag there are several attributes we may include but there are two which are fairly important.

<img src="URL" alt="image description" >

The src attribute stands for source. It is the location of the image which is to be included. It is a standard URL and similar to links may be absolute or relative. See the bit on Location Types in the previous section to find out more.

The alt attribute stands for Alternate Text and is a simple description of what the image is. Normally you won't see the description but it has it's uses.

  • Screen readers (as used by people with vision impairment for example) will read the alt text as opposed to displaying the image.
  • If there is an error loading the image for some reason then the alt text will be displayed instead.
  • Search engines will use the alt text to help index images. Writing useful alt text can help give you a boost (if somewhat minor) in their rankings.

simple_image.html

  1. <body>
  2. <p>Below is an image of a skateboard</p>
  3. <img src="./img/skateboard.png" alt="A green skateboard" >
  4. </body>
Simple Image

Below is an image of a skateboard

A green skateboard

You may be wondering why we don't use the title attribute for the description of the image. We can add the title attribute and it will display on hover but the title is generally used to add ancilliary information as opposed to a description. For this reason we have the alt attribute which is specifically for adding a description.

Image Display Size

By default, images will display at their actual size. We may include two attributes, width and height to modify it's dimensions.

scaled_image.html

  1. <body>
  2. <p>Below is an image of a rabbit at different sizes.</p>
  3. <img src="./img/rabbit.png" alt="A rabbit" >
  4. <img src="./img/rabbit.png" alt="A small rabbit" width="30px" height="30px" >
  5. <img src="./img/rabbit.png" alt="A large rabbit" width="60px" height="60px" >
  6. <img src="./img/rabbit.png" alt="A distorted rabbit" width="60px" height="30px" >
  7. </body>
Scaled Images

Below is an image of a rabbit at different sizes.

A rabbit A small rabbit A large rabbit A distorted rabbit

It's possible to modify the dimensions of the image using CSS too but we'll cover that in another tutorial.

Modifying the image dimenensions will not modify the actual file. It will only scale it on the page. A common mistake is to take images direct from a digital camera and put them up on a website using the width and height attributes to make them the desired size. The problem with this is that the original image is several megapixels large and several MB's in size. This can lead to the image being slow to download and display.

If you just include one of these attributes then it will scale the other one accordingly.

Using Images

In the examples above we included images on their own outside of elements. Often we wish to place the images at specific points within our content however. You may include your image anywhere in your content, even within links and headings.

images_in_content.html

  1. <body>
  2. <h1><img src="./img/soccerball.png" alt="Ball" >Soccer is a great sport</h1>
  3. <p>But you shouldn't play it in flip flops. <img src="./img/thongs.png" alt="flip flops" >
  4. It can hurt.</p>
  5. <p>But after you can eat all you like <a href="http://greatcupcakes.com" >
  6. <img src="./img/cupcake.png" alt="Cupcake" ></a>.</p>
  7. </body>
Images in Content

BallSoccer is a great sport

But you shouldn't play it in flip flops. flip flops It can hurt.

But after you can eat all you like Cupcake.

It is possible to control the placement of images to a much greater degree using CSS but that will be covered in another tutorial.

File Types

There are a few different file types which may be used for images. Using the right one can result in a higher quality image and a smaller file size. Below are the main file types used in web pages.

  • .jpg - (sometimes .jpeg) Stands for Joint Photographic Experts Group. This type is ideal for photos and realistic images.
  • .png - Stands for Portable Network Graphics. This type is ideal for images which have a lot of solid colours (eg, charts, comics, clip art, etc). It also supports transparency within images which .jpg does not.
  • .gif - Stands for Graphical Interchange Format. Is similar to .png. Was not popular for a while due to patent issues but those have been resolved now. .png is still generally preferred to .gif however as it is newer and slightly improved. Some people believe that .gif is slightly faster to render than .png but on todays faster hardware this is not really an issue.

Below is an image with different levels of compression and file type to illustrate the difference.

Park at 100% quality

File Type: jpg
Quality Level: 100%
File Size: 268 KiB

Park at 70% quality

File Type: jpg
Quality Level: 70%
File Size: 53 KiB

Park at 40% quality

File Type: jpg
Quality Level: 40%
File Size: 33 KiB

Park at 40% quality

File Type: png
Quality Level: 40%
File Size: 339 KiB

The difference in quality between the jpg at 100% quality and 70% quality is negligible but the difference in file size is quite dramatic. You'll also notice that the png at 40% has reasonable image quality but is 130 KiB larger than jpg at 100%.

Now let's have a look at an image which is better suited to png.

Hat at 100% quality

File Type: png
Quality Level: 100%
File Size: 17 KiB

Hat at 100% quality

File Type: jpg
Quality Level: 100%
File Size: 23 KiB

The difference isn't as noticeable this time but if you look at the file sizes you'll notice it is about 25% more compact when using png.

Tips

Here are a few tips for effectively using images on your web pages.

File Size

Keep the file size as small as possible. This will make your pages load faster which will keep your users happy and also potentially give you benefits with search engines. To achieve this,

  • Make sure you pick the appropriate file type. If the image is photographic, use .jpg, solid colours, use .png.
  • Reduce the image dimensions to be that at which the image will be displayed. If the image is to be displayed on the page at 200px x 500px make sure the actual image isn't 400px x 1000px.
  • Apply the right level of compression and optimise your images. You can often achieve quite a reduction in file size without any noticeable loss in image quality.

There are many good image file optimising tools which can automate the optimising task for you.

Position and Size

Think about where you place images in your content. The overall page will look neater if imgaes are placed consistently.

The size and dimensions of images is important also. The Golden Ratio can lead to images with dimensions which are more pleasing.

Colours and appropriateness

Are the colours in the image too bright? or too jarring?

Does the inclusion of the image add value? Often times, the right images can add a lot of value. A diagram or a graph for instance can convey an idea very clearly. Other times the images may be just eye candy and distract from the valueable content.

Summary

<img src="URL" alt="description" >
Display an image.
width="20px" height="30px"
Specify the dimensions of the image.
File Type and Size
We should select the correct file type and make sure the image is sized appropriately to ensure the smallest file size possible.

Activities

Now let's add some graphical flair to our content.

  • Add some images to your page. Add an image in a heading, a paragraph and within a link.
  • Experiment with changing the dimensions of an image.
  • Grab a picture and experiment with different file types and compression levels. See how much of a difference in file size and quality you can achieve. A good program for doing this is the GNU Image Manipulation Program (free)

As we work through this tutorial, each section will add new tags allowing you to do more interesting things. My suggestion would be that you pick a topic or subject of interest to you and create a page about that. As you work through each section, add to and improve the page with the new tags you have learnt.