वेब के लिए JPG कंप्रेस करें

किसी सामान्य कंटेंट पेज पर, इमेज ट्रांसफ़र हुए ज़्यादातर बाइट्स होती हैं, और सबसे बड़ी इमेज अक्सर Largest Contentful Paint एलिमेंट होती है — वह मेट्रिक जो सीधे Core Web Vitals मापती है। जो मुख्य इमेज आधा सेकंड देर से आती है वह LCP को आधा सेकंड खिसका देती है, और 2.5 सेकंड से ऊपर का LCP वह सीमा है जहाँ कोई पेज "अच्छा" गिना जाना बंद कर देता है।

सबसे आम ग़लती है कैमरा या डिज़ाइनर से सीधे फ़ाइल परोसना। 4000px और 5 MB की JPEG को 1200px वाले कंटेनर में दिखाने पर डिज़ाइन जितना दिखा सकता है उससे क़रीब बीस गुना ज़्यादा डेटा ट्रांसफ़र होता है। ब्राउज़र इसे पहुँचते ही छोटा कर देता है, तो विज़िटर उस डिटेल के लिए इंतज़ार करता है जो पेंट होने से पहले ही छोड़ दी जाती है।

क्वालिटी 78 उस बिंदु से ठीक नीचे बैठती है जहाँ फ़ोटोग्राफ़िक कंटेंट में JPEG आर्टिफ़ैक्ट दिखने लगते हैं, और 1920 पिक्सल ज़्यादातर स्क्रीन पर पूरी चौड़ाई वाली दिखावट को कवर करता है। साथ में, ये आमतौर पर किसी मुख्य इमेज को 300 KB से कम कर देते हैं। क्वालिटी और बढ़ाने से अपेक्षाकृत कम वज़न के बदले दिखने वाली फ़िडेलिटी की क़ीमत चुकानी पड़ती है; डाइमेंशन और बढ़ाने से हाई-डेंसिटी स्क्रीन पर धुँधलापन दिखने लगता है।

हालाँकि, कंप्रेशन इस उपाय का सिर्फ़ एक हिस्सा है, बाक़ी मार्कअप है। स्पष्ट width और height एट्रिब्यूट सेट करें ताकि ब्राउज़र जगह पहले से आरक्षित कर सके और लेआउट शिफ़्ट न हो, शुरुआती व्यू से नीचे बची हर चीज़ पर loading="lazy" जोड़ें, और जो अकेली इमेज LCP एलिमेंट है उसे तुरंत लोड होने दें। picture एलिमेंट के ज़रिए JPEG के साथ एक आधुनिक फ़ॉर्मेट परोसना अक्सर इस क़दम के बाद अगला सबसे बड़ा सुधार होता है।