Images enhance visual appearance of the web pages by making them more interesting and colorful.
<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">
Each image must carry at least two attributes: the
src attribute, and an
tells the browser where to find the image. Its value is the URL of the image
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
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">
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;">
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
height attribute or
property doesn’t reduce the original file size. To address these problems HTML5
has introduced the
that allows you to define multiple versions of an image to target different
types of devices.
<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>
is used to reference the map from the
<img> tag using its
is used inside the
to define the clickable areas on an image. You can define any number of
clickable areas within an image.