Image Optimization की Techniques

Image optimization एक suitcase को efficiently pack करने जैसा है — आप चाहते हैं photo अब भी अच्छी दिखे, सिर्फ इसकी ज़रूरत से कहीं ज़्यादा space लिए बिना।

In this page:

Appropriately-Sized Images Serve करना
Off-Screen Images Lazy Load करना
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"
/>

Appropriately-Sized Images Serve करना

एक huge, full-resolution image load करना और इसे CSS के through छोटा display करना फिर भी FULL file size download करता है — browser download को magically shrink नहीं करता।

एक image को इसकी actual display dimensions के close पहले से sized serve करना उन pixels पर bandwidth waste करने से बचता है जो कभी actually दिखाए नहीं जाते।

Note: Responsive designs के लिए, <picture> element या srcset attribute अलग screen widths के लिए automatically अलग image sizes serve कर सकते हैं।

Warning: एक 4000px-wide photo जो एक 200px-wide thumbnail में displayed हो फिर भी user को पूरे 4000px download की cost लगती है — CSS resizing actual file transfer को कम नहीं करता।

उदाहरण: 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>

Off-Screen Images Lazy Load करना

Native 'loading="lazy"' attribute browser को बताता है कि एक image download तब तक defer करे जब तक यह view में scroll होने वाली न हो, सब कुछ upfront load करने के बजाय।

यह initial visible viewport के नीचे वाली images के लिए किसी extra library की ज़रूरत न होने वाला एक simple, built-in optimization है।

Note: उन images को lazy-load न करें जो page load पर immediately visible हैं (जैसे एक hero banner) — वह actually उन्हें दिखाने में delay करेगा।

Warning: उन images को lazy-loading करना जो IMMEDIATELY visible हैं इनके appear होने से पहले एक noticeable delay cause कर सकता है, क्योंकि browser download शुरू करने से पहले wait करता है।

उदाहरण: 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>

Layout Shift रोकना

बिना explicit width/height के, layout में एक image की space तब तक unknown है जब तक यह load पूरा न हो, जिससे surrounding content हर image pop in होने पर visibly jump करता है।

Width और height (या एक matching aspect-ratio) set करना upfront correct space reserve करता है, layout को stable रखते हुए।

Note: Even अगर actual displayed size CSS से controlled हो, width/height attributes set करना फिर भी browser को correct aspect ratio early reserve करने में मदद करता है।

Warning: Images पर missing width/height एक poor Cumulative Layout Shift (CLS) score के सबसे common causes में से एक है, एक real, measured web performance metric।

उदाहरण: 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

Appropriately-Sized Images Serve करना

Off-Screen Images Lazy Load करना

Layout Shift रोकना

Chapter Quiz — Complete all 13 topics to unlock

Login to run this code