वेब प्रदर्शन अनुकूलन और Lighthouse · पाठ

कुशल इमेज फ़ॉर्मैट

गुणवत्ता और फ़ाइल आकार के बीच संतुलन बनाने के लिए अलग-अलग उपयोग-स्थितियों हेतु सर्वोत्तम इमेज फ़ॉर्मैट, जैसे WebP, AVIF और JPEG, की तुलना और चयन कीजिए।

पाठ 1, कुल 4 में से12 चरण

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

छवि प्रारूप महत्वपूर्ण क्यों हैं

वेब प्रदर्शन के लिए सही छवि प्रारूप चुनना अत्यंत महत्वपूर्ण है। इसमें छवि की गुणवत्ता और फ़ाइल के आकार के बीच संतुलन बनाना होता है।

छोटी छवि फ़ाइलों का अर्थ है तेज़ लोडिंग, जिससे उपयोगकर्ता अनुभव बेहतर होता है और आपके खोज इंजन क्रम में भी सुधार हो सकता है।

JPEG: फ़ोटोग्राफ़ के लिए

JPEG (Joint Photographic Experts Group) कई रंगों वाली फ़ोटोग्राफ़ और जटिल छवियों के लिए आदर्श है। इसमें हानिपूर्ण संपीड़न का उपयोग होता है, जिसका अर्थ है कि फ़ाइल का आकार कम करने के लिए कुछ छवि डेटा स्थायी रूप से हटा दिया जाता है।

हालाँकि यह फ़ोटो के लिए अच्छा संपीड़न प्रदान करता है, लेकिन बार-बार सहेजने से गुणवत्ता घट सकती है। JPEG पारदर्शिता का समर्थन NOT करता।

<!-- Example of a JPEG image -->
<img src="my-photo.jpg" alt="A beautiful landscape">

PNG: ग्राफ़िक्स और पारदर्शिता

PNG (Portable Network Graphics) उन छवियों के लिए सबसे अच्छा है जिनमें स्पष्ट रेखाएँ, एकसमान रंगों के ठोस क्षेत्र और विशेष रूप से पारदर्शिता आवश्यक हो, जैसे लोगो, आइकन और चित्र।

इसमें हानिरहित संपीड़न का उपयोग होता है, अर्थात संपीड़न के दौरान कोई डेटा नष्ट नहीं होता। इसके परिणामस्वरूप गुणवत्ता अधिक होती है, लेकिन समान फ़ोटोग्राफ़िक सामग्री के लिए JPEG की तुलना में फ़ाइल का आकार अक्सर बड़ा होता है।

<!-- Example of a PNG image with transparency -->
<img src="my-logo.png" alt="Company Logo">

GIF: सरल ऐनिमेशन

GIF (Graphics Interchange Format) सरल ऐनिमेशन प्रदर्शित करने की क्षमता के लिए जाना जाता है। यह पारदर्शिता का समर्थन करता है, लेकिन इसमें 256 रंगों तक की सीमा होती है।

रंगों की यह सीमा GIF को फ़ोटोग्राफ़ या जटिल छवियों के लिए अनुपयुक्त बनाती है। इसका उपयोग छोटी, सरल ऐनिमेशन या बहुत छोटे, कम रंगों वाले ग्राफ़िक्स के लिए करना सबसे अच्छा है।

<!-- Example of a GIF animation -->
<img src="loading-spinner.gif" alt="Loading animation">

WebP: आधुनिक मानक

WebP Google द्वारा विकसित एक आधुनिक छवि प्रारूप है। इसका उद्देश्य वेब पर छवियों के लिए बेहतर हानिपूर्ण और हानिरहित संपीड़न प्रदान करना है, जिससे अक्सर फ़ाइल का आकार काफी छोटा हो जाता है।

WebP छवियाँ समान JPEG या PNG फ़ाइलों की तुलना में 25-35% छोटी हो सकती हैं, जिससे गुणवत्ता में ध्यान देने योग्य कमी के बिना पृष्ठ तेज़ी से लोड होते हैं।

WebP के मुख्य लाभ

WebP पुराने प्रारूपों की सबसे अच्छी सुविधाओं को एक साथ लाता है:

छोटे फ़ाइल आकार: फ़ोटोग्राफ़िक और ग्राफ़िक, दोनों प्रकार की छवियों के फ़ाइल आकार को काफी कम करता है।
पारदर्शिता: PNG की तरह अल्फ़ा चैनल पारदर्शिता का समर्थन करता है।
ऐनिमेशन: GIF के समान ऐनिमेशन का भी समर्थन कर सकता है, लेकिन बेहतर संपीड़न के साथ।
लचीलापन: फ़ोटो के लिए हानिपूर्ण और ग्राफ़िक्स के लिए हानिरहित, दोनों प्रकार का संपीड़न प्रदान करता है।

AVIF: अगली पीढ़ी

AVIF (AV1 Image File Format) AV1 वीडियो कोडेक पर आधारित एक और भी नया छवि प्रारूप है। वर्तमान छवि प्रारूपों में इसकी संपीड़न दक्षता सबसे अधिक है।

