वेब 2019 पर चित्र

छवियों को प्रदर्शित करने में समस्या इंटरनेट पर अनुकूलनशीलता के आगमन के बाद से उत्पन्न हुई है। हम चाहते हैं कि साइट किसी भी टैबलेट, फोन, पोर्ट्रेट या लैंडस्केप स्क्रीन ओरिएंटेशन में और साथ ही सुपर-लार्ज 5K डिस्प्ले पर अच्छी दिखे। इसके अलावा, बाजार में उच्च पिक्सेल घनत्व (DPI) के साथ रेटिना डिस्प्ले होते हैं, जहां नियमित छवियां धुंधली दिखाई देती हैं। मोबाइल ट्रैफ़िक का हिस्सा बढ़ रहा है, और बड़े संसाधन आर्थिक रूप से लोडिंग छवियों के उद्देश्य से हैं। आइए देखें कि वे एप्पल, टिल्डा और ब्लॉग प्लेटफॉर्म मीडियम की वेबसाइटों पर इन समस्याओं को कैसे हल करते हैं।

Apple: बैकग्राउंड-इमेज पावर यूजर

ऐप्पल अपने उत्पादों के लिए डिजाइन पर निर्भर करता है, छवि प्रदर्शन अनुसंधान पर एक मजबूत फोकस के साथ। Apple वेबसाइट पर - इस लेखन के समय - छवि अनुकूलन CSS क्षमताओं द्वारा प्रदान किया जाता है, अधिक सटीक रूप से, पृष्ठभूमि-छवि। इस दृष्टिकोण का मुख्य सिद्धांत ब्रेकपॉइंट्स के बीच एक निश्चित छवि चौड़ाई है, अर्थात, "रबर" छवियों की अस्वीकृति। साइट www.apple.com/mac से छवियों में से एक के उदाहरण पर विचार करें

<figure class="imac-image" data-progressive-image=""></figure> 

 .section-imac .imac-image { width:939px; height:631px; background-size:939px 631px; background-repeat:no-repeat; background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_large.jpg"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .section-imac .imac-image { background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_large_2x.jpg") } } @media only screen and (max-width: 1068px) { .section-imac .imac-image { width:795px; height:536px; background-size:795px 536px; background-repeat:no-repeat; background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_medium.jpg") } } @media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) { .section-imac .imac-image { background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_medium_2x.jpg") } } @media only screen and (max-width: 735px) { .section-imac .imac-image { width:365px; height:246px; background-size:365px 246px; background-repeat:no-repeat; background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_small.jpg") } } @media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) { .section-imac .imac-image { background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_small_2x.jpg") } } 

क्रॉस-ब्राउज़र संगतता के लिए, स्क्रीन पिक्सेल घनत्व सेट करने के लिए तुरंत तीन तरीकों का उपयोग किया जाता है:

-वेबकिट-मिन-डिवाइस-पिक्सेल-अनुपात: 1.5
न्यूनतम रिज़ॉल्यूशन: 1.5dppx
न्यूनतम रिज़ॉल्यूशन: 144 डीपीआई

इस दृष्टिकोण के पेशेवरों और विपक्ष क्या हैं?

आकर्षण आते हैं

1. कार्यान्वयन में आसानी। यह शायद स्क्रीन के एक निश्चित आकार और घनत्व में छवि को बदलने का सबसे समझ में आने वाला तरीका है।
2. सभी समस्याओं का कवरेज: स्क्रीन आकार और पिक्सेल घनत्व के मुद्दे पर ध्यान दिया जा रहा है।
3. पूर्व-निर्धारित आकारों के लिए कोई जम्पिंग लेआउट नहीं।
4. आप पृष्ठभूमि के साथ काम करने के लिए अंतर्निहित सीएसएस सुविधाओं का उपयोग कर सकते हैं (प्रभाव के लिए मिश्रण-मोड, स्थिति - यदि आवश्यक हो तो छवि को क्रॉप करें)।

विपक्ष

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

बचाव के लिए सीएसएस प्रीप्रोसेसर

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

 @mixin image($width, $height, $url) { width: $width; height: $height; background-size: $width $height; background-repeat:no-repeat; background-image:url($url); } 

चलो चर सेट करें:

 $breakpoints: ( 'phone': 735px, 'tablet': 1068px ); $media-expressions: ( 'screen': 'only screen', 'retina': '(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx), (min-resolution: 144dpi)' ); 

