By the end of this lesson, you will be able to write accessible, performant HTML image tags using essential attributes like src, alt, width, height, loading, and srcset.
What it is
The <img> tag embeds an image into an HTML document. It is a void element, meaning it has no closing tag. The browser fetches the resource specified by the source attribute and renders it within the layout flow. Key related terms include "responsive images," "lazy loading," and "accessibility."
Why it matters
- Accessibility: Screen readers rely on alternative text to describe visual content to users with disabilities.
- Performance: Proper sizing prevents layout shifts (CLS), while lazy loading reduces initial page weight.
- Responsiveness: Source sets allow browsers to choose the optimal image resolution for the user's device.
- SEO: Descriptive alt text helps search engines understand image context.
Syntax or steps
The basic syntax requires at least two attributes: src (source URL) and alt (alternative text). For modern best practices, always include width and height to reserve space before the image loads. Use loading="lazy" for images below the fold. For high-DPI screens, use srcset.
Example
<img
src="photo-small.jpg"
srcset="photo-small.jpg 400w, photo-large.jpg 800w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="A golden retriever playing in the park"
width="800"
height="600"
loading="lazy">Breakdown:
src: Fallback image ifsrcsetis unsupported.srcset: Lists candidate images with their intrinsic widths (e.g., 400w).sizes: Tells the browser how wide the image will appear on screen relative to the viewport.alt: Text description for accessibility and SEO.width/height: Prevents Cumulative Layout Shift (CLS).loading="lazy": Defers off-screen images until needed.
Common mistakes
- Missing Alt Text: Leaving
alt=""without reason hides the image from screen readers. Use empty alt only for decorative images; otherwise, provide descriptive text. - Omitting Dimensions: Not specifying
widthandheightcauses layout jumps as images load, hurting Core Web Vitals. - Incorrect Srcset Syntax: Using pixel density descriptors (e.g.,
2x) incorrectly mixed with width descriptors (w). Stick to one type per attribute. - Lazy Loading Above-the-Fold Images: Applying
loading="lazy"to hero images delays critical rendering. Useloading="eager"or omit the attribute for immediate visibility.
When to use it
Use <img> for content images that convey information. Compare it with CSS background images:
| Feature | <img> Tag | CSS Background Image |
|---|---|---|
| Accessibility | High (supports alt) | Low (ignored by screen readers) |
| Printability | Prints by default | Often hidden in print |
| Use Case | Content (photos, diagrams) | Decoration (patterns, textures) |
Practice
Guided Exercise: Write an <img> tag for a logo named logo.png. It should have dimensions 200x50, alt text "Company Logo", and eager loading.
Challenge: Modify your previous code to support responsive images. Assume you have logo-1x.png and logo-2x.png. Use srcset with pixel density descriptors.
Hint: Syntax looks like srcset="logo-1x.png 1x, logo-2x.png 2x".
Quick check
Q: Why is specifying width and height attributes important even if CSS controls the display size?
A: They define the aspect ratio, allowing the browser to reserve the correct amount of space before the image downloads, preventing layout shifts.
Summary
The <img> tag is fundamental for web content but requires careful attribute management for performance and accessibility. Always provide meaningful alt text, explicit dimensions, and consider lazy loading strategies to optimize user experience.