वेबसाइट के लिए इमेज साइज़: लेआउट स्लॉट के हिसाब से चुनें, मॉनिटर से नहीं

रेंडर होने वाले स्लॉट से शुरुआत करें

इमेज के सबसे चौड़े CSS लेआउट स्लॉट को मापें, मॉनिटर को नहीं। फ़ुल-विड्थ हीरो और 320-पिक्सल कार्ड को अलग-अलग सोर्स सेट चाहिए। अगर कोई हीरो बड़ी स्क्रीन पर 1280 CSS पिक्सल पर रेंडर होता है, तो 1280 और शायद 2560 पिक्सल का कैंडिडेट उपयोगी हो सकता है; कार्ड को इससे कहीं छोटा रहना चाहिए।

रिस्पॉन्सिव इमेज जेनरेटर → चौड़ाई वेरिएंट, मार्कअप और ZIP लोकली बनाएं।

काम के कैंडिडेट का छोटा सेट बनाएं

चौड़ाई का सेट लेआउट के हिसाब से होना चाहिए, जैसे 320, 640, 960, 1280 और 1920 पिक्सल। हर संभव साइज़ जेनरेट न करें। ब्राउज़र कैंडिडेट्स में से चुनता है, इसलिए हर फ़ाइल ट्रांसफ़र होने वाले बाइट्स में एक सार्थक कदम होनी चाहिए।

sizes से ब्राउज़र को लेआउट बताएं

srcset एट्रिब्यूट कैंडिडेट चौड़ाइयां लिस्ट करता है; sizes बताता है कि व्यूपोर्ट की स्थितियों में इमेज कितनी चौड़ी रेंडर होगी। अगर sizes गायब या गलत है, तो ब्राउज़र ज़रूरत से बड़ा कैंडिडेट डाउनलोड कर सकता है।

हर इमेज क्लास के लिए फ़ॉर्मैट और क्वालिटी चुनें

फ़ोटो के लिए आधुनिक लॉसी फ़ॉर्मैट इस्तेमाल करें, और जिन ग्राफ़िक्स को ज़रूरत हो उनके लिए लॉसलेस आउटपुट। लोगो अक्सर SVG के रूप में बेहतर रहते हैं। हर एसेट पर एक ही क्वालिटी नंबर लगाने की बजाय टेक्स्ट, चेहरे, ग्रेडिएंट और शार्प किनारों की तुलना रेंडर साइज़ पर करें।

लेआउट और लोडिंग प्रायोरिटी सुरक्षित रखें

जगह रिज़र्व करने के लिए इनट्रिंसिक width और height या आस्पेक्ट रेशियो सेट करें। जहां फ़्रेमवर्क सपोर्ट करे, वहां मुख्य अबव-द-फ़ोल्ड इमेज को प्रायोरिटी दें, और फ़ोल्ड के नीचे की इमेज लेज़ी-लोड करें। हर इमेज को हाई प्रायोरिटी न बनाएं।