React Academy · पाठ

React में इमेज और फ़ॉन्ट का अनुकूलन

सही आयाम, फ़ॉर्मैट (AVIF/WebP) और font-display के साथ next/image या लेज़ी-लोडेड का उपयोग करें।

पाठ 3, कुल 4 में से13 चरण

React में इमेज और फ़ॉन्ट का अनुकूलन, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

इमेज महत्वपूर्ण क्यों हैं

आमतौर पर इमेज किसी पेज के सबसे बड़े संसाधन होते हैं। अनुकूलित न की गई इमेज खराब LCP, धीमे पेज लोड और अधिक बैंडविड्थ लागत का कारण बनती हैं — विशेष रूप से मोबाइल पर।

Next.js Image कंपोनेंट

next/image इमेज को अपने-आप अनुकूलित करता है: डिफ़ॉल्ट रूप से lazy loading, प्रतिक्रियाशील srcSet, आधुनिक फ़ॉर्मैट (WebP/AVIF), और CLS रोकने के लिए सही आयाम।

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero image"
  width={1200}
  height={600}
  priority // preload above-the-fold images
  sizes="(max-width: 768px) 100vw, 50vw" // responsive sizing
/>

साधारण React में lazy loading

मूल <img> तत्वों में loading='lazy' जोड़ें। browser स्क्रीन से बाहर की इमेज को तब तक लोड नहीं करता, जब तक वे viewport के पास स्क्रॉल न हो जाएँ।

// Below-the-fold images:
<img src="/product.jpg" alt="Product" loading="lazy" />

// Above-the-fold (hero) — eager to avoid LCP delay:
<img src="/hero.jpg" alt="Hero" loading="eager" fetchPriority="high" />

आधुनिक इमेज फ़ॉर्मैट

JPEG/PNG के बजाय WebP या AVIF परोसें। समान गुणवत्ता पर AVIF, JPEG से 50% छोटा होता है। fallback के साथ फ़ॉर्मैट का चुनाव करने के लिए <picture> तत्व का उपयोग करें।

<picture>
  <source srcSet="/hero.avif" type="image/avif" />
  <source srcSet="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" alt="Hero" width="1200" height="600" />
</picture>

srcSet के साथ प्रतिक्रियाशील इमेज

कई आकार उपलब्ध कराएँ, ताकि browser स्क्रीन के लिए उचित रिज़ॉल्यूशन चुन सके और 400px की मोबाइल स्क्रीन के लिए 2000px की इमेज डाउनलोड न करनी पड़े।

<img
  src="/photo-800.jpg"
  srcSet="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
  alt="Photo"
/>

Blurhash / Skeleton प्लेसहोल्डर

इमेज लोड होने तक धुंधला प्लेसहोल्डर दिखाएँ, ताकि लेआउट शिफ्ट रोका जा सके और अनुमानित प्रदर्शन बेहतर हो।

// With next/image blur placeholder:
<Image
  src="/photo.jpg"
  alt="Photo"
  width={800}
  height={600}
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,/9j/4AAQ..." // tiny base64 blur
/>

फ़ॉन्ट लोड करने की रणनीति

फ़ॉन्ट रेंडरिंग को रोकते हैं। कस्टम फ़ॉन्ट लोड होने तक fallback फ़ॉन्ट दिखाने के लिए font-display: swap का उपयोग करें, जिससे FOIT (Flash of Invisible Text) कम होता है।

/* In global CSS: */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/MyFont.woff2') format('woff2');
  font-display: swap; /* show fallback, swap to MyFont when ready */
}

Next.js फ़ॉन्ट अनुकूलन

next/font Google Fonts को build के समय लोड करता है, उन्हें स्वयं होस्ट करता है और फ़ॉन्ट बदलने से होने वाले CLS को समाप्त करने के लिए font-display: optional लागू करता है।

import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
});

export default function RootLayout({ children }) {
  return <html className={inter.variable}><body>{children}</body></html>;
}

फ़ॉन्ट का सबसेट बनाना

केवल आवश्यक वर्णों के सबसेट लोड करें। पूर्ण Unicode फ़ॉन्ट 1MB या उससे अधिक का हो सकता है; Latin सबसेट आमतौर पर 30–80KB का होता है।

// Google Fonts URL with subset:
https://fonts.googleapis.com/css2?family=Roboto&subset=latin

// next/font:
const roboto = Roboto({ weight: '400', subsets: ['latin'] });

महत्वपूर्ण फ़ॉन्ट को पहले से लोड करना

फ़ोल्ड के ऊपर उपयोग किए गए फ़ॉन्ट को पहले से लोड करें, ताकि वे HTML पार्सिंग के साथ समानांतर में लोड हों और रेंडरिंग रोकने वाला समय कम हो।

<link
  rel="preload"
  href="/fonts/MyFont.woff2"
  as="font"
  type="font/woff2"
  crossOrigin="anonymous"
/>

CDN और कैशिंग

इमेज और फ़ॉन्ट को लंबे कैश TTL के साथ CDN से परोसें (Cache-Control: max-age=31536000, immutable)। कंटेंट-हैश वाले फ़ाइलनाम यह सुनिश्चित करते हैं कि नई फ़ाइलें कैश को बायपास करें।

त्वरित जाँच

वेब फ़ॉन्ट के लिए font-display: swap क्या करता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

स्वचालित अनुकूलन के लिए next/image का उपयोग करें, या साधारण React के लिए मूल loading='lazy' + srcSet का उपयोग करें। <picture> fallback के साथ AVIF/WebP परोसें। वेब फ़ॉन्ट के लिए font-display: swap लागू करें, Google Fonts को स्वयं होस्ट करने के लिए next/font का उपयोग करें, और फ़ोल्ड के ऊपर के महत्वपूर्ण संसाधनों को पहले से लोड करें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ React सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 88
पाठ: 324

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “React में इमेज और फ़ॉन्ट का अनुकूलन” पाठ निःशुल्क है?

हाँ—“React में इमेज और फ़ॉन्ट का अनुकूलन” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“React में इमेज और फ़ॉन्ट का अनुकूलन” में मैं क्या सीखूँगा?

सही आयाम, फ़ॉर्मैट (AVIF/WebP) और font-display के साथ next/image या लेज़ी-लोडेड का उपयोग करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“React में इमेज और फ़ॉन्ट का अनुकूलन” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← React Academy पर वापस जाएँ