AVIF WebP की तुलना में और भी छोटे फ़ाइल आकार बना सकता है, अक्सर 10-20% अतिरिक्त कमी के साथ, जबकि छवि की उत्कृष्ट गुणवत्ता बनी रहती है। अपने बेहतर प्रदर्शन के कारण इसका प्रचलन बढ़ रहा है।

AVIF की बेहतर विशेषताएँ

AVIF कई उन्नत सुविधाएँ प्रदान करता है:

उच्चतम संपीड़न: हानिपूर्ण और हानिरहित, दोनों प्रकार की छवियों के लिए सबसे छोटे फ़ाइल आकार प्रदान करता है।
HDR समर्थन: हाई डायनेमिक रेंज (HDR) छवियों का समर्थन करता है, जिससे अधिक समृद्ध रंग और बेहतर कंट्रास्ट मिलता है।
व्यापक रंग विस्तार: पुराने प्रारूपों की तुलना में रंगों की अधिक विस्तृत श्रेणी प्रदर्शित कर सकता है।
पारदर्शिता और ऐनिमेशन: पारदर्शिता और ऐनिमेशन का भी समर्थन करता है।

इष्टतम प्रारूप चुनना

सबसे अच्छा प्रारूप चुनना आपकी चित्र सामग्री और ब्राउज़र समर्थन की आवश्यकताओं पर निर्भर करता है:

फ़ोटोग्राफ़: AVIF > WebP > JPEG
लोगो/ग्राफ़िक्स (पारदर्शिता के साथ): AVIF > WebP > PNG
सरल ऐनिमेशन: AVIF > WebP > GIF
पुराने ब्राउज़र का समर्थन: JPEG, PNG, GIF अब भी सबसे व्यापक ब्राउज़र संगतता प्रदान करते हैं।

प्रदर्शन के लिए आम तौर पर AVIF और WebP जैसे आधुनिक प्रारूपों को प्राथमिकता दी जाती है।

<picture> के साथ चित्र उपलब्ध कराना

संगतता सुनिश्चित करते हुए आधुनिक प्रारूपों का लाभ उठाने के लिए HTML के <picture> तत्व का उपयोग करें। इससे आप चित्र के कई स्रोत निर्दिष्ट कर सकते हैं और ब्राउज़र उनमें से समर्थित सबसे अच्छे प्रारूप को चुन सकता है।

ब्राउज़र पहले ऐसे <source> को लोड करने का प्रयास करेगा जिसका वह समर्थन करता है। <img> टैग उन ब्राउज़र के लिए वैकल्पिक व्यवस्था के रूप में काम करता है जो <picture> या किसी भी <source> प्रकार का समर्थन नहीं करते।

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="A beautiful landscape" width="800" height="600">
</picture>

अपना ज्ञान जाँचें

चित्र प्रारूपों और उनके उपयोग के बारे में निम्नलिखित में से कौन-से कथन सही हैं?

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

कुशल चित्र प्रारूपों का पुनरावलोकन

हमने प्रमुख चित्र प्रारूपों और वेब प्रदर्शन के लिए उनके सर्वोत्तम उपयोगों का अध्ययन किया है:

JPEG: फ़ोटोग्राफ़ के लिए सर्वोत्तम (गुणवत्ता-हानि वाला)।
PNG: ग्राफ़िक्स और पारदर्शिता के लिए सर्वोत्तम (गुणवत्ता-हानिरहित)।
GIF: सरल, कम-रंग वाले ऐनिमेशन के लिए।
WebP: आधुनिक और कुशल; गुणवत्ता-हानि वाले और गुणवत्ता-हानिरहित प्रारूप, पारदर्शिता तथा ऐनिमेशन का समर्थन करता है।
AVIF: अगली पीढ़ी का प्रारूप, सबसे अधिक संपीड़न और HDR समर्थन के साथ।
<picture> तत्व मज़बूत वैकल्पिक व्यवस्थाओं के साथ आधुनिक प्रारूप उपलब्ध कराने के लिए आवश्यक है।

सही प्रारूप चुनकर और <picture> जैसी तकनीकों को लागू करके आप अपनी वेबसाइट के लोड होने के समय को काफ़ी कम कर सकते हैं!

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

एआई शिक्षक के साथ वेब प्रदर्शन अनुकूलन और Lighthouse सीखें — निःशुल्क

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

पाठ्यक्रम: 12
पाठ: 48

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

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

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

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

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

गुणवत्ता और फ़ाइल आकार के बीच संतुलन बनाने के लिए अलग-अलग उपयोग-स्थितियों हेतु सर्वोत्तम इमेज फ़ॉर्मैट, जैसे WebP, AVIF और JPEG, की तुलना और चयन कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ वेब प्रदर्शन अनुकूलन और Lighthouse का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या वेब प्रदर्शन अनुकूलन और Lighthouse शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

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

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

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

क्या मैं इस वेब प्रदर्शन अनुकूलन और Lighthouse पाठ में कोड लिख और चला सकता हूँ?

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

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

← वेब प्रदर्शन अनुकूलन और Lighthouse पर वापस जाएँ