Images

Images = visual content with optimization

---

Image Element

<img> tag for displaying images

<img src="landscape.jpg" alt="Beautiful mountain landscape at sunrise" />

Example:

note

Use the <img> element to embed images in your page. Always include the alt attribute for accessibility.

Another example with specified width and height attributes for better layout (and CLS prevention):

<!--
  If the original image is 200x200 pixels and you set width="300" and height="200",
  the browser will stretch the image to fit those exact display dimensions.
  This may distort the image since the aspect ratio changes.
-->
<img
  src="cat.png"
  alt="Tabby cat sitting on a window sill"
  width="300"
  height="200"
/>
<!--
  Result: The 200x200 image will be displayed at 300px wide and 200px tall,
  causing it to appear wider and possibly distorted.
  To keep the original aspect ratio, set only width or height, not both,
  or ensure both match the image's aspect ratio (1:1 for a square image).
-->

Alt Text Best Practices

not just state "image" or repeat the filename.

✅ Good:

<img src="chart.jpg" alt="Sales increased 25% in Q3" />

❌ Bad:

<img src="chart.jpg" alt="chart" /> <img src="chart.jpg" alt="image" />

tip

Alt text should be descriptive and meaningful, so users using screen readers understand the purpose or content of the image.

---

Responsive Images

Use srcset and sizes to serve the right image for every device

<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="A responsive city skyline"
/>

note

srcset and sizes help browsers select the most efficient image based on device size and resolution, improving performance.

---

Picture Element

Art direction: choose different images for different screen sizes or media

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg" />
  <source media="(min-width: 400px)" srcset="medium.jpg" />
  <img src="small.jpg" alt="Scenic view changing by device size" />
</picture>

tip

Use the <picture> element when you need to swap images based on display conditions (different crops, formats, or art direction)—not just size.

---

Image Formats

Format	Best For	Browser Support
JPEG	Photos	Universal
PNG	Graphics, transparency	Universal
WebP	Modern, smaller	Good
AVIF	Best compression	Growing

note

Modern formats like WebP and AVIF offer better compression and faster load times compared to older formats. However, always provide a fallback for older browsers.

---

Lazy Loading

Defer loading of images until they're nearly on screen

<img src="image.jpg" alt="Description" loading="lazy" />

• Improves initial page speed.
• Loads images only if user scrolls near them.

tip

Add loading="lazy" on images below the fold to speed up first paint and reduce unnecessary bandwidth use.

---

Image Optimization

Size · Format · Compression = Fast Images!

Best practices:

• Optimize file size: Compress images before serving.
• Use appropriate format: Prefer WebP or AVIF for modern browsers.
• Correct dimensions: Don't upscale small images; set display size via HTML attributes or CSS.
• Lazy load: Only load images when needed.

note

Optimize images to speed up your site, save bandwidth, and improve user experience.

---

Decorative Images

Use empty alt text (alt="") for images that are purely decorative

<img src="decoration.jpg" alt="" />

danger

Decorative images must have empty alt (alt=""), so they are ignored by assistive tech. Never omit alt—an omitted alt is treated as if the image has meaning and may be read out as the filename.

---

Image Accessibility

✅ Always provide meaningful alt text
✅ Make alt text descriptive
✅ Don't use images to represent text or important information
✅ Ensure sufficient color/contrast if images contain information
✅ Provide text alternatives for complex images or charts

warning

Never use images of text—use real text for clarity and accessibility.
For complex charts, supply a text summary or data table for screen readers.

---

"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