Images

Image Formats

Generally, web browsers support the following image formats: GIF (Graphics Interchange Format), PNG ( Portable Network Graphics) and JPEG (Joint Photographic Experts Group). "In addition to different lossy and lossless compression algorithms, different image formats support different features such as animation and transparency (alpha) channels. As a result, the choice of the "right format" for a particular image is a combination of desired visual results and functional requirements." (Ilya Grigorik).

FormatTransparencyAnimationBrowser
GIFYesYesAll
PNGYesNoAll
JPEGNoNoAll

Insertion of in-line images

As well as text, images may be inserted into the document:

Displayed by browserHTML markup required
A ginger cat A Ginger cat and some text next to it
<img src="cat.jpeg" alt="A ginger cat">
A Ginger cat and some text next to it
A ginger cat The image here floats left next to the text and the text will go all around it.
<img src="cat.jpeg" 
alt="A ginger cat" style="float: left;">
The image here floats left next to the
text and the text will go all around it.
A ginger cat The image here floats right next to the text and the text will go all around it.
<img src="cat.jpeg" 
alt="A ginger cat" style="float: right;">
The image here floats right next to the
text and the text will go all around it.
A ginger cat Specifying the height and width of the image will speed up the page construction process.
<img src="cat.jpeg" alt="A ginger cat"
width="200" height="132.969" style="float: left;">
Specifying the height and width of the image 
will speed up the page construction process.
A ginger cat Be carefuly to get your height and width correct or the image will be distorted
<img src="cat.jpeg" alt="A ginger cat"
width="200" height="200" style="float: left;">
Be carefuly to get your height and width 
correct or the image will be distorted.

The attributes used above are:

AttributeMeaning
altIf the image can not be displayed, then the text associated with the alt attribute will be displayed instead of the image. This occurs, if for example the display of images has been turned off in the browser, or for some reason the browser can not display the image. This attribute is required in html5.
srcThe image URL. This attribute is mandatory.
heightSet the height of the image to be n pixels.
widthSet the width of the image to be n pixels.

Images in folders

It is common practice to organise content in folders, and have images stored in an images folder. In that case, the image URL must reflect the location of the image, relative to the current document: 

<img src="images/cat.jpeg alt="A ginger cat">

Images on other servers

You may also use the full image URL if the image is stored on a different server: 

<img src="https://intranet.ecs.westminster.ac.uk/modules/3sfe407/lect03/animatedfrog.gif alt="animated frog">

Adding a background image

You can add a background image to a web page using CSS. The selected image is tiled across the document and then the text of the document is written over the image(s). It is thus important to choose a background image that will not be too distracting for the reader. The background image is achieved by adding a background-image style attribute to the body markup tag. For example: 

<body style="background-image:url(backgrd.jpg)">

The background image can be added to most html elements.

Semantic Image Grouping

In HTML5, the <figure></figure> tag is used to group images with captions, while <figcaption></figcaption> provides a description for the image. This is useful for accessibility and SEO, as screen readers can properly associate the caption with the image. For example: 

<figure>
  <img src="cat.jpg" alt="A ginger cat sitting on the grass">
  <figcaption>A ginger cat enjoying the sunlight.</figcaption>
</figure>