How to Include and Modify HTML Images

Using Image Tags

To define an HTML image, you need to use the <img> tag:

<img src="image.png" alt="Space Doggo" width="50" height="50">

You can also use the HTML image tag for animated images with a .gif extension:

<img src="GIF_Dog.gif" alt="HTML gif Image" style="width: 90px; height: 90px;">

Note: the HTML image tag only has attributes and no actual content. That means it defines an empty element and does not require a closing tag.

Interactive HTML Images

An image can also act as a link if you nest your HTML image tag inside a pair of anchor tags:

<a href="your_link.html">
  <img src="doggo.html" alt="HTML Image link" style="width: 75px; height: 75px; border: 0;">
</a>

Note: notice that in this case, you need to include two URL addresses: the source of the picture and the new URL to redirect the user to.

Image Maps in HTML

One image can also contain multiple clickable areas with different links. This is called an HTML image map. To define one, you need to use the <map> tags:

<img src="https://cdn.bitdegree.org/learn/space%20gif.gif?raw=true" width="500" height="600" alt="Creatures" usemap="#creaturemap">

<map name="creaturemap">
  <area shape="rect" coords="34, 44, 270, 350" alt="Doggo" href="https://www.bitdegree.org">
  <area shape="rect" coords="290, 172, 333, 250" alt="Gaming" href="http://www.bitdegree.org">
  <area shape="circle" coords="337, 300, 44" alt="Level up" href="http://www.bitdegree.org">
</map>

An HTML image map creates clickable areas on a specific HTML image. To connect the image map to an exact image, you need to first define a name for the map, and then include it as a value for the usemap attribute within the HTML image tag.

To define the clickable areas in an image map, you need to use <area> elements as children of the <map> element:

<img src="image.png" alt="Image Map" usemap="#doggo" style="width: 145px; height: 126px;">

<map name="doggo">
  <area shape="rect" coords="0, 0, 82, 126" alt="doggo" href="doggo.html">
  <area shape="circle" coords="95, 80, 30" alt="sorry" href="sign.html">
</map>

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Image Dimensions and Placement

To change the width and height of your HTML image, you will need some basic CSS styling. Use the style attribute and define the width and height properties in pixels:

<img src="image.png" alt="HTML Image Attribute" style="width: 180px; height: 180px;">

HTML5 introduced separate width and height attributes. This means you can modify the dimensions without using the style attribute. However, we'd recommend sticking with it, as using inline styling saves you from other style sheets affecting your image in HTML:

<img src="Style.jpg" alt="HTML5 Image style" style="width: 128px; height: 128px;">
<img src="WidthHeight.jpg" alt="HTML5 Image example" width="128" height="128">

Using the style attribute, you can also make set the image to float to right or left. This means it will stick to one side and stay there:

<img src="https://cdn.bitdegree.org/learn/1_HfpnwKiXB3zh-l2jwpoR8A.png?raw=true" alt="Image float right" style="float: right; width: 63px; height: 63px;">
 Image float set: right

 <img src="https://cdn.bitdegree.org/learn/1_HfpnwKiXB3zh-l2jwpoR8A.png?raw=true" alt="Image float left" style="float: left; width: 63px; height: 63px;">
 Image float set: left

Mostly Used Attributes

alt

The alt attribute sets an alternate text to show if the image cannot be displayed. You can name or describe the HTML image to give the user an idea of what the picture should look like:

<img src="image.png" alt="Bread Dog" style="width: 150px; height: 150px;">

src

The src attribute defines the source from where the image is taken. HTML images can be placed in any folder of your website. The <img> tag should have a src attribute with the correct path to a specific folder in order for your image to be displayed:

<img src="image.png" alt="Space Doggo" width="50" height="50">

Most HTML image files can also be reached via a direct URL address. To upload pictures from other servers, you need to include a URL address in the src attribute:

<img src="https://cdn.bitdegree.org/learn/pom-laptop.png" alt="HTML5 Images tag" style="width: 141px; height: 141px;">

usemap

By using usemap, you can connect your image with a <map> element defining an image map:

<img src="image.png" alt="Image Map" usemap="#doggo" style="width: 145px; height: 126px;">

<map name="doggo">
  <area shape="rect" coords="0, 0, 82, 126" alt="doggo" href="doggo.html">
  <area shape="circle" coords="95, 80, 30" alt="sorry" href="sign.html">
</map>

height

The height attribute sets the height of your image in HTML:

<img src="image.png" alt="Doggo" height="60">

width

The width attribute defines the width of your image in HTML:

<img src="image.png" alt="Doggo" width="205" >

style

The style attribute allows to apply inline styling to images in HTML:

<img src="image.png" alt="Image style attribute" style="height: 105px; width: 105px; border: solid black;">

HTML Image: Useful Tips

• When modifying the dimensions of the image, remember the px symbol must be included for the style attribute, but can be omitted in height and width.
• Choose the names for your HTML images wisely. Search engines take them into consideration, so a clearer name might help improve your website's findability.