Img टैग में Srcset webkit विशेषता मार्गदर्शिका

नि: शुल्क WebKit इंजन अब छवियों, IMG तत्वों ( W3C से आधिकारिक विनिर्देश ) के srcset विशेषता का समर्थन करता है। यह आपको एक डेवलपर के रूप में, अन्य उपयोगकर्ताओं को नुकसान पहुँचाए बिना रेटिना डिस्प्ले का उपयोग करने वाले उपयोगकर्ताओं के लिए उच्च-रिज़ॉल्यूशन छवियों का उपयोग करने की अनुमति देता है। उन ब्राउज़रों के लिए एक सुरुचिपूर्ण समाधान की उपस्थिति को नोट करना भी महत्वपूर्ण है जो अभी तक इस कार्यक्षमता का समर्थन नहीं करते हैं।

रात में नवीनतम WebKit बिल्ड का उपयोग करने की आवश्यकता पर ध्यान दें।


आप जान सकते हैं कि WebKit एक साल से थोड़े समय के लिए -webkit- छवि-सेट सीएसएस फ़ंक्शन का समर्थन करता है (संस्करण 6 से सफारी और संस्करण 21 के बाद से Google क्रोम)। इस फ़ंक्शन का उपयोग करके, स्क्रीन या किसी अन्य प्लेबैक डिवाइस के रिज़ॉल्यूशन के आधार पर सीएसएस गुणों में छवियों को सेट करना संभव हो गया, प्रत्येक में 1x, 2x संशोधक।

.class { /*   ,     image-set */ background-image: url(image-set-not-supported.png); /*   ,    */ background-image: -webkit-image-set(url(low-res-image.jpg) 1x, url(high-res-image.jpg) 2x); } 

यह ब्राउज़र को उपयोगकर्ता के डिवाइस के लिए सबसे अच्छा विकल्प चुनने की अनुमति देगा। बड़ी छवियों का समर्थन करने से पहले, आपके पास कई विकास पथ थे, जिनमें से प्रत्येक में कुछ कमियां थीं। आप CSS कोड डुप्लिकेट कर सकते हैं। आप जावास्क्रिप्ट का उपयोग क्वेरी (window.devicePixelRatio) प्रति px डॉट्स की संख्या में कर सकते हैं। (डिवाइस पिक्सेल अनुपात) और पेज लोड होने के बाद ताज़ा चित्र। या आप हमेशा बड़ी तस्वीरें दे सकते हैं, जिससे कुछ उपयोगकर्ताओं को बहुत अधिक लोड करने के लिए मजबूर होना पड़ता है। और यदि आपको विभिन्न प्रस्तावों के साथ छवियों की आवश्यकता है, तो आपको संबंधित सीएसएस गुणों को परिष्कृत करना होगा, जैसे कि पृष्ठभूमि-आकार सीमा-छवि के हिस्से के रूप में। यह कष्टप्रद था।

सौभाग्य से, -webkit- छवि-सेट आपको एक सरल नियम लिखने की अनुमति देता है, जिससे ब्राउज़र को स्वयं सबसे उपयुक्त चित्र निर्धारित करने के लिए मजबूर किया जाता है और, परिणामस्वरूप, इसे अपलोड करें।

Srcset विशेषता -webkit-image-set के समान है। वास्तव में, कोई एक विशेषता को एक समान सीएसएस फ़ंक्शन के रूप में सोच सकता है। इन -बेट-इमेज-सेट में चित्रों की सूची के समान, आप अपने ग्राफिक तत्वों में एक नया srcset विशेषता जोड़ते हैं। पिछड़ी संगतता का समर्थन किया जाता है, जो ब्राउज़र srcset का समर्थन नहीं करते हैं वे इसे अनदेखा करते हैं और src का उपयोग करना जारी रखते हैं। और संपूर्ण आकर्षण यह है कि ब्राउज़र इंजन srcset को देखता है और यह डाउनलोड करने के लिए सबसे अच्छी तस्वीर निर्धारित करेगा। ज्यादातर मामलों में, आपको इस तरह लिखना होगा:

 <img src="normal-image.jpg" srcset="better-image.jpg 2x"> 

"बेहतर" image.jpg "के बाद" 2x "नोटिस?" यह ब्राउज़र को बताता है कि डिवाइस स्क्रीन के लिए डिवाइसपिक्सल अनुपात = 2 या उससे अधिक के लिए, आपको सामान्य-छवि के बजाय बेहतर image.jpg का उपयोग करने की आवश्यकता है। जेपीजी। और अगर डिवाइस की स्क्रीन "रेटिना" नहीं है, तो ब्राउज़र src विशेषता तक पहुंच जाएगा। आप srcset विशेषता का मान 1x भी सेट कर सकते हैं, जैसा कि नीचे दिए गए उदाहरण में दिया गया है।



आप आधिकारिक विनिर्देश में srcset के बारे में अधिक पढ़ सकते हैं। कृपया ध्यान दें कि फिलहाल केवल WebKit "रिज़ॉल्यूशन कारकों" का समर्थन करता है - 1x, 2x, 3x। किसी भी नई कार्यक्षमता की तरह, WebKit में त्रुटियां हो सकती हैं, इसलिए सावधान रहें। विशेष रूप से, आपको यह सुनिश्चित करना होगा कि WebKit पृष्ठ के लिए न्यूनतम संसाधनों को लोड करता है, क्योंकि यह इस फ़ंक्शन के लक्ष्यों में से एक है।

इस कार्यशीलता के विकास में महत्वपूर्ण योगदान (r153624, r153733) वेबकेट समुदाय के सदस्यों रोमेन पेरियर और योव वीस के लिए विशेष धन्यवाद।

PS पीएम में अनुवाद नोट्स भेजें।