Now that we have an almost complete website, what could possibly be left to cover in this tutorial?

Quite a lot, actually.

For starters let's talk about images.

Inserting an image in a web page is surprisingly easy, but there are nevertheless a few details to consider.

The format of your image is one of them.

Not all images are created equal and depending on which format you choose, you may trade quality for compression or vice-versa.

Images are quite heavy in terms of file size, much more so than text, so larger images mean slower loading time.

We'll start this chapter by introducing different image formats and determining which one is best suited for each specific need.

Keep reading to find out more.

Different image formats

Image formats are means of storing the digital data of a computer image.

Depending on which formats your file is stored in, your image will be more or less compressed which will in turn affect the quality and the size of your file.

You've probably seen image file formats before.

For example, Adobe Photoshop allows you to choose between different formats when you save an image.

As you can see you have more than enough choice as of which image format to use on your website.

We are going to cover the three main file formats used for displaying images on web pages.

These are the three types of images you will run into most often.

They all share one point in common: they are compressed, meaning that they are optimized for faster loading on web pages.

The JPEG format

The JPEG format stands for "Joint Photographic Expert Group" and, as you may have guessed from its name, is particularly common in the field of digital photography.

But that's far from its only use.

The JPEG compression method is very advantageous when creating or adapting images for their use on web media.

This format is specifically designed to reduce the size of large photos in order to optimize their loading speed.

The following is a photo saved under the JPEG format.

JPEG images are saved with the file extension .jpg or less frequently .jpeg.

Note that JPEG is a lossy compression method, so depending on the amount of compression you choose you may see a slight though generally imperceptible drop in image quality.

This is what makes it possible to store large photos at reduced file sizes.

It's usually very hard to detect a loss in quality via naked eye unless you've overly compressed your file.

With some types of images however, I'm tempted to say anything that's not a photograph, the image may appear to be slightly blurry.

In that case it's better to use another image format such as PNG.

The PNG format

The PNG format stands for "Portable Graphic Network" and is a relatively modern image system.

This format is most suited for most graphics and particularly for computer generated images.

Compared to JPEG, the PNG image format excels when the image possesses large, uniformly colored areas.

Basically anything that's not a photo.

The following is an image saved in the PNG format. You may recognize it from somewhere.

PNG is a lossless compression method, meaning that while the image is naturally optimized the compression process doesn't affect the image quality.

The PNG image format boasts another advantage: it supports transparent images.

The JPEG format has better compression.

For large files, an image saved in JPEG will almost always load faster than one saved in PNG.

I recommend using JPEG essentially for photos of considerable size and for images whose loading speed you want to optimize at the expense of absolute quality.

The GIF format

The GIF format stands for Graphics Interchange Format.

You've most likely already heard of it, as the name has become nearly synonymous with its main feature: the ability to display animated images.

GIF images are limited to 256 colors but, just like with the PNG format, they support transparency.

The following image is saved under the GIF format.

These are the three most used formats on the web.

The best format for your image

There isn't a universal best format for your image.

Rather, there are different formats that exist to achieve separate needs.

• The JPEG format is best used for photos
• The PNG format is best used for graphics
• The GIF format is best used for animated images

As mentioned above, these are the three most commonly used image formats for web development.

The formats not presented here are usually not adapted for web usage, mainly because they are often not compressed and therefore too big to load on a web page.

Inserting an image

Let's get back to our HTML code.

All you need to insert an image in a web page is the <img /> tag. As you may have guessed, it stands for "image".

This is a standalone tag. You might remember the distinction from the second chapter of this tutorial.

Standalone tags such as <img /> or <br /> don't need to be opened and closed and as such you don't need to enter two tags as was the case with most other HTML elements we have seen so far.

It can carry two attributes, two of which are mandatory.

They are the following:

