छवि अनुकूलन

आधुनिक छवि प्रारूप

WebP (JPEG से लगभग 25–35% छोटा) या AVIF (अक्सर और भी छोटा) इस्तेमाल करें। पुराने browsers के लिए fallback दें: <picture><source srcset=photo.avif type=image/avif><img src=photo.jpg></picture>।

संपीड़न रणनीतियां

Photos के लिए lossy compression (JPEG, WebP quality 75-85) और graphics के लिए lossless इस्तेमाल करें। Tools: ImageOptim, TinyPNG, Squoosh। Responsive resizing से पहले compress करें ताकि ज़रूरत से बड़ी images न भेजी जाएँ।

उत्तरदायी छवियां

हर device के हिसाब से सही resolution देने के लिए srcset और sizes इस्तेमाल करें: <img srcset='small.jpg 480w, large.jpg 1200w' sizes='(max-width: 600px) 100vw, 50vw'>। इससे mobile पर data की बर्बादी कम होती है।

छवियों को आलसी तरीके से लोड करना

Below-the-fold images में loading="lazy" जोड़ें: <img src=photo.jpg 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% होती हैं।

त्वरित जाँच

त्वरित जाँच: WebP प्रारूप का प्रमुख लाभ क्या है?

• JPEG से 30% छोटी फ़ाइल
• सार्वभौमिक ब्राउज़र समर्थन
• प्रदर्शन लागत के बिना एनिमेटेड
• किसी भी size पर lossless quality