HTML Images: Using img, srcset, and alt Correctly

HTML images are how you place visual content on a web page, and the three most important parts are the img element, the srcset attribute for responsive images, and the alt attribute for accessibility. This article explains how each one works, when to use them, and how to avoid the most common mistakes.

Quick answer: Use img for the image itself, src for the default file, srcset when you want the browser to choose the best file for different screens, and alt to describe the image’s meaning or mark it decorative.

Difficulty: Beginner

You'll understand this better if you know: basic HTML elements, attributes, and how browsers render page content.

1. What Are HTML Images?

HTML images are external resources displayed in a document with the img element. Unlike content written directly inside the page, an image is loaded from a file such as a JPEG, PNG, SVG, or WebP.

img is an empty element, so it does not have a closing tag.
src tells the browser where to fetch the image file.
alt provides text for screen readers and for cases where the image cannot load.
srcset helps browsers choose the most appropriate image file for the device.

In practice, image markup is about more than display. Good image HTML improves accessibility, loading performance, and the experience on different screen sizes.

2. Why HTML Images Matter

Images are used for product photos, charts, avatars, diagrams, logos, screenshots, and illustrations. If you use them incorrectly, a page can become harder to understand, slower to load, or less accessible.

Well-written image markup matters because it helps with all of the following:

Accessibility for users who rely on screen readers.
Fallback behavior when an image file is missing or blocked.
Responsive design across mobile, tablet, and desktop screens.
Performance by loading the right image size instead of a larger one than needed.

Images are especially important in product pages, documentation, news sites, portfolios, e-commerce stores, and any interface that communicates visually.

3. Basic Syntax or Core Idea

The most basic image uses img with src and alt.

Minimal image example

The browser uses src to load the file and alt to describe it if the file is unavailable or the user is using assistive technology.

<img src="images/team-photo.jpg" alt="The engineering team standing in front of the office">

This is enough for most simple images. The alt text should explain what the image communicates, not just repeat the file name.

How the attributes work

src: required in practice, because it points to the image file.
alt: required for accessibility and fallback text.
width and height: optional, but useful for reserving space and reducing layout shift.
srcset: optional, used when you want responsive image selection.

4. Step-by-Step Examples

Example 1: A product image

A product card often needs a clear image and descriptive alternative text.

<img src="images/sneakers.jpg" alt="White running sneakers with blue accents">

This works well because the alt text tells the reader what the product looks like without over-explaining it.

Example 2: A decorative icon

If an image is purely decorative and adds no information, the alt text should be empty so assistive technology can skip it.

<img src="images/divider-flower.svg" alt="">

An empty alt attribute is better than a misleading description for decorative content.

Example 3: Responsive images with srcset

When the same image is available in multiple sizes, srcset lets the browser choose an appropriate file.

<img src="images/hero-800.jpg" srcset="images/hero-400.jpg 400w, images/hero-800.jpg 800w, images/hero-1200.jpg 1200w" sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px" alt="A mountain landscape at sunrise">

Here, the browser can choose a file that better matches the layout size instead of always downloading the largest one.

Example 4: A logo with a meaningful label

Logos usually need alt text that identifies the organization, not the image file itself.

<img src="images/devdocs10-logo.svg" alt="DevDocs10">

This is useful because the logo represents the brand and should be announced that way to screen reader users.

5. Practical Use Cases

HTML images are used in many concrete situations. Common examples include:

Blog post illustrations that support the article text.
Product galleries with multiple image sizes.
Profile pictures in team directories or comment systems.
Icons that convey meaning in buttons or navigation items.
Charts or diagrams that need concise alternative text or a longer surrounding explanation.
Hero images that need responsive delivery to avoid unnecessary bandwidth use.

A good rule is to ask: does the image communicate information, support the content, or simply decorate the layout? The answer determines how to write the alt text and whether srcset is needed.

6. Common Mistakes

Mistake 1: Leaving out alt text

Beginners often omit alt because the image looks fine in the browser. That causes accessibility problems and weakens the fallback experience if the file fails to load.

Problem: This image has no alternative text, so screen readers cannot describe it and the browser has nothing meaningful to show if the image is unavailable.

<img src="images/report-chart.png">

Fix: Add concise alt text that explains the image’s purpose.

<img src="images/report-chart.png" alt="Sales increased steadily from January to June">

The corrected version is accessible because it gives the image a clear text alternative.

Mistake 2: Using file names as alt text

File names are not user-friendly descriptions. They often include underscores, version numbers, or technical labels that do not help readers.

Problem: The alt text repeats a file name instead of describing the image, which is unhelpful for both accessibility and usability.

<img src="images/team-photo-2025.jpg" alt="team-photo-2025">

Fix: Write alt text that describes what matters to the reader.

