A Deeper Look: Mastering HTML Images
Images are more than just decoration; they are a fundamental part of communication on the web. They convey information, evoke emotion, and guide user attention. But simply "placing an image" isn't enough. A modern, professional approach requires us to consider accessibility, performance, and semantics.
The Non-Negotiable: Accessibility with `alt` Text
The alt attribute is the single most important part of an image tag. It provides a textual alternative for when an image cannot be displayed. This is critical for:
- Screen Readers: Visually impaired users rely on screen readers to narrate the web. The `alt` text is what the screen reader will announce, making your content accessible.
- Broken Links: If an image fails to load, the browser will display the `alt` text in its place, preserving the context.
- SEO: Search engines like Google use `alt` text to understand what an image is about, helping to index your content correctly.
Writing *Good* `alt` Text
Writing effective `alt` text is an art. It should be descriptive and concise.
❌ Bad `alt` Text
alt="picture"This is redundant and unhelpful.
alt="image-of-a-dog.jpg"Never use the file name as alt text.
✔️ Good `alt` Text
alt="A golden retriever catching a red frisbee."Describes the subject and action.
alt="Google's logo"Identifies the image clearly.
What about Decorative Images?
If an image is purely decorative (like a background pattern or a floral border) and provides no informational value, it should have an empty `alt` attribute: alt="". This tells the screen reader to skip the image entirely. **Do not** omit the `alt` attribute; include it and leave it empty.
Performance: Fighting Page Bloat
Images are often the largest files on a webpage. Optimizing them is key to a fast, responsive user experience.
- Prevent Layout Shift: Always specify the
widthandheightattributes. This allows the browser to reserve the correct amount of space for the image before it loads, preventing the page content from "jumping" (which is known as Cumulative Layout Shift or CLS). - Choose the Right Format:
- JPEG: Best for photos and complex images with lots of colors.
- PNG: Best for graphics, logos, and images that require a transparent background.
- SVG: A vector format. Infinitely scalable without loss of quality. Perfect for logos, icons, and simple illustrations.
- WebP/AVIF: Modern formats that offer superior compression and quality compared to JPEG/PNG.
- Lazy Loading: Defer loading off-screen images until the user scrolls near them. This is now built directly into HTML:
loading="lazy".
Going Responsive with srcset and <picture>
A single image file is not one-size-fits-all. A huge 4K image is wasted on a small mobile phone, and a tiny mobile image will look pixelated on a large desktop.
Resolution Switching with `srcset`
The srcset attribute lets you provide a list of image sources and their widths. The browser will then choose the most appropriate one for the user's device.
<img src="image-small.jpg"
srcset="image-small.jpg 500w,
image-medium.jpg 1000w,
image-large.jpg 1500w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="A descriptive alt text.">Here, `srcset` lists the available images and their actual widths (`w` descriptor). `sizes` tells the browser how wide the image will be at different screen sizes. This is complex but extremely powerful for performance.
Art Direction with <picture>
Sometimes you don't just want a smaller version of an image; you want a *different* image. For example, a wide landscape shot on desktop, but a close-up portrait shot on mobile. This is called "art direction," and we use the <picture> element.
<picture>
<source media="(min-width: 800px)" srcset="landscape.jpg">
<source media="(min-width: 400px)" srcset="portrait.jpg">
<img src="fallback.jpg" alt="A person.">
</picture>The browser will go through the <source> tags and pick the first one that matches the media query. The <img> tag is the fallback for all other cases.
Semantic Images: <figure> and <figcaption>
If an image is a self-contained piece of content that is referenced in the main text (like a diagram, chart, or photo in a news article), it should be wrapped in a <figure> element. You can then add a caption using <figcaption>.
<figure>
<img src="chart.png" alt="A bar chart showing rising profits.">
<figcaption>Fig. 1: Company profits, 2020-2025.</figcaption>
</figure>This semantically links the caption to the image, which is great for accessibility and SEO.
Key Takeaway: An HTML image is a combination of attributes. src is the *what*, altis the *why*, width/height are the *space*, srcset is the *performance*, and <figure> is the *context*. Mastering all five is the mark of a professional web developer.