HTML Images

Images can improve the design and the appearance of a web page. HTML images are defined with the <img> tag. The src attribute specifies the path to the image.

HTML Images — Syntax

The <img> tag is empty and contains attributes only, and does not have a closing tag.

The src attribute specifies the path (URL) to the image:

<img src="url" alt="some_text">

The alt Attribute

The alt attribute provides an alternative text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

<img src="pic_trulli.jpg" alt="Trulli" style="width:300px;">

💡 Tip: The alt attribute is required. A page without proper alt text will not validate, and more importantly, it will be inaccessible to screen reader users.

Image Sizes — Width and Height

The width and height attributes specify the width and height of an image in pixels:

<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">

💡 Tip: Always specify width and height. This prevents the page from "jumping" as the image loads (known as Cumulative Layout Shift).

Images in Another Directory

If you have your images in a sub-directory, you must include the directory name in the src attribute:

<img src="/images/html5.gif" alt="HTML5" style="width:100px;">

Images on Another Server

Some web sites point to an image on another server. You must specify an absolute URL (the full URL) to the image:

<img src="https://www.w3schools.com/html/img_5terre.jpg" alt="Italy">

Animated Images

HTML allows animated GIFs:

<img src="programming.gif" alt="Computer Man" style="width:48px;">

Image as a Link

It is common to use images as links. Just put the <img> tag inside the <a> tag:

<a href="https://www.w3schools.com/html/default.asp">
  <img src="smiley.gif" alt="HTML Tutorial" style="width:42px;height:42px;">
</a>

Image Floating

Use the CSS float property to let an image float to the right or to the left of a text:

<p><img src="smiley.gif" alt="Smiley" style="float:right;width:42px;height:42px;">
The image will float to the right of this text.</p>

Image Maps

The <map> tag defines an image map. An image map is an image with clickable areas. The usemap attribute of the <img> tag is associated with the <map> element's name attribute to create a link between the image and the map.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" style="width:400px;">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

Common Image Formats

💡 Tip: Use WebP when possible — it has the best compression. Use JPEG for photos, PNG for images that need transparency, and SVG for icons and logos.

Next: HTML Lists