हमें एक SCSS मिलता है जो Apple के CSS में एक-एक को संकलित करता है:

 .section-imac .imac-image { @include image(939px, 631px, "image_large.jpg"); } @include media('screen', 'retina') { .section-imac .imac-image { @include image(939px, 631px, "image_large2x.jpg"); } } @include media('screen', '<=tablet') { .section-imac .imac-image { @include image(795px, 536px, "image_medium.jpg"); } } @include media('screen', '<=tablet', 'retina') { .section-imac .imac-image { @include image(795px, 536px, "image_medium_2x.jpg"); } } @include media('screen', '<=phone') { .section-imac .imac-image { @include image(365px, 246px, "image_small.jpg"); } } @include media('screen', '<=phone', 'retina') { .section-imac .imac-image { @include image(365px, 246px, "image_small_2x.jpg"); } } 

सारांश

यदि आपके पास बहुत सारी तस्वीरें नहीं हैं या उनके साथ रहने के लिए यह एक शानदार तरीका है, तो वे शायद ही कभी बदल सकें।

टिल्डा: ब्लर इफेक्ट वाली बैकग्राउंड-इमेज

टिल्डा एक साइट बिल्डर है जो छवियों को प्रदर्शित करने के लिए विभिन्न घटक प्रदान करता है। "आलसी" अपलोड चित्रों के सबसे आसान तरीके पर विचार करें। किसी चित्र को लोड करने से पहले html कैसा दिखता है:

 <div data-original="https://static.tildacdn.com/image.jpg" style="background: rgba(0, 0, 0, 0) url(https://static.tildacdn.com/image-small.jpg) no-repeat scroll center center / cover;"> </div> 

इस तथ्य के कारण धब्बा प्रभाव प्राप्त किया जाता है कि पूर्वावलोकन में एक छोटा आकार (20x20 पिक्सेल) है, लेकिन आवरण की सीएसएस संपत्ति की मदद से, चित्र पूरी चौड़ाई और ऊंचाई तक फैला हुआ है। माइनस: यह धुंधला बहुत अच्छा नहीं दिखता है, लेकिन यह बहुत सरल है और प्रोसेसर को अधिभार नहीं देता है।

लोड करने के बाद, पूर्ण आकार की छवि को केवल इनलाइन शैली में प्रतिस्थापित किया जाता है।

आकर्षण आते हैं

1. आलसी लोडिंग।
2. बनाए रखना आसान है।

विपक्ष

1. किसी भी डिवाइस के लिए एक ही तस्वीर। अनुकूलनशीलता को केवल स्टाइलाइजेशन की सीमा के भीतर लागू किया जाता है (चित्र को बस अलग-अलग तरीकों से क्रॉप किया जाता है)।
2. बदसूरत धुंधला प्रभाव।
3. धब्बा और पूर्ण संकल्प के बीच कोई संक्रमण नहीं है।

सारांश

यह एक कामकाजी तरीका है यदि आपको एक सरल घटक की आवश्यकता है और विभिन्न स्क्रीन रिज़ॉल्यूशन के लिए छह या अधिक चित्रों से परेशान नहीं करना चाहते हैं। बहुत सारी तस्वीरों वाली साइटों के लिए अच्छा है।

मध्यम: कैनवास धुंधला

मध्यम.कॉम ब्लॉगिंग प्लेटफॉर्म ने अंडरलोड छवियों के लिए सुंदर धुंधला प्रभाव के कारण वेब छवियों की दुनिया में बड़ा बदलाव किया है। स्टैब्लब्ल-कैनवास लाइब्रेरी का उपयोग करके यह प्रभाव प्राप्त किया जाता है।




HTML एक सैंडविच की तरह दिखता है:

 <img src="placeholder.jpg"> <canvas> <img src="full-size.jpg"> 

यह आपको एक चिकनी संक्रमण के प्रभाव का एहसास करने की अनुमति देता है। पूर्ण आकार के चित्र के लिए, प्रारंभ में अस्पष्टता: 0 सीएसएस संक्रमण से अपारदर्शिता के माध्यम से जाती है: 1।

कलंक लड़ाई: सीएसएस बनाम एसवीजी बनाम कैनवस

इसलिए, यदि हम Apple नहीं हैं, तो सबसे अधिक संभावना है कि चित्रों के आलसी लोडिंग और धब्बा प्रभाव का उपयोग करना अधिक सुविधाजनक होगा। फिलहाल ब्लेयर इफ़ेक्ट बनाने के कम से कम तीन तरीके हैं (और टिल्डा का एक अन्य विकल्प, लेकिन हम इस पर विचार नहीं करेंगे, क्योंकि यह "वास्तविक" ब्लेयर नहीं है)।
यदि आप पहले से ही सीएसएस ब्राउज़र में निर्मित धुंधला हो जाने के लिए फ़िल्टर करते हैं, तो धुंधला होने के लिए स्टैकब्लाउर-कैनवास का उपयोग करने के लायक क्यों है?

