Images on a web page 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.
This is 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.
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.
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. |
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.
<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.
<img src="/img/html/vangoogg.jpg"
alt="Van Gogh, Self-portrait">
For more details about the alt attribute, see our HTML <img> alt attribute reference.
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">
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.
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.
In HTML, the <figure> tag can add markup to an image.
Use the <figcaption> tag to add an image caption.
<figure>
<img src="/img/html/vangogh.jpg" height="200">
<figcaption>Fig.1 - Van Gogh self-portrait.</figcaption>
</figure>
For details on the <figure> tag, see our HTML figure tag reference.
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>
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>
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.
For details on the filter property, see our CSS filter property reference.
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.
<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>
Three HTML elements are used to create an image map.
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 details on the <picture> tag, see our HTML <picture> Tutorial.
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.
<div style="background-image:url('/img/html/starrynight.jpg');height:150px;">
<h1 style="padding:15px;color:white;">Starry Night background</h1>
</div>
For more details on background-image, see our CSS background-image property reference.
