Jul 9, 2023

HTML Images

In this tutorial you will learn how to include images in an HTML document.

Inserting Images into Web Pages

Images enhance visual appearance of the web pages by making them more interesting and colorful.

The <img> tag is used to insert images in the HTML documents. It is an empty element and contains attributes only. The syntax of the <img> tag can be given with:

<img src="url" alt="some_text" />

The following example inserts three images on the web page:

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Placing Images in HTML Documents</title>
  </head>
  <body>
    <img src="/examples/images/kites.jpg" alt="Flying Kites" />
    <img src="/examples/images/sky.jpg" alt="Cloudy Sky" />
    <img src="/examples/images/balloons.jpg" alt="Hot Air Balloons" />
  </body>
</html>

Each image must carry at least two attributes: the src attribute, and an alt attribute.

The src attribute tells the browser where to find the image. Its value is the URL of the image file.

Whereas, the alt attribute provides an alternative text for the image, if it is unavailable or cannot be displayed for some reason. Its value should be a meaningful substitute for the image.

Note: Like <br> , the <img> element is also an empty element, and does not have a closing tag. However, in XHTML it closes itself ending with “/>”.

Tip: The required alt attribute provides alternative text description for an image if a user for some reason cannot able to view it because of slow connection, image is not available at the specified URL, or if the user uses a screen reader or non-graphical browser.

Setting the Width and Height of an Image

The width and height attributes are used to specify the width and height of an image.

The values of these attributes are interpreted in pixels by default.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Setting Image Dimensions in HTML</title>
  </head>
  <body>
    <img
      src="/examples/images/kites.jpg"
      alt="Flying Kites"
      width="300"
      height="300"
    />
    <img
      src="/examples/images/sky.jpg"
      alt="Cloudy Sky"
      width="250"
      height="150"
    />
    <img
      src="/examples/images/balloons.jpg"
      alt="Hot Air Balloons"
      width="200"
      height="200"
    />
  </body>
</html>

You can also use the style attribute to specify width and height for the images. It prevents style sheets from changing the image size accidently, since inline style has the highest priority.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Setting Image Width and Height Using style Attribute in HTML</title>
  </head>
  <body>
    <img
      src="/examples/images/kites.jpg"
      alt="Flying Kites"
      style="width: 300px; height: 300px;"
    />
    <img
      src="/examples/images/sky.jpg"
      alt="Cloudy Sky"
      style="width: 250px; height: 150px;"
    />
    <img
      src="/examples/images/balloons.jpg"
      alt="Hot Air Balloons"
      style="width: 200px; height: 200px;"
    />
  </body>
</html>

Note: It’s a good practice to specify both the width and height attributes for an image, so that browser can allocate that much of space for the image before it is downloaded. Otherwise, image loading may cause distortion or flicker in your website layout.

Using the HTML5 Picture Element

Sometimes, scaling an image up or down to fit different devices (or screen sizes) doesn’t work as expected. Also, reducing the image dimension using the width and height attribute or property doesn’t reduce the original file size. To address these problems HTML5 has introduced the <picture> tag that allows you to define multiple versions of an image to target different types of devices.

The <picture> element contains zero or more <source> elements, each referring to different image source, and one <img> element at the end. Also each <source> element has the media attribute which specifies a media condition (similar to the media query) that is used by the browser to determine when a particular source should be used. Let’s try out an example:

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Specify Multiple Source for Images in HTML</title>
  </head>
  <body>
    <picture>
      <source
        media="(min-width: 1000px)"
        srcset="/examples/images/logo-large.png"
      />
      <source
        media="(max-width: 500px)"
        srcset="/examples/images/logo-small.png"
      />
      <img src="/examples/images/logo-default.png" alt="My logo" />
    </picture>
    <p>
      <strong>Note:</strong> Open the output in a new blank tab (Click the arrow
      next to "Show Output" button) and resize the browser window to understand
      how it actually works.
    </p>
  </body>
</html>

Note: The browser will evaluate each child <source> element and choose the best match among them; if no matches are found, the URL of the <img> element’s src attribute is used. Also, the <img> tag must be specified as the last child of the <picture> element.