Quick answer: Modern images on the web need three things beyond <img src="...">: alt text for accessibility and SEO, width/height attributes to stop layout shift, and loading="lazy" for images below the fold. Format choice matters too — WebP/AVIF at quality ~80 are a fraction of JPEG’s size. This guide covers the tags, the responsive patterns, and the mistakes that slow pages down.
The well-formed image tag
<img
src="photo.webp"
alt="Student presenting a dashboard project in class"
width="1200"
height="675"
loading="lazy"
decoding="async">Why each attribute earns its place: alt describes the image for screen readers and appears when the file fails — decorative images get an empty alt (alt=""), which correctly tells assistive tech to skip them. width/height let the browser reserve space before loading, eliminating the layout jumping that hurts Core Web Vitals. loading=”lazy” defers off-screen images — but never use it on the hero image, which should load eagerly.
Responsive images: two patterns
| Problem | Pattern |
|---|---|
| Same image, smaller file for phones (resolution switching) | srcset="photo-480.webp 480w, photo-1200.webp 1200w" + sizes="(max-width: 600px) 480px, 1200px" |
| Different crop or composition per device (art direction) | <picture> with multiple <source media="..."> elements |
| Modern format with fallback | <picture>: AVIF source, WebP source, JPEG <img> fallback |
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Classroom training session" width="1600" height="900">
</picture>Video and audio: the essentials
<video controls width="960" poster="cover.jpg" preload="metadata">
<source src="lesson.mp4" type="video/mp4">
Your browser does not support embedded video.
</video>
<audio controls src="interview.mp3"></audio>preload="metadata" avoids downloading whole videos on page load; omit controls only if you build your own player UI. For background ambience, add autoplay muted loop playsinline — muted is required by browsers for autoplay to work at all. Whether you hand-code or use a framework’s components, the attributes travel with you; the Materialize framework’s media handling in our autoplay slider guide is one example of building on these primitives.
For hands-on practice with real review, Ampersand Academy teaches web development one-to-one.
Frequently asked questions
Why is alt text important on images?
Alt text makes images accessible to screen reader users, appears when the image fails to load, and helps search engines understand the image. Decorative images should use an empty alt attribute instead.
Why do width and height attributes matter if CSS controls size?
They let the browser compute the aspect ratio and reserve space before the image downloads, preventing layout shift. CSS then controls the actual displayed size.
What is the difference between srcset and picture?
srcset offers the same image at multiple resolutions and lets the browser pick by screen size; picture switches between entirely different sources – different crops or formats – via source elements.
Should I use WebP or AVIF?
Both compress far better than JPEG. AVIF is smaller but slower to encode and slightly less universal; WebP is universally supported. A picture element with both sources plus a JPEG fallback covers everyone.
When should I NOT use loading=lazy?
Never lazy-load images visible on initial screen – especially the hero – because deferring them delays the largest contentful paint. Use lazy for below-the-fold images only.