HTML Images

To embed an image to a web page use the <img> tag. This is an empty tag, which means that it has no closing tag and contains only attributes.

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

Required Image Attributes

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

<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). Browsers often display the alternative text of the image as a pop-up when you put your mouse over it.

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

<img src="https://www.w3docs.com/learn-html/" alt="HTML tutorial" />

Use alt attribute for all your images to provide keyword-rich description for search engines to improve rankings of your web pages.

Recommended Image Attributes

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.

<img src="https://www.w3docs.com/learn-html" alt="HTML tutorial" width=”200” height=”120” />

Example

<!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>

Result

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

Generally the text is above the image by default. But the position of the image and text can easily be changed with the CSS float property. This property specifies how the image should float, or how the text should be wrapped around it.

To show the picture on the left side, and text on the right side, add style="float:left" to the <img> tag.

Example

<!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>

Result

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

Example

<!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>

Result

How to add hyperlink to an image

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

<!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>

Result

To see the result click on the picture below (it will redirect you to our homepage).


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 only 256 unique colors, and they make simple, 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 being a 16-bit format can blend 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 all the benefits both the JPEG and GIF formats have, it has millions of colours and allows to compress the file with no loss in quality. You can use PNG for web graphics that require transparency, color heavy and complex graphics or photographs.

Modern image formats

Today there are several modern image formats which are used for 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 primary format for photographs on the web replacing JPEG.

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.