<img src="images/team-photo-2025.jpg" alt="The product design team posing in the studio">

This version works better because it describes the image in natural language.

Mistake 3: Using srcset without a proper fallback

Responsive images should still include a normal src. Some older browsers and unusual environments may not use srcset, and the browser still needs a default file.

Problem: Without src, the image has no reliable default source, so the page may fail to display the image in unsupported or edge-case environments.

<img srcset="images/banner-640.jpg 640w, images/banner-1280.jpg 1280w" alt="Conference banner">

Fix: Always include a default src alongside srcset.

<img src="images/banner-1280.jpg" srcset="images/banner-640.jpg 640w, images/banner-1280.jpg 1280w" alt="Conference banner">

The corrected version gives browsers a dependable fallback image.

Mistake 4: Writing decorative alt text that sounds meaningful

When an image is decorative, it should not be announced as if it contains important information.

Problem: A decorative image with descriptive alt text causes unnecessary noise for screen reader users.

<img src="images/ornament.svg" alt="Golden ornamental divider with swirls">

Fix: Use an empty alt attribute when the image is purely decorative.

<img src="images/ornament.svg" alt="">

This works because assistive technologies can skip the image entirely.

7. Best Practices

1. Match alt text to the image’s purpose

Alt text should reflect why the image is on the page. If the image adds information, describe that information. If it is decorative, leave the text empty.

<img src="images/product-box.jpg" alt="">

A product box image without meaningful content should usually not be announced at all.

2. Provide width and height when possible

Setting dimensions helps the browser reserve space before the image loads, which reduces layout shift.

<img src="images/avatar.jpg" alt="Priya Patel" width="96" height="96">

This is especially useful for cards, galleries, and lists of images that appear while the page is still loading.

3. Use srcset for responsive delivery, not for every image

Responsive variants are most valuable for large hero images, content images, or any image that appears at noticeably different sizes across devices.

<img src="images/story-800.jpg" srcset="images/story-400.jpg 400w, images/story-800.jpg 800w, images/story-1200.jpg 1200w" sizes="(max-width: 700px) 100vw, 700px" alt="A person hiking through a forest trail">

For tiny icons or simple interface graphics, srcset may add complexity without much benefit.

8. Limitations and Edge Cases

HTML images do not replace a content management or asset optimization strategy; they only reference files.
alt text should be concise, but complex images such as charts may need a longer explanation nearby.
Browsers choose from srcset based on viewport, pixel density, and sizes; the result may not always be the image you expected.
SVG images can behave differently from bitmap formats, especially when used as icons or logos.
Empty alt is correct only for decorative images; it is not a shortcut for missing descriptions.
Very large image files can still be slow even with correct HTML, so file optimization remains important.

One common surprise is that an image can look visually fine while still being inaccessible or inefficient. HTML handles the markup, but file size, compression, and art direction still matter.

9. Practical Mini Project

Here is a small but complete example of a profile card that uses a meaningful image, proper alt text, and image dimensions.

<article>
  <img src="images/profile-photo.jpg" alt="Portrait of Jordan Lee" width="320" height="320">
  <h2>Jordan Lee</h2>
  <p>Front-end developer focused on accessible interfaces and fast-loading pages.</p>
</article>

This example shows the image in context. The alt text identifies the person, the dimensions reserve space, and the surrounding content explains why the image is present.

10. Key Points

img is the HTML element used to embed an image.
src points to the image file, and alt explains the image’s meaning or hides decorative images from assistive technology.
srcset and sizes help the browser choose a better image for the current display context.
Good image markup improves accessibility, fallback behavior, and performance.
Empty alt text is correct for purely decorative images, not for meaningful content.

11. Practice Exercise

Rewrite the following image markup so it is accessible and responsive:

It shows a wide banner photo for a conference landing page.
The image should have a default file and responsive variants.
The alt text should describe the scene, not the file name.

Expected output: A valid img element that includes src, srcset, sizes, and meaningful alt.

Hint: Think about what the banner communicates to a visitor, then include smaller image files for narrower screens.

Solution:

<img src="images/conference-banner-1200.jpg" srcset="images/conference-banner-600.jpg 600w, images/conference-banner-1200.jpg 1200w, images/conference-banner-1800.jpg 1800w" sizes="(max-width: 700px) 100vw, 1200px" alt="Attendees networking in a conference hall">

12. Final Summary

HTML images are simple to place on a page, but doing them well takes attention to accessibility and responsive behavior. The img element displays the image, src loads it, srcset helps the browser choose a suitable version, and alt tells users what the image means.

Start with clear, useful alternative text, add dimensions when possible, and use responsive image sources when image size matters across devices. If you keep the image’s purpose in mind, your markup will be easier to maintain and much more usable for everyone.

Next, learn how the picture element works if you need art direction or different image formats for different displays.