srcset, sizes और picture का सही इस्तेमाल कैसे करें
रिस्पॉन्सिव इमेज ब्राउज़र को विज़िटर की स्क्रीन और लेआउट के हिसाब से सबसे छोटी काम की फ़ाइल चुनने देती हैं। इसकी कुंजी है: भरोसेमंद चौड़ाई वेरिएंट देना, sizes से रेंडर होने वाले स्लॉट का विवरण देना, और एक्सेसिबिलिटी से जुड़े कंटेंट फ़ैसले अपने पेज में ही रखना, किसी इमेज जेनरेटर में नहीं।
द्वारा Pixoप्रकाशित अपडेट किया गया
असली चौड़ाई वेरिएंट जेनरेट करें
ऐसी कई फ़ाइलों से शुरुआत करें जो सोर्स का आस्पेक्ट रेशियो बनाए रखें, जैसे 320, 640, 960, 1280 और 1920 पिक्सल चौड़ी। किसी छोटे मूल को अपस्केल न करें, और बिना किसी खास वजह के सोर्स से बड़ा डेरिवेटिव न रखें। Pixo का रिस्पॉन्सिव इमेज जेनरेटर दोनों नियम लागू करता है और नतीजे के डाइमेंशन व MIME टाइप को manifest.json में लिखता है।
srcset में विड्थ डिस्क्रिप्टर इस्तेमाल करें
हर कैंडिडेट को उसकी असली पिक्सल चौड़ाई के साथ लिस्ट करें, जैसे image-640w.webp 640w। w डिस्क्रिप्टर न CSS चौड़ाई है और न ही डेंसिटी मल्टीप्लायर; यह ब्राउज़र को उस फ़ाइल की इनट्रिंसिक चौड़ाई बताता है। जेनरेट किए गए srcset का हर पाथ ZIP में शामिल किसी एसेट की ओर इशारा करता है, इसलिए एसेट डायरेक्टरी और मार्कअप को साथ में कॉपी करें।
sizes को लेआउट के अनुसार मिलाएं
sizes एट्रिब्यूट बताता है कि ब्राउज़र के डाउनलोड करने से पहले इमेज कितनी चौड़ी रेंडर होगी। एक आम शुरुआती उदाहरण है (min-width: 1024px) 50vw, 100vw, उस इमेज के लिए जो डेस्कटॉप पर आधा व्यूपोर्ट और छोटी स्क्रीन पर पूरा व्यूपोर्ट इस्तेमाल करती है। इस उदाहरण को अपने असली CSS ब्रेकपॉइंट और स्लॉट चौड़ाई से बदलें; गलत sizes की वजह से ब्राउज़र ऐसी फ़ाइलें चुन सकता है जो बेवजह बड़ी हों या धुंधली दिखें।
फ़ॉर्मैट चुनने के लिए picture इस्तेमाल करें
picture एलिमेंट WebP सोर्स दे सकता है, साथ ही JPEG या PNG में img फ़ॉलबैक भी रख सकता है। source एलिमेंट पहले रखें और img एलिमेंट सबसे आखिर में। ब्राउज़र एक समर्थित सोर्स चुनता है, लेकिन फ़ॉलबैक रिक्वेस्ट, इनट्रिंसिक चौड़ाई-ऊंचाई, लोडिंग बिहेवियर और एक्सेसिबल ऑल्टरनेटिव टेक्स्ट के लिए फिर भी img एलिमेंट का ही इस्तेमाल करता है।
चौड़ाई, ऊंचाई और alt को पेज में ही रखें
जेनरेट किए गए मैनिफ़ेस्ट से width और height सेट करें, ताकि ब्राउज़र सही आस्पेक्ट-रेशियो जगह रिज़र्व कर सके और लेआउट शिफ्ट कम हो। Pixo जानबूझकर alt खाली छोड़ता है, क्योंकि सिर्फ़ पेज लिखने वाला ही जानता है कि इमेज जानकारीपूर्ण है, फ़ंक्शनल है या सिर्फ़ सजावटी। अर्थपूर्ण इमेज के लिए संक्षिप्त, संदर्भ के अनुसार alt टेक्स्ट लिखें, और सिर्फ़ सजावटी इमेज के लिए ही alt खाली रखें।
पूरा पैक डिप्लॉय करें और जांचें
पैक को अनज़िप करें, एसेट डायरेक्टरी को उसकी फ़ाइलों का नाम बदले बिना पब्लिश करें, picture.html को अपने पेज में पेस्ट करें, और sizes व alt एडजस्ट करें। फिर संकरी और चौड़ी व्यूपोर्ट साइज़ पर टेस्ट करें, पुष्टि करें कि Network पैनल पूरे सेट की बजाय सिर्फ़ एक कैंडिडेट रिक्वेस्ट करता है, और जांचें कि हर रिक्वेस्ट की गई URL अपेक्षित इमेज MIME टाइप के साथ रिज़ॉल्व होती है।