Beyond the Basics: Mastering HTML Images for a Modern Web
You've learned the <img> tag with its three core attributes:src, alt, and width/height. This is the essential foundation. However, the modern web demands more. We need images that are **accessible**, **performant**, and **responsive**. Let's explore the advanced techniques you'll use every day.
1. The Art of alt Text: Accessibility Deep Dive
The alt attribute is the single most important tool for web accessibility. But how to write *good* alt text is a skill.
- Be descriptive, but concise. Don't start with "An image of..." or "A picture of...". Screen readers announce it's an image. Get straight to the point.
- Bad: `alt="A dog"`
- Good: `alt="A golden retriever catching a red frisbee."`
- When to use an empty alt attribute (`alt=""`). If an image is purely decorative—like a background texture, a dividing line, or an icon next to text that says the same thing—use an emptyalt attribute. This tells screen readers to ignore the image, reducing noise for the user.
2. Performance: Lazy Loading and Async Decoding
Why force a user to download an image at the bottom of a long page if they never scroll that far?
- Native Lazy Loading: By adding `loading="lazy"`, you tell the browser to wait until the image is about to scroll into view before downloading it. This is a massive performance win.
- Asynchronous Decoding: Add `decoding="async"` to hint to the browser that it can decode the image in the background, preventing it from blocking other content from rendering.
<img src="heavy-image.jpg" alt="..." width="800" height="600" loading="lazy" decoding="async">3. Responsive Images: `srcset` and `sizes`
A 1200px wide image is great for a desktop, but it's wasteful and slow on a 360px wide phone. Responsive images solve this.
- `srcset` (Source Set): This attribute provides a comma-separated list of image files and their widths (e.g., `image-small.jpg 400w`, `image-large.jpg 800w`). The browser then picks the best one based on the user's screen resolution and connection speed.
- `sizes` (Sizes): This attribute tells the browser how wide the image will *actually be* in your layout at different breakpoints (e.g., `(max-width: 600px) 100vw, 50vw`). This helps the browser pick the right `srcset` image even before the CSS loads.
<img src="fallback.jpg"
alt="A responsive image"
width="800" height="600"
srcset="img-400w.jpg 400w, img-800w.jpg 800w, img-1200w.jpg 1200w"
sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 800px">4. Art Direction with the <picture> Element
Sometimes you don't just want a *smaller* image, you want a *different* image. On a wide screen, you might show a whole landscape, but on a phone, you want to show a cropped, zoomed-in version of the main subject. This is called "art direction," and the <picture> tag is built for it.
It's also the best way to serve modern formats like **WebP** or **AVIF** with a **JPEG/PNG** fallback for older browsers.
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<source srcset="image-wide.jpg" media="(min-width: 800px)">
<source srcset="image-tall.jpg" media="(max-width: 400px)">
<img src="fallback.jpg" alt="..." width="800" height="600">
</picture>Key Takeaway: A modern HTML image tag is more than just <img src>. It's a powerful tool for performance and accessibility. Always use alt,width, and height. Always consider loading="lazy",srcset, and the <picture> element to deliver the best possible experience to every user.