(click anywhere to close)

[HTML5] Images

category: Website | course: HTML5 | difficulty:
1. Image Formats
2. Image Maps

Images are pretty straightforward. You create images by using the self-closing <img /> tag. There are two important attributes you need to supply.

src=”url”: src stands for source and needs a URL pointing to an image file. This can be a relative link to a file on your own server, or a link to an image on another website.

alt=”text”: the alt text is displayed when the image can’t be loaded. When the link to the image is broken, or somebody uses a screen reader, the alt text will tell them what should have been there.

<img src="somefile.jpg" alt="This is some file" />

Image Formats

The most common image format on the web is .jpg or .png (with transparency), and .gif for animated images. They are known for their small file size and therefore quick loading times. But, HTML supports nearly all image formats, so anything goes really.

Always specify the size (width and height) of (large) images with CSS. If you don’t, the page will change layout all the time while the image is loading, because it is adjusting to the current image dimensions in real time.

Image Maps

If you want to define certain special (clickable) areas on an image, you need to use image maps.

The <map> tag introduces a set of areas to be mapped, which are defined with the <area /> tag.

Linking an image with its map is done by giving your img tag the attribute usemap=”#namehere”, and your map tag the attribute name=”namehere” (just like with local anchor points).

Defining your areas is done by using one of these three attribute pairs (for a rectangle, circle or polygon, respectively):

shape=”rect” coords=”x1,y1,x2,y2” shape=”circle” coords=”x,y,radius” shape=”poly” coords=”x1,y1,….,xn,yn

And lastly, an href attribute is provided to define what the area links to.

<img src="somefile.png" alt="This is an image" usemap="#imagemap">

<map name="imagemap">
  <area shape="rect" coords="0,0,100,100" href="somepage.html" alt="Links to some page">
  <area shape="circle" coords="0,0,50" href="anotherpage.html" alt="Links to another page">
Test your knowledge with the quiz!
What happens when you use <img />?
You specify a textual description of the image
You create an image
You specify the shape of an image map area
Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk