• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

You can get support and mentoring from a private teacher via videoconference on this course.

Got it!

Last updated on 11/12/18

Images

Log in or subscribe for free to enjoy all this course has to offer!

Inserting an image into a web page? You'll see, it's surprisingly easy... Well, almost. Several different image formats can be used in websites and they should not be chosen at random. Indeed, images are sometimes large to download, which slows down the page loading time (much more so than the text!).

So to make sure that your pages remain readable and quick to download, follow my advice actively!

Image formats

Do you know what an image format is?

When you have "access" to an image, you can save it in several different "formats". The image size (in KB or even MB) will vary according to the selected format and the image quality will change.

For example, the Paint drawing program (even though it is far from being the best one) lets you to choose between different formats when you save an image (next figure).

Image formats provided by Paint
Image formats provided by Paint

Some formats are more suitable than others according to the image (photo, drawing, motion picture, etc.). Our aim here is to review the formats used on the Web to give you an idea of them so you know how to choose the one best suited to your image. Don't worry, there aren't many different formats so it won't take very long.

All the images posted on the Internet have a common point: they are compressed. This means that the computer does calculations to make them bulky and thus faster to load.

JPEG

Images in JPEG (Joint Photographic Expert Group) format are very common on the Web. This format is designed to reduce the storage size of photos (in other words, the size of the associated file), which can contain more than 16 million different colours. The figure below is a picture saved in JPEG format.

A mountain photo in JPEG
A mountain photo in JPEG

JPEG images are saved with the extension.jpgor.jpeg.

Note that the JPEG format reduces the image quality slightly, in a way which is generally imperceptible. This is what makes it so effective in reducing the storage size of photos.
When it comes to a photo, you usually can't detect the loss in quality. If it is not a photo, however, the image may appear to be slightly "blurry". In this case, it's better to use PNG format.

PNG