1. समस्याओं। सीएसएस और एसवीजी डिफ़ॉल्ट रूप से छवि के किनारों को फ़िल्टर करते हैं। अंतर्निहित फ़िल्टर के लिए svg फ़िल्टर के लिए एक विशेष समाधान है : ब्लर () आपको क्रॉपिंग का उपयोग करना होगा।
2. प्रदर्शन। Stackblur-कैनवस बहुत तेजी से काम करता है, सीएसएस फिल्टर भी तेजी से काम करते हैं, इसलिए बड़ी संख्या में धुंधली छवियों के साथ, विकल्प निश्चित रूप से सीएसएस फिल्टर के लिए है।
3. सौंदर्य। यहां, सब्जेक्टली, लेकिन मेरी राय में स्टैकब्लूर अधिक सुंदर दिखता है। एक svg फिल्टर में बदसूरत कलाकृतियां हैं।

चित्र टैग - विकासवाद का शिखर

बहुत शुरुआत में, हमने Apple विधि का वर्णन किया और पाया कि css में स्क्रीन आकार और पिक्सेल घनत्व दोनों के लिए मीडिया के भाव हैं। और उन्हें प्रदर्शन के लिए एक विशिष्ट चित्र का चयन करने के लिए एक साथ उपयोग किया जा सकता है। एक महत्वपूर्ण दोष यह है कि पृष्ठभूमि पर चित्र इसके पहलू अनुपात को "नहीं जानता" है, "रबर" नहीं हो सकता है। इसके अलावा, वेब के शब्दार्थों के दृष्टिकोण से, सभी छवियों को एक पंक्ति में प्रदर्शित करने के लिए पृष्ठभूमि का उपयोग करना गलत है।

Img टैग में srcset विशेषता हो सकती है, लेकिन आपको एक स्क्रीन आकार या पिक्सेल घनत्व चुनना होगा - आप इन मापदंडों को संयोजित नहीं कर सकते।

चित्र टैग इस खामी से मुक्त है, और, जैसे img, यह "पहलू अनुपात" जानता है। पहले से ही, यह 92% ब्राउज़रों द्वारा समर्थित है। यह टैग उन लोगों के लिए उपयुक्त है जो IE के लिए अनुकूल नहीं हो सकते।

इंटरसेक्शन ऑब्जर्वर एपीआई

अंत में, चलो आलसी लोडिंग चित्रों के कार्यान्वयन के बारे में बात करते हैं। क्लासिक दृष्टिकोण स्क्रॉल, संयोजन, और ओरिएंटचेंज घटनाओं के संयोजन का उपयोग करना है और स्क्रीन के दृश्य क्षेत्र के सापेक्ष किसी विशेष चित्र की स्थिति की गणना करना है।

2019 में, आप बैसाखी के सेट को एक विशेष ब्राउज़र एपीआई - चौराहे पर्यवेक्षक के साथ बदल सकते हैं। यह सभी आधुनिक ब्राउज़रों द्वारा समर्थित है। पुराने iOS और IE के लिए, आपको आधिकारिक w3c पॉलीफ़िल का उपयोग करना चाहिए।

भविष्य पर एक नज़र: पूरी खुशी के लिए और क्या याद आ रही है

तो, हमारे पास पहले से ही एक तस्वीर टैग है, जिसमें अच्छा ब्राउज़र समर्थन है, लेकिन आलसी लोडिंग की समस्या बनी हुई है। हमें अभी भी चौराहे के पर्यवेक्षक या जेएस घटनाओं के संयोजन के आधार पर अपने स्वयं के कार्यान्वयन पर भरोसा करने की आवश्यकता है। ब्राउज़र कब एक देशी समाधान पेश करेंगे? उदाहरण के लिए, क्रोम संस्करण 75 में img और iframe टैग के लिए लोडिंग संपत्ति के लिए समर्थन प्रदान करने का वादा किया गया है। आप तस्वीर के प्रोटोटाइप में एक संपत्ति की उपस्थिति की जांच करके आलसी लोडिंग के लिए मूल समर्थन के लिए अपने घटकों को अपडेट कर सकते हैं: यदि सफल हो, तो आप अपने स्वयं के आलसी लोडिंग कोड को छोड़ सकते हैं, क्योंकि सब कुछ आपके लिए ब्राउज़र द्वारा किया जाएगा!

 if ('loading' in HTMLImageElement.prototype) 

सीएमएस और उपयोगकर्ता सामग्री

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

परिणाम

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