← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 10 of 26

HTML Images

Imagine walking through an art gallery where all the frames are empty, and there are only tiny text descriptions on the wall. It would be an incredibly boring experience. HTML images are your gallery's artwork. They bring visual energy, clarify complex guides, and break up long text blocks to keep your readers engaged. By learning how to embed and optimize images correctly, you can display high-definition graphics that adapt perfectly to mobile screens without slowing down your webpage loading speeds.

In this page:

  1. Embedding Images with the img Tag
  2. Preventing Layout Shifts with Dimensions
  3. Choosing the Best Web Image Formats
  4. Semantic Image Grouping with Figure
  5. Lazy Loading Offscreen Images
  6. Responsive Images with srcset
  7. Image Maps (map and area)
  8. Background vs Content Images

Embedding Images with the img Tag

To display images on a webpage, you use the img tag. It is a self-closing element, meaning it does not wrap content and does not require a closing tag. It relies on the src (source) attribute to point to the file path and the alt (alternative text) attribute to describe the graphic for accessibility.

Note: Write clear, contextual alt text for every image so screen readers and search bots can understand your graphics.

Warning: Omitting the alt attribute is an accessibility violation that causes screen readers to read the raw image filename instead.

Example: Embedding Images with the img Tag

markup 
<img src="photo.jpg" alt="A photo description">

Preventing Layout Shifts with Dimensions

When an image loads, it takes a few seconds to download. If you do not specify its width and height in the HTML, the browser will not know how much space to reserve, causing the page layout to jump around. Setting these dimensions explicitly tells the browser exactly how much space to lock in ahead of time.

Note: Always specify the native aspect ratio width and height as integers inside the HTML tags, and use CSS to scale the image dynamically.

Warning: Never use HTML attributes to shrink a massive file down; resize and optimize your images beforehand to keep page load speeds fast.

Example: Preventing Layout Shifts with Dimensions

markup 
<img src="photo.jpg" alt="Photo" width="600" height="400">

Choosing the Best Web Image Formats

Web performance relies heavily on selecting the correct image format. Use JPEG for photographic content, PNG for transparent logos, SVG for scalable vector icons, and modern formats like WebP or AVIF for rich compression that keeps file sizes small and load speeds fast.

Note: Convert your standard legacy files into WebP format to save server bandwidth and improve your core web vital metrics.

Warning: Avoid using heavy print formats like TIFF or BMP since many modern browsers cannot render them natively.

Example: Choosing the Best Web Image Formats

markup 
<img src="photo.jpg" alt="Photo">
<img src="logo.png" alt="Logo">
<img src="icon.svg" alt="Icon">
<img src="banner.webp" alt="Banner">

Semantic Image Grouping with Figure

To bundle an image with a visible text caption, you should use the semantic figure and figcaption elements. This wraps the image and its text into a single, self-contained unit, telling search engines and assistive devices that the text directly describes the image.

Note: Place the figcaption tag at either the very top or the very bottom inside the parent figure tag.

Warning: Do not use standard, disconnected paragraphs under your images as captions, as browsers cannot link them semantically.

Example: Semantic Image Grouping with Figure

markup 
<figure>
  <img src="chart.jpg" alt="Sales chart">
  <figcaption>Quarterly sales chart</figcaption>
</figure>

Lazy Loading Offscreen Images

If a page contains many images, downloading all of them at once can slow down the initial load speed. By adding the loading="lazy" attribute, you instruct the browser to delay loading an image until the user scrolls close to it.

Note: Use lazy loading for all images located below the fold, but do not apply it to your hero images at the very top of the page.

Warning: Applying lazy loading to images visible in the viewport can delay initial rendering times and lower your web vitals score.

Example: Lazy Loading Offscreen Images

markup 
<img src="offscreen.jpg" alt="Offscreen image" loading="lazy">

Responsive Images with srcset

The srcset attribute lets you provide different image sizes for different screen resolutions. The browser picks the most appropriate size automatically saving bandwidth on mobile devices.

Note: Always provide at least a 1x and 2x version of important images for retina screens.

Warning: Without srcset, mobile users download full desktop-sized images wasting their data.

Example: Responsive Images with srcset

markup 
<img src="photo.jpg" srcset="photo.jpg 1x, [email protected] 2x" alt="Photo">

Image Maps (map and area)

An image map lets you turn different regions of a single image into separate clickable links, using the map element together with area tags that define each clickable shape. This is useful for things like a diagram where different parts should link to different pages.

Note: Always add an alt attribute to every area element so screen reader users understand what each clickable region does.

Warning: Image maps use fixed pixel coordinates, so they do not resize well on responsive layouts unless carefully handled.

Example: Image Maps (map and area)

markup 
<img src="diagram.jpg" alt="Diagram" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="0,0,100,100" href="part1.html" alt="Part 1">
</map>

Background vs Content Images

A content image, added with an img tag, is part of the actual meaning of the page and should always have descriptive alt text — think product photos or diagrams. A background image, added with CSS background-image, is purely decorative styling and is invisible to screen readers, which is exactly right for things like subtle patterns or hero section backdrops.

Note: Ask yourself if removing the image would lose meaningful information — if yes, it belongs in an img tag, not CSS.

Warning: Putting meaningful content-carrying images in CSS backgrounds hides them entirely from screen readers and search engines.

Example: Background vs Content Images

markup 
<img src="product.jpg" alt="Red running shoe">
<div style="background-image: url('pattern.png');"></div>
Common Mistakes
  1. Omitting alt attributes completely, which hurts accessibility standards and site usability.
  2. Failing to declare width and height dimensions, causing annoying Cumulative Layout Shift bugs.
  3. Using massive, unoptimized image print formats that cause slow page loads and waste server bandwidth.
Chapter Summary
  • Images are embedded using the self-closing img element containing mandatory src and alt attributes.
  • Explicitly set width and height coordinates to reserve layout spaces and avoid structural jumps.
  • Group images and captions semantically using figure and figcaption containers, and optimize load speeds via lazy loading.
Browser Support

Standard image rendering and optimization attributes are supported natively by all web browsers.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Link Bookmarks Next Lesson → HTML Background Images

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.