• src stands for "source" and indicates the location of the image file you want to insert. It can be included either through a relative path (e.g. images/siteraw.png) or through an absolute one (e.g. http://www.siteraw.com/siteraw.png), the first being a much more common practice. Refer to last chapter's introduction to links if you forgot what absolute and relative mean.
• alt stands for "alternative text" and is a short description of the image. This tag doesn't seem like it's very useful at first sight, but it must always be included. Every image needs an alternative text. Many agents such as search engine robots and non-visual browsers (those of blind web surfers in particular) need an alternative text to know what the image is about. Additionally, this is text that will appear if the image can't be loaded on your page for any reason.

Images are by default inline elements (they don't create a new line on a page) so they must be included in block-level tags.

In our case, we'll include our image inside paragraph (<p>) tags. It's the only block element we know of for the moment.

Here is our HTML code.

<p>
    Welcome to SiteRaw.<br />
    <img src="images/siteraw.jpg" alt="SiteRaw Logo" />
</p>

And... that's it.

Inserting images is ludicrously simple in HTML.

The only "difficult" part is choosing the right format.

Alternative text

As we've briefly mentioned, the alternative text attribute (alt) specifies an alternate text for the image in case it can't be loaded.

This is not only important if the image fails to load, in case of a slow connection or an error in the src attribute, but it's also necessary for proper indexation by search engines and their robots.

Since HTML5 this attribute is no longer strictly required for a semantically valid page but you should nevertheless always supply your images with an alternative text for the reasons mentioned above.

Browsers for visually impaired users will read the text aloud while text browsers will always show the alternative text instead of the image.

Search engine robots will not download the image to try and figure out what it is and if it has relevance to your web page. Instead, they will simply read the alt attribute to determine what the image is about.

Some very old browsers also display the content of the alt attribute as a tooltip but that shouldn't be the case with modern versions.

Speaking of which, how do you display a tooltip?

Adding a tooltip

The attribute used to display a visual tooltip on the hover of the mouse is title.

Unlike alt, this attribute is completely optional.

Here is an example.

<img src="siteraw.png" alt="SiteRaw Logo" title="The Logo of SiteRaw" />

Hover your mouse pointer over the image to see the tooltip appear.

A clickable image

Just as you can create a text link (see last chapter), you can also create a clickable image link.

Instead of placing textual content between the <a> elements, simply place an image (<img />) tag.

Here is the HTML code.

<p>
    Want to visit an awesome website? Click the image below!<br />
    <a href="http://www.siteraw.com"><img src="siteraw.png" alt="Visit SiteRaw!" /></a>
</p>

And there you have a clickable image.

Figures

Throughout this tutorial you've frequently come across figures.

Figures are HTML elements that represent self-contained content and enhance the text by supplementing information on the page.

Contrary to popular belief, figures aren't necessarily images.

Although images are often the preferred format, figures can be diagrams, listings, quotations, source code and more.

Anything that illustrates or supplements the text content of your web page can be a figure.

With that said, most of the time figures are comprised of at least an image so that's the example we'll be using.

Inserting a figure

Remember this image from the first chapter?

This is a figure.

To insert one in your web page simply wrap <figure> tags around your <img /> element.

<figure>
   <img src="siteraw.png" alt="SiteRaw" />
</figure>

Figures are almost always accompanied by captions.

In our example from the first chapter the caption reads "HTML and CSS for building websites".

The HTML tag for adding captions is <figcaption> and it goes inside the <figure> element, by convention after the image.

<figure>
    <img src="siteraw.png" alt="SiteRaw" />
    <figcaption>HTML and CSS for building websites</figcaption>
</figure>

Earlier in this chapter I told you that images (<img />) had to be located inside paragraphs (<p>) or other block-level elements.

Well the figure tag we just discovered (<figure>) happens to be a block element, so figures can and should be located outside of paragraphs.

Here is a demonstration.

<p>Welcome to SiteRaw!</p>

<figure>
    <img src="siteraw.png" alt="SiteRaw" />
    <figcaption>SiteRaw is the best site on the web</figcaption>
</figure>

As you can see, the entire figure element is outside of the paragraph.

The role of figures

The dichotomy between inline elements and block elements is accurate but somewhat simplistic.

In reality, that's not the main reason we refrain from using figures within paragraphs... or titles inside paragraphs for that matter.

Inline and block are display values. As such, they can be modified by CSS.

You can turn a paragraph into an inline element and an image into a block element if you want.

Remember the golden rule of web development that I keep mentioning since the beginning of this tutorial? HTML for content, CSS for style.

The <figure> tag exists primarily for semantic purposes, the block/inline distinction being secondary.

The main reason why we don't place figures in paragraphs is that figures are used to provide information on their own. To supplement the paragraphs, not complete them.

If your image provides:

• no information or complementary information, put it in a paragraph.
• adjunct information, put it in a figure.

In summary, if an image is informative rather than decorative and if the information is self-contained, it should go in a figure.

Don't worry too much about which case applies to your image, these aren't inflexible rules but rather proper HTML practices and valid coding conventions.

Lastly, when we introduced figures I briefly mentioned that they usually contain at least one image.

They can easily hold more.

Here is an example.

<figure>
    <img src="awesome.png" alt="SiteRaw is awesome!" />
    <img src="amazing.png" alt="SiteRaw is amazing!" />
    <img src="siteraw.png" alt="SiteRaw is SiteRaw!" />

    <figcaption>What is SiteRaw?</figcaption>
</figure>

This case justifies the use of multiple images inside a figure as they are all related. In a moderately nonsensical fashion.

But forget that, now you know how to insert images on your website.

Even better, we finished the first part of this tutorial about the HTML language.

Now we can move on to CSS.

Tired of hearing me say "we'll learn how to do X with CSS in just a moment"?

It's your lucky day! You'll finally get to learn CSS... in just a moment ;)