PNG (Portable Network Graphics) is the newest format of all. This format is suitable for most graphics (I'm tempted to say "everything that's not a photo"). PNG has two big advantages: it can be made transparent and does not affect the image quality.

PNG was invented to compete with another format, GIF, at a time when you had to pay royalties for the use of GIF. Since then, PNG has changed significantly and has become the most powerful format for saving most images.

PNG is available in two versions, depending on the number of colors to be included in the image:

  • 8-bit PNG: 256 colors;

  • 24-bit PNG: 16 million colors (as many as a JPEG image).

The next figure is a 24-bit PNG image, representing our famous mascot Zozor.

Zozor in PNG format
Zozor in PNG format

In fact, if 24-bit PNG can display as many colors as a JPEG image, and can also be made more transparent without affecting the quality of the image... what's the point of JPEG?

The compression of photos is more powerful with JPEG. A photo saved in JPEG will always load much faster than if it was saved in PNG. I thus advise you to always keep the JPEG format for photos.

GIF

Although this format is quite old, it has been widely used (and is still widely used out of habit). PNG is now much better than GIF overall: images generally have a much smaller storage size and their transparency is of better quality. I would thus recommend you use PNG as much as possible.

GIF is limited to 256 colors (while PNG can go up to several million colors).

GIF does, however, have one advantage that PNG does not have: it can be animated (see next figure).

An animated GIF image
An animated GIF image

There is a suitable format for each image

To sum up, the format to be adopted according to the image you have is indicated below:

  • A photo: use a JPEG.

  • Any graphic with not many colors (fewer than 256): use an 8-bit PNG or possibly a GIF.

  • Any graphic with lots of colors: use a 24-bit PNG format.

  • A animated image: use an animated GIF.

Mistakes to be avoided

Banish other formats

Other formats not listed here, such as the BITMAP format (*.bmp) should be banned as they are often not compressed, and so too big. They are not at all suitable for the Web. Although you can include them in your website, they will take an extremely long time to load!

Choose the name of your image well

If you want to avoid problems, get into the habit of saving your files with lower case names, and without spaces or accents, for example:my_image.png.

You can replace spaces by the underscore character ("_") as I have done here.

Inserting an image

Let's now go back to HTML code to find out how to place images in our web pages!

Inserting an image

What is the famous tag that we use to insert an image? It is…<img />!

It's an orphan type tag (such as<br />). This means that you don't need to enter two tags as in the case of most other tags that we have seen so far. Indeed, we don't need to define a portion of text; we just want to place an image at a specific point.

The tag must be accompanied by two mandatory attributes:

  • src: which indicates the location at which you want to insert the image. You can either include an absolute path (e.g.http://www.website.com/flower.png) or a relative path (which is what is usually done). So if your image is in animagessubfolder, you have to enter:src="images/flower.png"

  • alt: which means "alternative text." An alternative text to the image, in other words, a short text describing what is the image contains, must always be indicated. This text will be displayed in place of the image if the latter cannot be downloaded (this does happen), or in the browsers of disabled (blind) people who unfortunately cannot "see" the image. It also helps search engine robots to search for images. For the flower, for example the following would be included:alt="A flower"..

Images must necessarily be located within a paragraph (<p></p>). Here's an example of an inserted image:

<p>
    Here's is a photo I took during my last holiday in the mountains:<br />
    <img src="images/mountain.jpg" alt="Mountain picture" />
</p>

In short, it is very easy to insert an image as long as you can indicate where it is located, as we learned to do with links.
The biggest "difficulty" (if you can call it a difficulty) is to select the right image format. In this case, it's a photo so obviously the JPEG format is used.

Adding a tooltip

The attribute used to display a tooltip is the same as the one for links: namely,title. This attribute is optional (unlikealt).

Here's an example:

<p>
Here's is a photo I took during my last holiday in the mountains:<br />
<img src="images/moutain.jpg" alt="Moutain picture" title="I like snow!" />
</p>

Hover the mouse pointer over the photo to see the tooltip appear.

Clickable thumbnail

If your image is very large, it is advisable to display its thumbnail on your website. Then add a link to the thumbnail to allow your visitors to view the image in its original size.

There are millions of programs for creating thumbnails of images. I personally use Easy Thumbnails. I'll thus have two versions of my photo, as shown the next figure): the thumbnail and the original image.

A thumbnail and the original image
A thumbnail and the original image

I put them both in a folder called, for example,img. I display the versionmountain_small.jpgon my page and I make a link tomountain.jpgso that the enlarged image is displayed when you click on the thumbnail.

Here's the HTML code that I use for this:

<p>
Do you want to see the image in its original size? Click on it!<br />
<a href="img/moutain.jpg"><img src="img/moutain_small.jpg" alt="Moutain picture" title="Click to enlarge" /></a>
</p>

Figures

In reading this book, you have already come across several examples of figures. These are items that enhance the text to supplement the information on the page.

Figures can be of several different types:

  • images;

  • source code;

  • quotations;

  • ...

In short, anything that illustrates the text is a figure. Although we're using images in this case, figures are not, contrary to what one might think, necessarily images: a source code also illustrates the text.

Creating a figure

Let's, for example, take the case again of the screenshot we saw in the first chapter, as shown in the next figure.

The Notepad software
The Notepad software

In HTML5, the tag used is<figure>. Here's how you might use it:

<figure>
<img src="images/notepad.png" alt="Notepad" />
</figure>

A figure is most often accompanied by a caption. To add a caption, use the<figcaption>tag inside the<figure>tag, like this:

<figure>
<img src="images/notepad.png" alt="Notepad" />
<figcaption>The Notepad software</figcaption>
</figure>

Properly understanding the purpose of figures

A bit earlier on in this chapter, I told you that the images had to be located in paragraphs (placed inside a tag<p></p>). This is not quite true.

If you make a figure of your image, the image can be located outside a paragraph.

<p>Do you know the Notepad software? You can make websites with it!</p>

<figure>
<img src="images/notepad.png" alt="Notepad" />
<figcaption>The Notepad software</figcaption>
</figure>

I don't really see the difference. When should I put my image in a paragraph and when should I put it in a figure?

Good question! It all depends on what your image provides to the text:

  • If it provides no information (it's just an illustration for decorative purposes): put the image in a paragraph.

  • If it provides information: put the image in a figure.

The<figure>tag has a role that is primarily semantic. This means that it tells the computer that the image has a meaning and that it is important for the understanding of the text. This can allow a program to retrieve all the figures in the text and reference them in a table of figures, for example.

Finally, note that a figure may well have several images. Here's a case where this is justified:

<figure>
<img src="images/internetexplorer.png" alt="Internet Explorer Logo" />
<img src="images/firefox.png" alt="Mozilla Firefox Logo" />
<img src="images/chrome.png" alt="Google Chrome Logo" />
<figcaption>Logos of various browsers</figcaption>
</figure>

Summing up

  • There are several image formats suitable for Web use:

    • JPEG: for photos;

    • PNG: for all other illustrations;

    • GIF: similar to PNG, with more limited number of colors, but can be animated.

  • An image is inserted with the<img />tag. It must include at least two attributes:src(image name) andalt(short description of the image).

  • If an image illustrates the text (and is not just decorative), it is best to place it inside a<figure>tag. The<figcaption>tag is used to enter the image caption.

Example of certificate of achievement
Example of certificate of achievement