वेबसाइटों के लिए छवियों को कैसे अनुकूलित करें

चरण

1. 1

   1. सही आयाम परोसें

   छवि द्वारा कब्जा की गई सबसे बड़ी CSS चौड़ाई को मापें और उच्च-घनत्व डिस्प्ले के लिए लगभग दोगुना निर्यात करें। 1200 CSS पिक्सेल पर एक हीरो को 2400px स्रोत की आवश्यकता होती है, न कि 6000px कैमरा मूल की। यह एकल कदम आमतौर पर बाकी सब कुछ संयुक्त रूप से हरा देता है।

2. 2

   2. WebP का उपयोग करें, जहाँ आप कर सकते हैं वहाँ AVIF के साथ

   WebP समान गुणवत्ता पर JPEG से 25-35% छोटा है और हर जगह समर्थित है। AVIF और भी आगे जाता है लेकिन अधिक धीरे-धीरे एन्कोड करता है। यदि आपको बहुत पुराने क्लाइंट का समर्थन करने की आवश्यकता है तो एक JPEG फॉलबैक रखें।

3. 3

   3. आदत से नहीं, सामग्री के अनुसार गुणवत्ता निर्धारित करें

   तस्वीरों के लिए 75-85। तेज किनारों वाले ग्राफिक्स के लिए उच्च, जहां संपीड़न कलाकृतियां अधिक दिखाई देती हैं। वास्तविक डिस्प्ले आकार पर परिणाम की जांच करें।

4. 4

   4. हमेशा चौड़ाई और ऊंचाई निर्धारित करें

   स्पष्ट आयाम ब्राउज़र को छवि लोड होने से पहले स्थान आरक्षित करने देते हैं, जो लेआउट शिफ्ट को रोकता है। यह एक संचयी लेआउट शिफ्ट फिक्स है जिसकी कोई लागत नहीं है।

5. 5

   5. फोल्ड के नीचे आलसी-लोड करें, कभी भी इसके ऊपर नहीं

   पृष्ठ पर नीचे की छवियों में loading="lazy" जोड़ें। अपनी LCP छवि को लेज़ी-लोड न करें — यह ठीक उसी चीज़ में देरी करता है जिसे मापा जा रहा है।