# छवि अनुकूलन — वेब प्रदर्शन अनुकूलन Source: https://www.skillbyai.com/hi/web-performance/web-perf-04 > प्रारूपों, संपीड़न और आलसी लोडिंग के माध्यम से गुणवत्ता का त्याग किए बिना छवि फ़ाइल आकार को कम करने की तकनीकें। ## आधुनिक छवि प्रारूप **WebP** (JPEG से लगभग 25–35% छोटा) या **AVIF** (अक्सर और भी छोटा) इस्तेमाल करें। पुराने browsers के लिए fallback दें: ``। ## संपीड़न रणनीतियां Photos के लिए **lossy compression** (JPEG, WebP quality 75-85) और graphics के लिए **lossless** इस्तेमाल करें। Tools: ImageOptim, TinyPNG, Squoosh। Responsive resizing से पहले compress करें ताकि ज़रूरत से बड़ी images न भेजी जाएँ। ## उत्तरदायी छवियां हर device के हिसाब से सही resolution देने के लिए `srcset` और `sizes` इस्तेमाल करें: ``। इससे mobile पर data की बर्बादी कम होती है। ## छवियों को आलसी तरीके से लोड करना Below-the-fold images में `loading="lazy"` जोड़ें: ``। Image तभी load होती है जब user scroll करके पास पहुँचे। इससे initial page load काफ़ी कम हो जाता है। ## छवि अनुकूलन कार्यप्रवाह 1) सही format चुनें, 2) जमकर compress करें, 3) Responsive images इस्तेमाल करें, 4) Below-the-fold को lazy load करें, 5) Fallback के साथ WebP पर विचार करें। Images अक्सर page weight का लगभग 50% होती हैं। त्वरित जाँच **Quiz:** WebP प्रारूप का प्रमुख लाभ क्या है? - [x] JPEG से 30% छोटी फ़ाइल - [ ] सार्वभौमिक ब्राउज़र समर्थन - [ ] प्रदर्शन लागत के बिना एनिमेटेड - [ ] किसी भी size पर lossless quality *Answer:* JPEG से 30% छोटी फ़ाइल. WebP समान quality पर आमतौर पर JPEG से छोटी files बनाता है।