W3docs
en
Log in

HTML Images

Learn how to embed images into your web page with the HTML <img> empty tag. It supports a number of optional attributes, which give additional information about it.

To embed an image to a web page use the <img> tag.

The <img> tag supports a number of required and optional attributes, which give additional information about it.

Syntax

The <img> tag is empty, which means that the closing tag isn’t required. It contains only attributes. But in XHTML, the (<img>) tag must be closed (<img/>).

Required Image Attributes - src and alt

The src (source) attribute specifies the name or the location of the image to be displayed. The value of the src attribute should contain the name of the image file or its URL.

URL example

<img src="example.jpg" />
 or
<img src="https://www.example.com/images/example.jpg" />

The alt attribute is also required for the <img> tag. It is used to provide browsers with an alternate text in case when the image cannot be displayed (in case of slow connection, when a screen reader is used, etc). Note: The hover tooltip behavior is actually controlled by the title attribute, not alt.

Syntax of the <img> tag with required src and alt attributes will look like this:

HTML Image example

<img src="example.jpg" alt="HTML tutorial" />
Tip

Use the alt attribute for all images to provide a clear, concise description of the image content, which improves accessibility and helps search engines understand your page.

Recommended Image Attributes - width and height

The width and height attributes are strongly recommended to use with <img> tag. If these attributes are used, the browser reserves the place for the image when loading the content, and this speeds up rendering the page.

HTML Image example

<img src="https://www.example.com/images/example.jpg" alt="HTML tutorial" width="200" height="120" />

Example of the HTML <img> tag with the src, alt, width and height attributes:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Place for your heading </h1>
    <p>This is Aleq's photo</p>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
  </body>
</html>
Try it Yourself »

Result

Aleq

Tip

Instead of using the width and height dimensions, you could set the size using CSS max-width or max-height properties to get extra flexibility. This can prevent large images from ruining your layout on a device with a small screen.

Image Floating

By default, an <img> element is inline, so text flows around it. However, you can control the layout using the CSS float property. This property specifies how the image should float, or how the text should be wrapped around it. (Note: While float was historically used for this, modern layouts typically use Flexbox or Grid for better control.)

To show the picture on the left side, and text on the right side, add style="float:left" to the <img> tag. For better maintainability, consider moving inline styles to a CSS class.

Example of the <img> tag and the CSS float property for floating an image to the left:

Example of an Image with float|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Place for your heading </h1>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:left"/>
    <p>Aleq's photo</p>
  </body>
</html>
Try it Yourself »

Adding style="float:right" attribute to the <img> tag positions the text to the left, and the image to the right.

Example of the <img> tag and the CSS float property for floating an image to the right:

Example with a float:right attribute|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Place for your heading </h1>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:right"/>
    <p>Aleq's photo</p>
  </body>
</html>
Try it Yourself »

Result

Aleq

As the <a> tag is used for inserting hyperlinks, you just need to put the image in the <a> tag to make your image clickable.

Example of an image with a hyperlink

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/" aria-label="w3docs homepage">
    <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo"/>
    </a>
  </body>
</html>
Try it Yourself »

What image format to choose for web

There are three main types of image formats supported by browsers:

  • GIF (Graphics Interchange Format)
  • JPG / JPEG (Joint Photographic Experts Group)
  • PNG (Portable Network Graphics)

GIF has 256 unique colors that make simple and fast-loading graphics. You can use GIF for small drawings, diagrams, charts, buttons, and other simple graphics, that won’t prevent your page from loading fast.

JPEG is typically a 24-bit format that blends red, blue, and green light to display millions of colors. Thus it is used mainly for photographs. This format gives you the flexibility to choose how much to compress your image – from 0% (heavy compression) to 100% (no compression). You can choose this format if you don’t mind giving up some quality for a reduction in size. Avoid using JPEG for images with text, shapes, or large color blocks, because when the file is compressed, the lines will blur and colors will shift.

PNG format combines the benefits of both JPEG and GIF: it supports millions of colors and allows lossless compression. You can use PNG for web graphics that require transparency, color heavy, and complex graphics or photographs.

Modern image formats

Today, several modern image formats are used for the web to have smaller, richer, and faster-loading images.

WebP designed by Google provides lossless and lossy compression for images on the web. Its main goal is to become the primary format for photographs on the web replacing JPEG. (WebP - Wikipedia)

Another format designed to replace JPEG format is BPG (Better Portable Graphics), which also boasts high compression ratio (files are smaller than JPEG with the same quality).

HEIC is a new image format that Apple uses instead of JPEG in iOS 11. This format utilizes modern compression methods, which make it possible to have higher image quality in smaller files.

Practice

Practice

Which of the following tags and attributes can be used when defining images in HTML?