HTML IMAGES

Images enhance visual appearance of the web pages by making them more interesting and colorful.

The <img> tag is used to insert images in the HTML documents. It is an empty element and contains attributes only. The syntax of the <img> tag can be given with:

<img src="url" alt="some text here">

The following example inserts three images on the web page:

<img src="kitten.jpg" alt="lovely kitten">
<img src="ball.jpg" alt="balls">
<img src="dog.jpg" alt="dogs">
Result

Each image must carry at least two attributes: the src attribute, and an alt attribute.

The src attribute tells the browser where to find the image. Its value is the URL of the image file.

Whereas, the alt attribute provides an alternative text for the image, if it is unavailable or cannot be displayed for some reason. Its value should be a meaningful substitute for the image.


Setting the Width and Height of an Image

The width and height attributes are used to specify the width and height of an image.

The values of these attributes are interpreted in pixels by default.

<img src="kitten.jpg" alt="lovely kitten" width="300" height="300">
<img src="ball.jpg" alt="balls" width="250" height="150">
<img src="dog.jpg" alt="dogs" width="200" height="200">
Result

You can also use the style attribute to specify width and height for the images. It prevents style sheets from changing the image size accidently, since inline style has the highest priority.

<img src="kitten.jpg" alt="kitten" style="width: 300px; height: 300px;">
<img src="ball.jpg" alt="ball" style="width: 250px; height: 150px;">
<img src="dog.jpg" alt="dog" style="width: 200px; height: 200px;">
Result

Using the HTML5 Picture Element

Sometimes, scaling an image up or down to fit different devices (or screen sizes) doesn’t work as expected. Also, reducing the image dimension using the width and height attribute or property doesn’t reduce the original file size. To address these problems HTML5 has introduced the <picture>tag that allows you to define multiple versions of an image to target different types of devices.

The <picture> element contains zero or more <source> elements, each referring to different image source, and one <img> element at the end. Also each <source> element has the media attribute which specifies a media condition (similar to the media query) that is used by the browser to determine when a particular source should be used. Let’s try out an example:

<picture>
    <source media="(min-width: 1000px)" srcset="logo-large.jpg">
    <source media="(min-width: 500px)" srcset="logo-small.jpg">
    <img src="logo-all.jpg" alt="my logo">
</picture>

Working with Image Maps

An image map allows you to define hotspots on an image that acts just like a hyperlink.

The basic idea behind creating image map is to provide an easy way of linking various parts of an image without dividing it into separate image files. For example, a map of the world may have each country hyperlinked to further information about that country.

Let’s try out a simple example to understand how it actually works:

<img src="nest.jpg" usemap="#nest" alt="nest">
<map name="nest">
    <area shape="circle" coords="137,231,71" href="link.html" alt="link">
    <area shape="poly" coords="363,146,273,302,452,300" href="sign.html" alt="sign">
    <area shape="rect" coords="520,160,641,302" href="book.html" alt="book">
</map>
Result

The name attribute of the <map> tag is used to reference the map from the <img> tag using its usemap attribute. The <area> tag is used inside the <map> element to define the clickable areas on an image. You can define any number of clickable areas within an image.