Image Optimization Techniques

Image optimization is like packing a suitcase efficiently — you want the photo to still look good, just without taking up way more space than it needs to.

In this page:

Serving Appropriately-Sized Images
Lazy Loading Off-Screen Images
Preventing Layout Shift

Syntax

markup

<img
  src="image.jpg"
  srcSet="small.jpg 400w, large.jpg 800w"
  sizes="(max-width: 600px) 400px, 800px"
  width="800"
  height="600"
  loading="lazy"
  alt="Description"
/>

Serving Appropriately-Sized Images

Loading a huge, full-resolution image and just displaying it small via CSS still downloads the FULL file size — the browser doesn't magically shrink the download.

Serving an image already sized close to its actual display dimensions avoids wasting bandwidth on pixels that are never actually shown.

Note: For responsive designs, the <picture> element or srcset attribute can serve different image sizes for different screen widths automatically.

Warning: A 4000px-wide photo displayed in a 200px-wide thumbnail still costs the user the full 4000px download — CSS resizing doesn't reduce the actual file transfer.

Example: Serving Appropriately-Sized Images

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
function ProductCard() {
  return <img src="product-thumb-400w.jpg" width="200" height="200" alt="Product" />;
}
ReactDOM.createRoot(document.getElementById('root')).render(<ProductCard />);
  </script>
</body>
</html>

Lazy Loading Off-Screen Images

The native 'loading="lazy"' attribute tells the browser to defer downloading an image until it's about to scroll into view, rather than loading everything upfront.

This is a simple, built-in optimization needing no extra library for images below the initial visible viewport.

Note: Don't lazy-load images that are immediately visible on page load (like a hero banner) — that would actually delay showing them.

Warning: Lazy-loading images that ARE immediately visible can cause a noticeable delay before they appear, since the browser waits before starting the download.

Example: Lazy Loading Off-Screen Images

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
function Gallery() {
  const images = ["photo1.jpg", "photo2.jpg", "photo3.jpg"];
  return (
    <div>
      {images.map((src, i) => (
        <img key={src} src={src} loading={i === 0 ? "eager" : "lazy"} alt={"Photo " + (i + 1)} width="150" />
      ))}
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<Gallery />);
  </script>
</body>
</html>

Preventing Layout Shift

Without explicit width/height, an image's space in the layout is unknown until it finishes loading, causing surrounding content to visibly jump around as each image pops in.

Setting width and height (or a matching aspect-ratio) reserves the correct space upfront, keeping the layout stable.

Note: Even if the actual displayed size is controlled by CSS, setting width/height attributes still helps the browser reserve the correct aspect ratio early.

Warning: Missing width/height on images is one of the most common causes of a poor Cumulative Layout Shift (CLS) score, a real, measured web performance metric.

Example: Preventing Layout Shift

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
function Article() {
  return (
    <div>
      <p>Some text before the image.</p>
      <img src="diagram.jpg" width="400" height="300" alt="Diagram" style={{ display: "block" }} />
      <p>Text after — doesn't jump around once width/height are set.</p>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<Article />);
  </script>
</body>
</html>

Chapter Quiz — Complete all 13 topics to unlock

0/13 topics done

Complete these topics first:

← Previous Lesson Analyzing Bundle Size Next Lesson → React as a PWA

Image Optimization Techniques

Serving Appropriately-Sized Images

Lazy Loading Off-Screen Images

Preventing Layout Shift

Chapter Quiz — Complete all 13 topics to unlock

Login to run this code