Images arenāt just visual decorations ā theyāre essential for communication, usability, and engagement on the web. But using the right HTML tag makes a huge difference in accessibility, SEO, and performance.
Developers often use for everything, but HTML actually gives us a trio of elements ā ,
, and ā each serving a unique purpose.
Letās explore what each does, when to use them, and how they work together in real-world scenarios.
1. ā The Core Image Tag
What It Does
The element is the simplest and most direct way to display an image on a webpage. Itās used when the image is purely visual content and doesnāt need extra context, captions, or dynamic behavior.
src="cat.jpg"alt="A cute cat relaxing on the couch">
When to Use
Youāre showing a standalone image within content (like a thumbnail, logo, or product image).
The image isnāt complex enough to need captions or responsive logic.
You want quick, lightweight embedding for images.
Why It Matters
The tag integrates tightly with accessibility tools and search engines. Screen readers depend on the alt attribute to describe the image, while search engines use it to understand context for image indexing.
ā Best Practices
Always use alt text ā describe what the image means, not just what it shows:
src="team-photo.jpg"alt="Our development team at the 2024 Hackathon">
Use descriptive filenames (office-interior.webp instead of IMG_001.webp) to improve SEO.
Choose modern formats like WebP or AVIF for better compression and smaller file sizes.
š« Avoid
Using for decorative icons ā use CSS background images or inline SVGs instead.
Adding images without alt, as it harms accessibility and SEO.
2. ā Semantic Grouping for Images & Captions
What It Does
The
tag wraps media ā like an image, chart, or video ā along with an optional . It gives semantic meaning to the visual content and its caption, treating them as one unit.
src="cat.jpg"alt="A cat lounging on a windowsill">Cats love sunny spots and cozy corners.
When to Use
You want to add a caption or explanation to an image.
The image conveys data, insight, or documentation value (not just decoration).
Youāre writing blogs, documentation, case studies, or scientific content.
š” Real-World Example
In technical blogs or dashboards, you might show a chart or visual data:
This gives the image a label and context, improving both comprehension and SEO.
Why It Matters
The and pairing enhances semantic meaning.
Screen readers automatically associate captions with images.
It improves accessibility and content structure, especially for academic or data-driven sites.
ā Best Practices
Use only for captions ā not for unrelated descriptions.
A can contain multiple elements, like an image and a chart legend.
You can even use for videos or code snippets:
Figure 2: Product demo in action.
3. ā Responsive and Art-Direction Images
What It Does
The element lets you define multiple image sources for different conditions ā like screen size, resolution, or format support. It gives you fine-grained control over what image loads and when, without relying solely on CSS.
srcset="cat.avif"type="image/avif">srcset="cat.webp"type="image/webp">media="(min-width: 800px)"srcset="cat-large.jpg">src="cat-small.jpg"alt="A playful cat sitting on a sofa">
When to Use
You need different image sizes for desktop and mobile.
You want to serve modern formats (like AVIF or WebP) with fallbacks.
Youāre optimizing hero images, banners, or large visuals.
š” Real-World Example: Art Direction
media="(max-width: 600px)"srcset="banner-mobile.jpg">media="(min-width: 601px)"srcset="banner-desktop.jpg">src="banner-default.jpg"alt="Mountain view with sunset sky">
This way, mobile users get a cropped, lighter image, while desktop users get the full scenic version ā reducing load time and improving visual quality.
Why It Matters
Greatly improves performance and bandwidth efficiency.
Helps maintain visual storytelling across devices (āart directionā).
Allows format fallbacks ā older browsers can still load JPEGs when newer ones prefer WebP or AVIF.
ā Best Practices
Always include a fallback for browsers that donāt support .
Optimize each source file ā donāt just resize; re-crop for context.
Test across devices ā ensure that the image still aligns with layout and typography.
š§ Summary: Choosing the Right Tag
Tag
Purpose
Use When
Example
Display a basic image
Simple visuals like logos, product images, blog graphics
Add semantic meaning and captions
Illustrations, charts, code samples, photos with captions
For the best of both worlds ā responsive design + semantic meaning ā combine them:
srcset="cat.webp"type="image/webp">srcset="cat.jpg"type="image/jpeg">src="cat.jpg"alt="A cat curled up in a blanket">Figure 3: Lazy mornings ā optimized for both users and browsers.
This combination ensures your content is responsive, accessible, and semantically rich.
Final Thoughts
HTML gives us more than one way to include images ā because not all images are created equal.
Use for simple content images.
Use when you need captions or contextual meaning.
Use when performance and responsiveness matter most.
Together, they form a foundation for accessible, performant, and semantically meaningful web content ā something every modern frontend developer should master.
