HTML Images
Images = visual content with optimization
Image Element
<img> tag for images
<img src="image.jpg" alt="Description" />
Basic image element.
"The img element displays images in HTML, requiring src for the image source and alt for accessibility."
Required Attributes
src + alt are essential
- src: Image source (URL or path)
- alt: Alternative text (required for accessibility)
<img src="photo.jpg" alt="A beautiful sunset" />
"Images require src for the source and alt text for accessibility and when images fail to load."
Alt Text Best Practices
Descriptive, not redundant
✅ Good:
<img src="chart.jpg" alt="Sales increased 25% in Q3" />
❌ Bad:
<img src="chart.jpg" alt="chart" /> <img src="chart.jpg" alt="image" />
"Alt text should be descriptive and convey the image's purpose, not just repeat the filename."
Responsive Images
srcset + sizes for different screens
<img
src="image-small.jpg"
srcset="image-small.jpg 400w, image-medium.jpg 800w, image-large.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1200px) 800px,
1200px"
alt="Responsive image"
/>
"srcset and sizes attributes enable responsive images that load appropriate sizes for different screen sizes."
Picture Element
Art direction with <picture>
<picture>
<source media="(min-width: 800px)" srcset="large.jpg" />
<source media="(min-width: 400px)" srcset="medium.jpg" />
<img src="small.jpg" alt="Description" />
</picture>
"The picture element provides art direction, allowing different images for different screen sizes or conditions."
Image Formats
Modern formats = better performance
| Format | Best For | Browser Support |
|---|---|---|
| JPEG | Photos | Universal |
| PNG | Graphics, transparency | Universal |
| WebP | Modern, smaller | Good |
| AVIF | Best compression | Growing |
"Modern formats like WebP and AVIF provide better compression, though JPEG and PNG have universal support."
Lazy Loading
Load images when needed
<img src="image.jpg" alt="Description" loading="lazy" />
- Improves initial page load
- Saves bandwidth
- Better performance
"Lazy loading defers image loading until they're about to enter the viewport, improving performance."
Image Optimization
Size · Format · Compression
Best practices:
- Optimize file size: Compress images
- Use appropriate format: WebP when possible
- Correct dimensions: Don't scale up small images
- Lazy load: Load below-fold images lazily
"Optimize images by compressing, using modern formats, sizing correctly, and lazy loading below-fold images."
9️⃣ Decorative Images
Empty alt for decorative
<img src="decoration.jpg" alt="" />
For purely decorative images, use empty alt text.
"Decorative images that don't convey information should have empty alt text, not be omitted."
Image Accessibility
✅ Always provide alt text ✅ Make alt text descriptive ✅ Don't use images for text ✅ Ensure sufficient contrast ✅ Provide text alternatives for complex images
"HTML images use the img element with required src and alt attributes. Responsive images use srcset and sizes, or the picture element for art direction. Modern formats like WebP provide better compression. Lazy loading improves performance. Always include descriptive alt text for accessibility, or empty alt for decorative images."
🧠 Ultra-Short Cheat Sheet
<img src alt>
Alt text required
Responsive (srcset, sizes)
Picture element (art direction)
Modern formats (WebP, AVIF)
Lazy loading
Optimization
Accessibility