सही पैटर्न चुनें
Resolution switching रचना को समान रखता है और कई फ़ाइल चौड़ाइयाँ प्रदान करता है। यह प्रोडक्ट फोटोज़, आर्टिकल फिगर, और कार्ड्स के लिए सामान्य पैटर्न है। जब रेंडर्ड चौड़ाई लेआउट के साथ बदलती है तो 480w या 1200w जैसे width डेस्क्रिप्टर्स का उपयोग करें। यह संख्या फ़ाइल की वास्तविक पिक्सल चौड़ाई है, कोई फ़ोन लक्ष्य या CSS कमांड नहीं।
Density switching एक फिक्स्ड CSS स्लॉट को higher-density डिस्प्ले पर अधिक स्रोत पिक्सल देता है। इसके डिस्क्रिप्टर्स 1x, 1.5x, या 2x होते हैं, और यह किसी ऐसे लोगो या आइकन के लिए उपयुक्त है जिसकी CSS चौड़ाई स्थिर, उदाहरण के लिए 160 CSS पिक्सेल है। एक ही srcset में width और density डिस्क्रिप्टर्स को मिलाएँ नहीं।
जब कोई कंपोनेंट बढ़ता या घटता है तो sizes के साथ w डिस्क्रिप्टर्स का उपयोग करें।
जब रेंडर किया गया CSS साइज स्थिर हो तभी सिर्फ़ x डिस्क्रिप्टर्स का उपयोग करें और sizes न दें।
समझें कि sizes चयन को कैसे मार्गदर्शित करता है
Width डिस्क्रिप्टर्स के साथ ब्राउज़र इमेज डाउनलोड करने से पहले sizes का मूल्यांकन करता है। प्रत्येक एंट्री वैकल्पिक मीडिया कंडीशन को एक length के साथ जोड़ती है। पहली मेल खाती स्थिति स्रोत-आकार देती है; अंतिम अनकंडीशनल length फ़ॉलबैक है। sizes चयन हेतु एक संकेत है, CSS नियम नहीं।
ब्राउज़र उस स्रोत-आकार की तुलना उम्मीदवार चौड़ियों से करके प्रभावी डेंसिटी निकालता है, फिर डिस्प्ले डेंसिटी, ज़ूम, और नेटवर्क स्थितियों पर भी विचार कर सकता है। ब्राउज़र को गणितीय रूप से सबसे नज़दीकी फ़ाइल चुनना आवश्यक नहीं है। ईमानदार उम्मीदवार और विश्वसनीय स्लॉट अनुमान दें; ब्राउज़र चयन अंततः यूज़र एजेंट का निर्णय रहेगा।
पहली मेल खाती मीडिया कंडीशन जीतती है, इसलिए सूची को ऐसी क्रमबद्ध करें कि पहली मैच सही हो।
एक एक-तिहाई डेस्कटॉप कार्ड को viewport-व्यापी बताना अनावश्यक रूप से बड़े उम्मीदवार को ट्रिगर कर सकता है।
अभ्यासिक लेआउट से उम्मीदवार निकालें
पृष्ठों का इन्वेंटरी न लें; कंपोनेंट्स की सूची बनाएं। एक ही साइट पर हीरो, संपादकीय फिगर, प्रोडक्ट गैलरी, सर्च थम्बनेल और फुटर लोगो अक्सर अलग-अलग स्लॉट चौड़ाइयाँ रखते हैं। हर एक के लिए संकीर्ण और सबसे बड़ी रेंडर्ड चौड़ाई, आस्पेक्ट अनुपात, क्रॉप व्यवहार, और इनिशियल-स्क्रीन दृश्यता रिकॉर्ड करें।
कंपोनेंट के अर्थपूर्ण स्लॉट रेंज के आसपास चौड़ियाँ जनरेट करें, और जब विवरण हाई-डेंसिटी रेंडरिंग का औचित्य देता हो तो एक बड़ा विकल्प रखें। लगभग समान फ़ाइलें बिल्ड और कैश जटिलता बढ़ाती हैं; सिर्फ़ एक बहुत छोटी और एक बहुत बड़ी फ़ाइल ही समझौता करवाती हैं। इमेज ट्रांसफॉर्मेसन काम करती हैं यह मानकर नहीं चलें — जेनरेट किए गए URLs टेस्ट करें।
एक वैध src फॉलबैक और width तथा height मान रखें जो डिलिवर्ड अनुपात से मेल खाते हों। वे जगह रिज़र्व करते हैं पर रेस्पॉन्सिव CSS को अंतिम आयाम बदलने से नहीं रोकते।
एक उम्मीदवार जिसे 800w बताया गया है वह वास्तविक में 800 पिक्सल चौड़ा होना चाहिए।
टेम्पलेट और डिज़ाइन परिवर्तनों के साथ स्लॉट और उम्मीदवार योजना को बनाए रखें।
आर्ट डायरेक्शन के लिए picture का उपयोग करें
आर्ट डायरेक्शन में रचना बदलती है, सिर्फ़ फ़ाइल साइज नहीं। एक चौड़ी लैंडस्केप फ़ोटो को संकीर्ण स्क्रीन पर उसका विषय दिखाने के लिए टाइट पोर्ट्रेट क्रॉप की आवश्यकता हो सकती है। picture एलिमेंट मीडिया-विशिष्ट स्रोत विकल्प दे सकता है, उसके बाद एक img फॉलबैक आता है। ब्राउज़र प्रत्येक source की media, type, और srcset जानकारी पर विचार करता है; img वैकल्पिक पाठ, डाइमेंशन्स और फॉलबैक व्यवहार रखता है।
हर क्रॉप को संपादकीय और पहुँच (accessibility) समीक्षा के साथ तैयार करें। एक मोबाइल क्रॉप किसी उत्पाद विवरण या alt टेक्स्ट में उल्लेखित व्यक्ति को हटा सकता है। alt को img पर रखें और उस जानकारी या फ़ंक्शन का वर्णन करें जो छवि संप्रेषित करती है। केवल सजावटी छवि के लिए ही alt="" का उपयोग करें; लिंक या बटन वाली छवि के लिए उसके दिखावे की बजाय कार्रवाई का वर्णन करें। अगर क्रॉप अपरिवर्तित है तो picture न जोड़ें: साधारण width-आधारित srcset सरल है।
एक व्यस्त डेस्कटॉप हीरो को फोन के लिए अलग पोर्ट्रेट क्रॉप की आवश्यकता हो सकती है।
picture का source type हिन्ट दे सकता है और उपयोगी img फॉलबैक बनाए रखता है।
महंगी लोडिंग और मार्कअप गलतियों से बचें
सामान्य बर्बादी यह है कि sizes="100vw" को हर छवि पर कॉपी कर देना। यह एक संकीर्ण फुल-वाइड्थ फ़िगर के लिए उपयुक्त हो सकता है पर कैप्ड कंटेनर या डेस्कटॉप कार्ड के लिए नहीं। विपरीत विफलता डिजाइन के बाद stale sizes होना है। CSS और sizes को साथ बदलें।
किसी इमेज को जो प्रारंभिक दृश्य सामग्री में महत्वपूर्ण है, उसे lazy-load न करें। मार्गदर्शन नीचे-टुकड़े वाली छवियों के लिए lazy loading की सलाह देता है और एक दिखाई देने वाले हीरो को eager रखने को कहता है। Fetch priority एक वास्तव में महत्वपूर्ण इमेज को ऊँचा कर सकता है, पर व्यापक high-priority या preload नियम परफॉर्मेंस को नुकसान पहुँचा सकते हैं। फ़ाइल नामों या कैश्ड परिणामों पर निर्भर न रहें।
एक CMS, प्रॉक्सी, या कैश एक गलत डिस्क्रिप्टर या अनपेक्षित इमेज रिक्वेस्ट को छिपा सकता है।
जरूरी पृष्ठ टेक्स्ट को सिर्फ़ आर्ट-डायरेक्टेड क्रॉप पर निर्भर न बनाएं।
रिक्वेस्ट, क्रॉप, और मरम्मत का परीक्षण करें
लेआउट-परिवर्तन चौड़ाइयों पर प्रतिनिधि पृष्ठों का परीक्षण करें, जिसमें ग्रिड ब्रेकपॉइंट के ठीक ऊपर और नीचे के व्यू-पोर्ट शामिल हों। हाई-डेंसिटी सेटिंग, वाइड डेस्कटॉप और स्लॉट बदलने वाली स्थितियाँ शामिल करें। रेंडर की गई आयामों, क्रॉप, वैकल्पिक टेक्स्ट, और विज़ुअल शार्पनेस की पुष्टि करें।
Chrome DevTools में Network खोलें, कैश डिसेबल करके रीलोड करें या Empty Cache And Hard Reload का उपयोग करें, इमेज रिक्वेस्ट्स फ़िल्टर करें और URL, ट्रांसफ़र साइज, हेडर्स, initiator, और टाइमिंग निरीक्षण करें। देर या बर्बाद काम बताने के लिए थ्रॉटल करें। viewport, device scale factor, स्लॉट, उम्मीदवार, ट्रांसफ़र्ड बाइट्स, और अपेक्षित परिणाम रिकॉर्ड करें।
जब कोई टेम्पलेट, ब्रेकपॉइंट, CDN, या एसेट पाइपलाइन बदलती है, इसे रिलीज़ गेट बनाएं। मरम्मत संकुचित रखें: sizes दुरुस्त करें, डिस्क्रिप्टर ठीक करें, क्रॉप पुनर्निर्मित करें, फॉलबैक बहाल करें, या अनावश्यक preload हटा दें। खाली-कैश रीलोड पर पुन: परीक्षण करें।
Network पैनल वास्तव में किए गए उम्मीदवार रिक्वेस्ट को रिकॉर्ड करता है।
यह इमेज डिलिवरी व्यवहार की पुष्टि करता है, न कि origin क्षमता, CDN उपलब्धता, या समग्र अपटाइम।
इसे SIU रेज़िलियंस कंट्रोल के रूप में लागू करें
रेस्पॉन्सिव इमेजेज़ अनावश्यक ट्रांसफर कम करते हैं पर सफल रिक्वेस्ट की गारंटी नहीं दे सकते। origin एरर, अनुपलब्ध ट्रांसफ़ॉर्मेशन, थर्ड-पार्टी होस्ट, और CDN फेलियर्स के लिए अलग कॉन्टिन्यूटी और रिकवरी योजना चाहिए।
SIU के लिए टेस्ट रिकॉर्ड्स का उपयोग डिलिवरी रिग्रेशन को जल्दी पकड़ने, ज़िम्मेदार टेम्पलेट या ट्रांसफॉर्मेशन नियम की पहचान करने, और लॉन्च से पहले सबसे छोटा सुरक्षित सुधार करने के लिए करें। इसे उपलब्धता प्रीफ्लाइट और रोलबैक योजना के साथ पेयर करें।
हर फेल्ड सेलेक्शन चेक के लिए एक कंपोनेंट और इमेज-पाइपलाइन मालिक निर्दिष्ट करें।