HTML Images

Images in HTML are created with the <img> tag. This tag can add images, icons, photos, and other graphic elements. The <img> tag does not have a closing tag -- it is self-closing.

HTML Tutorial

Example

An <img> element of a self-portrait by Van Gogh.

<img src="/img/html/vangogh.jpg" />

For more details about the <img> tag, see our HTML img Tag Reference.


Image Syntax

Syntax for HTML images:

<img src="url" />

The <img> tag defines an HTML image.

The src attribute defines the image source, i.e. URL or file path.

Additional image attributes are listed further down below.

File Formats

A list with image file formats that are supported by HTML.

Format File Description
jpeg .jpg, .jpeg JPEG was created by the Joint Photographic Experts Group (JPEG). The degree of compression in JPEG files can be adjusted, allowing designers to choose between storage size and image quality.
png .png Portable Network Graphics (PNG) is a raster graphics format with lossless compression. PNG was developed by a group of computer graphics experts in response to a patent dispute over GIF image compression.
webp .webp WebP is a new image format that provides superior compression. Not fully supported by all major browsers.
svg .svg Simple Vector Graphics (SVG) is the only vector format (versus raster format) supported by HTML. SVG files are much smaller and scale well when reduced or enlarged.
gif .gif Graphics Interchange Format (GIF) was developed by CompuServe. GIF is commonly used for small animations and low-resolution video clips. See giphy.com for examples.
bmp .bmp Bitmap graphics format. An older raster images format that is not used much on the internet.

HTML alt Attribute

The alt attribute provides an alternate text for the image.

It should contain a brief description of the image.

Its value will display when the image cannot be loaded. Screen readers also use this value.

The alt value is not displayed because the image is properly loaded.

Van Gogh, Self-portrait
<img src="/img/html/vangogh.jpg" 
     alt="Van Gogh, Self-portrait">


If there is a problem with the image, the browser will display a broken image icon and the alt value. In this example the image name is misspelled.

Van Gogh, Self-portrait
<img src="/img/html/vangoogg.jpg" 
     alt="Van Gogh, Self-portrait">

Remote Images

Images don't have to reside on the same web server.

They can also come from a server, perhaps a dedicated image server, elsewhere on the web.

To get a remote image specify the external path or entire URL of that image in the src attribute.

This image is loaded from a Wikipedia server. Notice the long src URL.

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Microsoft_logo.svg/120px-Microsoft_logo.svg.png">

Image Size: width, height, and style Attributes

To adjust the image size use the width and height attributes.

<img width="115" height="150"
     src="/img/html/vangogh.jpg" />

Tip:  The width and height attributes accept values with or without the units (i.e. px, %, em).  The default is px (pixels).

Alternatively, use the style attribute to set the image width and height.

<img style="width:60px; height:75px;"
     src="/img/html/vangogh.jpg" />

Note:  The width, height, and style are all valid ways to adjust the image size. However, style is preferred because it prevents CSS from overriding the specified image size.


Image Size tips

#

If you only include width, then height will be calculated in proportion to the original image ratio.

If you only include height, then width will be calculated in proportion to the original image ratio.

If you include both height and width be sure the ratio is the same as the original image, or else the image will appear compressed or stretched in one direction.

To reduce page load times use images of the correct size rather than resizing them in the browser with height and width attributes.


Did you know?

Did you know?

Adding a caption to an image

In HTML, the <figure> tag can add markup to an image.

Use the <figcaption> tag to add an image caption.

Fig.1 - Van Gogh self-portrait.
<figure>
  <img src="/img/html/vangogh.jpg" height="200">
  <figcaption>Fig.1 - Van Gogh self-portrait.</figcaption>
</figure>

For more information about the <figure> tag, see our HTML figure Reference Guide.


How to center an image

An image can be centered inside a container with the appropriate CSS.
Here's an image centered in a <div>.

<style>
  .img-center { margin: 0 auto; display: block; }
  .blue-border { border: 3px solid lightblue; padding: 10px; }
</style>

<div class="blue-border">
  <img class="img-center" src="/img/html/vangogh-sm.jpg" />
</div>

Using an image as a Link

An image can act as a link by placing the <img> element inside an <a> element.

The image will then be clickable and open another page.

Clicking the image will open a Google page searching for 'Van Gogh'.

<a href="https://www.google.com/search?q=Van+Gogh" target="_blank">
  <img src="/img/html/vangogh.jpg">
</a>

Did you know?

Did you know?

Converting images to grayscale

With CSS you can convert any image to grayscale using the filter property.

This image of a Van Gogh painting has been converted to 100% grayscale.

<style>
  .grayscale {filter: grayscale(100%);}
</style>

<img class="grayscale" src="/img/html/vangogh.jpg" />

Tip:  For performance reasons it is better to convert the image to grayscale with Photoshop once, and then serve that image multiple times, instead of having the browser do all the work each time the page is loaded.


HTML Image Maps

An image map is an image with different clickable areas.

The <map> tag defines the clickable areas with coordinates.

Clicking the monitor, keyboard, or mouse in the image will display an alert.

Computer Monitor Keyboard Mouse
<img src="/img/html/computer-map.png" alt="Computer" usemap="#computermap" />

<map name="computermap">
  <area shape="rect" coords="253,142,16,2" alt="Monitor" href="javascript:alert('Monitor was clicked');">
  <area shape="rect" coords="262,218,0,156" alt="Keyboard" href="javascript:alert('Keyboard was clicked');">
  <area shape="circle" coords="267,234,22" alt="Mouse" href="javascript:alert('Mouse was clicked');">
</map>

Code Explanation

Three HTML elements are used to create an image map.

  • <img> is the image for which clickable areas are defined.
  • <map> is the container of <area> definitions.
  • <area> tags define the coordinates for each clickable area.

HTML <picture> Element

The <picture> tag offers more flexibility when adding image resources.

It contains <source> tags, one for each image source.

Each <source> tag has attributes describing when its image is the most suitable.

This allows the browser to choose the image that best fits the current view and/or device.

If you resize the browser so that the aspect ratio changes to portrait will change the display to a smaller image.

<picture>
  <source
    media="(orientation: landscape)"
    srcset="/img/html/vangogh-lg.jpg">
  <source
    media="(orientation: portrait)"
    srcset="/img/html/vangogh.jpg">
  <img src="/img/html/vangogh.jpg" >
</picture>

For more information about the <picture> tag, see our HTML <picture> Tutorial.


HTML Background Images

Images can also be defined as an element's background.
For this, you use the CSS background-image property.

A section of Van Gogh's Starry Night painting is used as background.

Starry Night background

<div style="background-image:url('/img/html/starrynight.jpg');height:150px;">
  <h1 style="padding:15px;color:white;">Starry Night background</h1>
</div>

You may also like

Guides