एरिक पोर्टिस मुझे उत्तरदायी छवियों की दुनिया में खुदाई करने के लिए जोड़ता है।
हम मूल बातें शुरू करते हैं। उत्तरदायी छवियां HTML में विशेष रूप से छवियां हैं और बेहतर प्रदर्शन की इच्छा के कारण मौजूद हैं। वेबसाइटों के समग्र भार में छवियां शायद सबसे बड़ी अपराधी हैं। अगर हम पूरे नेटवर्क में बहुत सारे पिक्सेल भेजने से बच सकते हैं, तो हमें करना चाहिए। आखिरकार, एक स्क्रीन जो केवल 720 पिक्सेल चौड़ी है, उसे 2000 पिक्सेल चौड़ी छवि की आवश्यकता नहीं है, भले ही यह 2x डिस्प्ले हो।
परेशानी यह है कि ब्राउज़र छवियों की तरह संपत्ति डाउनलोड करने के बारे में वास्तव में आक्रामक हैं। यह अच्छा है, क्योंकि यह वेब (जितना हो सकता है) उतना ही तेज है। लेकिन इसका मतलब यह भी है कि हमें HTML में अपनी छवियों के बारे में सही जानकारी प्रदान करने की आवश्यकता है। क्या कोई ब्राउज़र नहीं जान सकता है कि छवि कितनी बड़ी है? इसे डाउनलोड करने के बाद, निश्चित रूप से यह कर सकता है। क्या कोई ब्राउज़र यह नहीं जान सकता है कि पृष्ठ पर कितनी बड़ी छवि दिखाई जा रही है? यकीन है कि यह सभी सीएसएस और प्रदर्शन लेआउट डाउनलोड करने के बाद कर सकते हैं। उत्तरदायी छवियां सिंटैक्स सभी को उस सिंटैक्स में सही जानकारी प्रदान करके आगे बढ़ने की कोशिश करता है। पता लगाना कि वाक्यविन्यास मुश्किल है! नहीं है srcset, sizesहै, और तत्व है, और वहाँ वहाँ के आसपास अपने मन लपेटो करने एक टन है।
यह अभी भी अधिक जटिल है।
आपके द्वारा बनाए गए सिंटैक्स को उस छवि की कई प्रतियों के आसपास आधारित होना है जिसमें सिंटैक्स का निर्माण करना है। आप उन्हें कैसे बनाते हैं? आपको कितने बनाने चाहिए? उनका आकार कितना होना चाहिए?
सौभाग्य से, कुछ स्वचालित टूलिंग है जो संवेदनशील छवियों के आसपास पॉपिंग करते हैं। वर्डप्रेस एक शुरुआती खिलाड़ी था। बॉक्स से बाहर, वर्डप्रेस आपके द्वारा अपलोड किए गए चित्रों के कई संस्करण और srcsetसिंटैक्स के साथ आउटपुट टैग बनाएगा । लेकिन आप ज्यादा बेहतर कर सकते हैं। आप एक sizesविशेषता प्रदान कर सकते हैं जो वास्तव में आपकी थीम से मेल खाती है और यह उन छवियों को कैसे आकार दे रही है।
इसके अलावा, वर्डप्रेस आपके द्वारा अपलोड की गई छवियों की कई प्रतियां बनाने के लिए किसी विशेष खुफिया का उपयोग नहीं करता है। लेकिन, यह कर सकता था। उत्तरदायी छवि ब्रेकपॉइंट जनरेटर की तरह एक उपकरण यह पता लगाने के लिए कुछ बुद्धिमत्ता का उपयोग करता है कि आप कितनी अलग-अलग छवियां बना सकते हैं, इसलिए आप नौकरी के लिए सही छवि के करीब होने और सैकड़ों या हजारों प्रतियों की आवश्यकता नहीं होने के बीच संतुलन बना सकते हैं। यह। उस टूल में एक एपीआई है!
यह अभी भी अधिक जटिल है।
विभिन्न ब्राउज़र अलग-अलग छवि स्वरूपों का समर्थन करते हैं। उदाहरण के लिए, वेबपी। सही ब्राउज़र में सही छवि प्रारूप की सेवा करके प्रदर्शन बचत की जानी चाहिए। उत्तरदायी छवियां सिंटैक्स इसके साथ मदद कर सकती हैं, लेकिन यह सिंटैक्स को जटिल बनाता है। कई छवि प्रारूपों में गुणवत्ता की भी धारणा है। आप इन एकाधिक प्रतियों को किस गुणवत्ता में सहेजते हैं?
इस समय, यह क्लाउडिनरी का उल्लेख करने के लिए एक अच्छा समय है। मैंने इसे अभी सीएसएस-ट्रिक्स पर एकीकृत किया है, और यह इस सामान के साथ बहुत मदद करता है। मुझे यह उल्लेख करना चाहिए कि मैं भुगतान करने वाला क्लाउडिनरी ग्राहक हूं, और यह स्क्रैंकास्ट प्रायोजित नहीं था, लेकिन क्लाउडिनरी ने सीएसएस-ट्रिक्स को दो उच्च संबंधित प्रायोजित पोस्ट के रूप में प्रायोजित किया है:
- क्लाउड 1 के साथ वर्डप्रेस में उत्तरदायी छवियां, भाग 1
- क्लाउड 2 के साथ वर्डप्रेस में उत्तरदायी छवियां, भाग 2
संक्षेप में, यहां बताया गया है कि अब यह सभी CSS-Tricks पर कैसे काम करता है:
- मैं छवियों को वैसे ही अपलोड करता हूं जैसे मैं हमेशा वर्डप्रेस के साथ करता हूं।
srcsetवर्डप्रेस के साथ उत्पन्न होने वाली जानकारी के बजाय , यह इस स्मार्ट एपीआई द्वारा उत्पन्न होती है।- छवि को क्लाउडिनरी पर भी अपलोड किया गया है।
- जब वर्डप्रेस छवियों के लिए HTML को फ़िल्टर और आउटपुट करता है, तो वह सभी अच्छा
srcset(और कस्टमsizes) डेटा लागू होता है। क्लाउड URL के URL का बिंदु। - क्लाउडिनरी URL मे क्लाउडिनरी की क्षमता का उपयोग करता है ताकि निश्चित रूप से चीजें बनाने के लिए प्रारूप और गुणवत्ता दोनों को स्वचालित रूप से समायोजित कर सकें (अपनी फैंसी तकनीक का उपयोग करके) यह सुनिश्चित करने के लिए कि वे छवि के अनुरोध करने वाले विशेष ब्राउज़र के लिए सबसे अच्छे हैं।
- पुरानी छवियां जिन्हें क्लाउडिनरी में अपलोड नहीं किया गया था, वे अभी भी सभी क्लाउडिनरी अच्छाई से लाभान्वित हैं। उनके पास
srcsetडेटा के रूप में स्मार्ट नहीं है , लेकिन वे अभी भी "भ्रूण" URL का उपयोग करते हैं, जिसका अर्थ है कि वे ऑटो स्वरूपण और ऑटो गुणवत्ता (जो शायद प्रदर्शन में सुधार का एक सभ्य सा है, वैसे भी) से लाभ उठा सकते हैं।
संक्षेप में, न केवल मैं प्रदर्शन के साथ मदद करने के लिए सीएसएस-ट्रिक्स पर उत्तरदायी छवियों का उपयोग कर रहा हूं, क्लाउडिनिटी एकीकरण उस गेम को गंभीरता से उठाता है।
मुझे खुशी है कि यह एक कठिन निर्भरता नहीं है। अगर कभी क्लाउड प्लगइन बंद हो जाता है, तो सब कुछ सामान्य वर्डप्रेस उत्तरदायी छवियों पर वापस चला जाता है।