HTML Images

HTML Images


Images can improve the design and the appearance of a web page.

Example

Try it Yourself »

Example

Try it Yourself »

Example

Try it Yourself »


HTML Images Syntax

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.

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

The <img> tag has two required attributes:

  • src – Specifies the path to the image
  • alt – Specifies an alternate text for the image

Syntax


The src Attribute

The required src attribute specifies the path (URL) to the image.

Note: When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stays in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon and the alt text are shown if the browser cannot find the image.

Example

Try it Yourself »


The alt Attribute

The required alt attribute provides an alternate 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).

The value of the alt attribute should describe the image:

Example

Try it Yourself »

If a browser cannot find an image, it will display the value of the alt attribute:

Example

Try it Yourself »

Tip: A screen reader is a software program that reads the HTML code, and allows the user to “listen” to the content. Screen readers are useful for people who are visually impaired or learning disabled.


Image Size – Width and Height

You can use the style attribute to specify the width and height of an image.

Example

Try it Yourself »

Alternatively, you can use the width and height attributes:

Example

Try it Yourself »

The width and height attributes always define the width and height of the image in pixels.

Note: Always specify the width and height of an image. If width and height are not specified, the web page might flicker while the image loads.


Width and Height, or Style?

The widthheight, and style attributes are all valid in HTML.

However, we suggest using the style attribute. It prevents styles sheets from changing the size of images:

Example

Try it Yourself »


Images in Another Folder

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

Example

Try it Yourself »


Images on Another Server/Website

Some web sites point to an image on another server.

To point to an image on another server, you must specify an absolute (full) URL in the src attribute:

Example

Try it Yourself »

Notes on external images: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.


Animated Images

HTML allows animated GIFs:

Example

Try it Yourself »


Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag:

Example

Try it Yourself »


Image Floating

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

Example

Try it Yourself »

Tip: To learn more about CSS Float, read our CSS Float Tutorial.


Common Image Formats

Here are the most common image file types, which are supported in all browsers (Chrome, Edge, Firefox, Safari, Opera):

Abbreviation File Format File Extension
APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg

Chapter Summary

  • Use the HTML <img> element to define an image
  • Use the HTML src attribute to define the URL of the image
  • Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
  • Use the HTML width and height attributes or the CSS width and height properties to define the size of the image
  • Use the CSS float property to let the image float to the left or to the right

Note: Loading large images takes time, and can slow down your web page. Use images carefully.


HTML Exercises

Test Yourself With Exercises

Exercise:

Start the Exercise


HTML Image Tags

Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
<picture> Defines a container for multiple image resources

For a complete list of all available HTML tags, visit our HTML Tag Reference.

 

HTML Image Maps


With HTML image maps, you can create clickable areas on an image.


Image Maps

The HTML <map> tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more <area> tags.

Try to click on the computer, phone, or the cup of coffee in the image below:

Workplace

Sun Mercury Venus

Example

Here is the HTML source code for the image map above:

Try it Yourself »


How Does it Work?

The idea behind an image map is that you should be able to perform different actions depending on where in the image you click.

To create an image map you need an image, and some HTML code that describes the clickable areas.


The Image

The image is inserted using the <img> tag. The only difference from other images is that you must add a usemap attribute:

<img src=”workplace.jpg” alt=”Workplace” usemap=”#workmap”>

The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map.

Tip: You can use any image as an image map!


Create Image Map

Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the image by using the required name attribute:

The name attribute must have the same value as the <img>‘s usemap attribute .


The Areas

Then, add the clickable areas.

A clickable area is defined using an <area> element.

Shape

You must define the shape of the clickable area, and you can choose one of these values:

  • rect – defines a rectangular region
  • circle – defines a circular region
  • poly – defines a polygonal region
  • default – defines the entire region

You must also define some coordinates to be able to place the clickable area onto the image.


Shape=”rect”

The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis.

So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels from the top:

Workplace

The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels from the top:

Workplace

Now we have enough data to create a clickable rectangular area:

Example

Try it Yourself »

This is the area that becomes clickable and will send the user to the page “computer.htm”:

Workplace


Shape=”circle”

To add a circle area, first locate the coordinates of the center of the circle:

337,300

Workplace

Then specify the radius of the circle:

44 pixels

Workplace

Now you have enough data to create a clickable circular area:

Example

Try it Yourself »

This is the area that becomes clickable and will send the user to the page “coffee.htm”:

Workplace


Shape=”poly”

The shape="poly" contains several coordinate points, which creates a shape formed with straight lines (a polygon).

This can be used to create any shape.

Like maybe a croissant shape!

How can we make the croissant in the image below become a clickable link?

French Food

We have to find the x and y coordinates for all edges of the croissant:

French Food

The coordinates come in pairs, one for the x-axis and one for the y-axis:

Example

Try it Yourself »

This is the area that becomes clickable and will send the user to the page “croissant.htm”:

French Food


Image Map and JavaScript

A clickable area can also trigger a JavaScript function.

Add a click event to the <area> element to execute a JavaScript function:

Example

Here, we use the onclick attribute to execute a JavaScript function when the area is clicked:

Try it Yourself »


Chapter Summary

  • Use the HTML <map> element to define an image map
  • Use the HTML <area> element to define the clickable areas in the image map
  • Use the HTML usemap attribute of the <img> element to point to an image map

HTML Image Tags

Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
<picture> Defines a container for multiple image resources

For a complete list of all available HTML tags, visit our HTML Tag Reference.

 

HTML Background Images


A background image can be specified for almost any HTML element.


Background Image on a HTML element

To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property:

Example

Add a background image on a HTML element:

Try it Yourself »

You can also specify the background image in the <style> element, in the <head> section:

Example

Specify the background image in the <style> element:

Try it Yourself »


Background Image on a Page

If you want the entire page to have a background image, you must specify the background image on the <body> element:

Example

Add a background image for the entire page:

Try it Yourself »


Background Repeat

If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element:

Example

Try it Yourself »

To avoid the background image from repeating itself, set the background-repeat property to no-repeat.

Example

Try it Yourself »


Background Cover

If you want the background image to cover the entire element, you can set the background-size property to cover.

Also, to make sure the entire element is always covered, set the background-attachment property to fixed:

This way, the background image will cover the entire element, with no stretching (the image will keep its original proportions):

Example

Try it Yourself »


Background Stretch

If you want the background image to stretch to fit the entire element, you can set the background-size property to 100% 100%:

Try resizing the browser window, and you will see that the image will stretch, but always cover the entire element.

Example

Try it Yourself »


Learn More CSS

From the examples above you have learned that background images can be styled by using the CSS background properties.

To learn more about CSS background properties, study our CSS Background Tutorial.

ArmenianEnglish