एक तस्वीर 1, 000 शब्दों के बराबर होती है और इमेज हर पेज का अहम हिस्सा होती हैं. हालांकि, डाउनलोड की गई ज़्यादातर बाइट भी अक्सर इनमें शामिल की जाती हैं. रिस्पॉन्सिव वेब डिज़ाइन की वजह से, हमारे लेआउट में डिवाइस की विशेषताओं के मुताबिक, बल्कि इमेज के हिसाब से भी बदलाव हो सकते हैं.
रिस्पॉन्सिव वेब डिज़ाइन का मतलब है कि डिवाइस की विशेषताओं के हिसाब से न सिर्फ़ हमारे लेआउट में बदलाव हो सकते हैं, बल्कि कॉन्टेंट में भी बदलाव हो सकते हैं. उदाहरण के लिए, हाई रिज़ॉल्यूशन (2x) वाले डिसप्ले पर, हाई रिज़ॉल्यूशन वाले ग्राफ़िक की मदद से इमेज की क्वालिटी साफ़ होती है. अगर ब्राउज़र की चौड़ाई 800px है, तो 50% चौड़ाई वाली इमेज ठीक से काम कर सकती है, लेकिन पतले फ़ोन पर बहुत ज़्यादा रीयल एस्टेट का इस्तेमाल किया जाता है. साथ ही, छोटी स्क्रीन में फ़िट करने के लिए छोटी स्क्रीन में फ़िट करने के लिए समान बैंडविथ की ज़रूरत होती है.
कला निर्देश
कभी-कभी इमेज को ज़्यादा बड़े पैमाने पर बदलना पड़ सकता है. जैसे, अनुपात बदलना, काटना, और पूरी इमेज को बदलना. इस मामले में, इमेज बदलने को आम तौर पर आर्ट डायरेक्शन कहा जाता है. ज़्यादा उदाहरणों के लिए, responsiveimages.org/demos/ देखें.
रिस्पॉन्सिव इमेज
क्या आपको पता है कि किसी वेब पेज को लोड करने के लिए, इमेज की औसतन 60% से ज़्यादा बाइट होती हैं?
इस कोर्स में, आप जानेंगे कि मॉडर्न वेब पर इमेज पर कैसे काम किया जाता है, ताकि आपकी इमेज अच्छी दिखें और किसी भी डिवाइस पर तेज़ी से लोड हों.
अपने डेवलपमेंट वर्कफ़्लो में रिस्पॉन्सिव इमेज को आसानी से शामिल करने के लिए, आपको अलग-अलग तरह के कौशल और तकनीक सीखने को मिलेंगे. इस कोर्स के आखिर में, आपको ऐसी इमेज डेवलप करनी होंगी जो व्यूपोर्ट के अलग-अलग साइज़ और इस्तेमाल की स्थितियों के हिसाब से हों.
यह Udacity के ज़रिए मुफ़्त में दिया जाने वाला कोर्स है
मार्कअप में मौजूद इमेज
img
एलिमेंट बेहतरीन है. यह कॉन्टेंट को डाउनलोड, डिकोड, और रेंडर करता है. इसे मॉडर्न ब्राउज़र पर कई तरह के इमेज फ़ॉर्मैट के साथ इस्तेमाल किया जा सकता है. सभी डिवाइसों पर काम करने वाली इमेज शामिल करना, डेस्कटॉप पर दिखने वाली इमेज से अलग नहीं है. साथ ही, बेहतर अनुभव देने के लिए सिर्फ़ कुछ मामूली बदलावों की ज़रूरत होती है.
खास जानकारी
- इमेज के मिलते-जुलते साइज़ का इस्तेमाल करें, ताकि उन्हें गलती से कंटेनर से बाहर ले जाने से रोका जा सके.
- डिवाइस की विशेषताओं (यानी आर्ट डायरेक्शन) के आधार पर अलग-अलग इमेज के बारे में बताने के लिए,
picture
एलिमेंट का इस्तेमाल करें. - अलग-अलग डेंसिटी में से चुनते समय सबसे अच्छी इमेज का इस्तेमाल करने के बारे में ब्राउज़र को संकेत देने के लिए,
img
एलिमेंट मेंsrcset
औरx
डिस्क्रिप्टर का इस्तेमाल करें. - अगर आपके पेज पर सिर्फ़ एक या दो इमेज हैं और इनका इस्तेमाल आपकी साइट पर कहीं और नहीं किया गया है, तो फ़ाइल से जुड़े अनुरोधों को कम करने के लिए इनलाइन इमेज का इस्तेमाल करें.
इमेज के लिए मिलते-जुलते साइज़ का इस्तेमाल करें
याद रखें कि इमेज की चौड़ाई तय करते समय मिलती-जुलती इकाइयों का इस्तेमाल करें, ताकि वे गलती से व्यूपोर्ट से बाहर न हो जाएं. उदाहरण के लिए, width: 50%;
की वजह से इमेज की चौड़ाई, उसके एलिमेंट का 50% होती है (न कि व्यूपोर्ट का 50% या पिक्सल साइज़ का 50%).
सीएसएस की मदद से, कॉन्टेंट को अपने कंटेनर से ओवरफ़्लो होने की अनुमति मिलती है. इसलिए, इमेज और अन्य कॉन्टेंट को ओवरफ़्लो होने से रोकने के लिए, आपको max-width: 100% का इस्तेमाल करना पड़ सकता है. उदाहरण के लिए:
img, embed, object, video {
max-width: 100%;
}
img
एलिमेंट पर alt
एट्रिब्यूट का इस्तेमाल करके, सही जानकारी देना न भूलें. इससे स्क्रीन रीडर और दूसरी सहायक टेक्नोलॉजी के बारे में जानकारी देकर, आपकी साइट को ज़्यादा आसानी से ऐक्सेस किया जा सकता है.
हाई डीपीआई डिवाइसों के लिए, srcset
की मदद से img
की क्वालिटी को बेहतर बनाएं
srcset
एट्रिब्यूट, img
एलिमेंट को बेहतर तरीके से इस्तेमाल करता है. इससे, डिवाइस की अलग-अलग विशेषताओं के लिए, एक से ज़्यादा इमेज फ़ाइलें आसानी से उपलब्ध कराई जा सकती हैं. सीएसएस के मूल image-set
सीएसएस फ़ंक्शन की तरह ही srcset
, ब्राउज़र को डिवाइस की विशेषताओं के आधार पर सबसे अच्छी इमेज चुनने की सुविधा देता है. उदाहरण के लिए, 2x डिसप्ले पर 2x इमेज का इस्तेमाल करना और आने वाले समय में सीमित बैंडविड्थ नेटवर्क पर, 2x डिवाइस पर 1x इमेज का इस्तेमाल करना.
<img src="photo.png" srcset="photo@2x.png 2x" ...>
srcset
के साथ काम न करने वाले ब्राउज़र पर, ब्राउज़र बस src
एट्रिब्यूट के ज़रिए बताई गई डिफ़ॉल्ट इमेज फ़ाइल का इस्तेमाल करता है. इसलिए, यह ज़रूरी है कि हमेशा एक 1x इमेज शामिल की जाए, जिसे किसी भी डिवाइस पर दिखाया जा सके, चाहे उसकी क्षमता
कुछ भी हो. srcset
का इस्तेमाल किए जाने पर, किसी भी अनुरोध से पहले इमेज/शर्तों की कॉमा-सेपरेटेड लिस्ट को पार्स किया जाता है. इसके बाद, सिर्फ़ सबसे सही इमेज डाउनलोड करके दिखाई जाती है.
हालांकि, शर्तों में पिक्सल की डेंसिटी से लेकर चौड़ाई और ऊंचाई तक, सब कुछ शामिल हो सकता है, लेकिन अभी पिक्सल डेंसिटी पर ही काम करता है. आने वाली सुविधाओं के साथ मौजूदा व्यवहार के बीच संतुलन बनाने के लिए, एट्रिब्यूट में सिर्फ़ 2x इमेज दें.
picture
के साथ रिस्पॉन्सिव इमेज में कला के निर्देश
डिवाइस की विशेषताओं के आधार पर इमेज बदलने, जिसे आर्ट डायरेक्शन भी कहा जाता है, picture
एलिमेंट का इस्तेमाल करें. picture
एलिमेंट, डिवाइस के साइज़, डिवाइस के रिज़ॉल्यूशन, स्क्रीन की दिशा वगैरह जैसी अलग-अलग विशेषताओं के आधार पर, इमेज के एक से ज़्यादा वर्शन उपलब्ध कराने के लिए, जानकारी देने वाले तरीके के बारे में बताता है.
picture
एलिमेंट का इस्तेमाल तब करें, जब कोई इमेज सोर्स एक से ज़्यादा डेंसिटी में मौजूद हो या जब कोई रिस्पॉन्सिव डिज़ाइन, कुछ तरह की स्क्रीन पर थोड़ी-बहुत अलग इमेज को लिखता है. video
एलिमेंट की तरह ही, कई source
एलिमेंट शामिल किए जा सकते हैं. इससे मीडिया क्वेरी या इमेज फ़ॉर्मैट के आधार पर अलग-अलग इमेज फ़ाइलें तय की जा सकती हैं.
<picture>
<source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
<source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
<img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>
ऊपर दिए गए उदाहरण में, अगर ब्राउज़र की चौड़ाई कम से कम 800px है, तो डिवाइस रिज़ॉल्यूशन के आधार पर head.jpg
या head-2x.jpg
का इस्तेमाल किया जाता है. अगर ब्राउज़र का साइज़ 450 पिक्सल और 800 पिक्सल के बीच है, तो डिवाइस के रिज़ॉल्यूशन के आधार पर head-small.jpg
या head-small-
2x.jpg
का फिर से इस्तेमाल किया जाता है. अगर स्क्रीन की चौड़ाई 450 पिक्सल से कम है और picture
एलिमेंट काम नहीं करता, तो ब्राउज़र इसकी जगह img
एलिमेंट को रेंडर करता है. साथ ही, यह हमेशा शामिल होना चाहिए.
सापेक्ष आकार की इमेज
जब इमेज का फ़ाइनल साइज़ नहीं पता होता, तो इमेज सोर्स के लिए डेंसिटी डिस्क्रिप्टर तय करना मुश्किल हो सकता है. यह खास तौर पर ऐसी इमेज के लिए सही है जो ब्राउज़र के साइज़ के हिसाब से ज़रूरत के हिसाब से चौड़ाई में होती हैं और डाइनैमिक होती हैं.
तय इमेज साइज़ और डेंसिटी देने के बजाय, हर इमेज के साइज़ की जानकारी दी जा सकती है. इसके लिए, इमेज एलिमेंट के साइज़ के साथ चौड़ाई का डिस्क्रिप्टर जोड़ें. इससे, ब्राउज़र अपने-आप पिक्सल डेंसिटी का पता लगा सकेगा और डाउनलोड के लिए सबसे अच्छी इमेज चुन सकेगा.
<img src="lighthouse-200.jpg" sizes="50vw"
srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
lighthouse-1800.jpg 1800w" alt="a lighthouse">
ऊपर दिया गया उदाहरण एक ऐसी इमेज रेंडर करता है जो व्यूपोर्ट की चौड़ाई (sizes="50vw"
) से आधी होती है. ब्राउज़र की चौड़ाई और डिवाइस के पिक्सल अनुपात के आधार पर, ब्राउज़र सही इमेज चुन सकता है, फिर चाहे ब्राउज़र विंडो कितनी भी बड़ी हो. उदाहरण के लिए, नीचे दी गई टेबल में वह इमेज दिखाई गई है जिसे ब्राउज़र चुनेगा:
ब्राउज़र की चौड़ाई | डिवाइस पिक्सल का अनुपात | इस्तेमाल की गई इमेज | असरदार रिज़ॉल्यूशन |
---|---|---|---|
400 पिक्सल | 1 | 200.jpg |
1x |
400 पिक्सल | 2 | 400.jpg |
2x |
320 पिक्सल | 2 | 400.jpg |
2.5 गुना |
600 पिक्सल | 2 | 800.jpg |
2.67 गुना |
640 पिक्सल | 3 | 1000.jpg |
3.125 गुना |
1100 पिक्सल | 1 | 800.png |
1.45 गुना |
रिस्पॉन्सिव इमेज में ब्रेकपॉइंट के लिए खाता
कई मामलों में, साइट के लेआउट ब्रेकपॉइंट के आधार पर इमेज का साइज़ बदल सकता है. उदाहरण के लिए, छोटी स्क्रीन पर हो सकता है कि बड़ी स्क्रीन पर इमेज को व्यूपोर्ट की पूरी चौड़ाई में दिखाया जाए. हालांकि, इमेज का साइज़ छोटा होना चाहिए.
<img src="400.png"
sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
srcset="100.png 100w, 200.png 200w, 400.png 400w,
800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">
ऊपर दिए गए उदाहरण में sizes
एट्रिब्यूट, इमेज का साइज़ बताने के लिए कई मीडिया क्वेरी का इस्तेमाल करता है. जब ब्राउज़र की चौड़ाई 600 पिक्सल से ज़्यादा होती है, तो इमेज की चौड़ाई
व्यूपोर्ट की चौड़ाई से 25% ज़्यादा होती है. 500 पिक्सल और 600 पिक्सल के बीच होने पर, इमेज की चौड़ाई व्यूपोर्ट की 50% और 500 पिक्सल से कम होती है.
प्रॉडक्ट की इमेज को बड़ा होने लायक बनाएं
ग्राहक देखना चाहते हैं कि वे क्या खरीद रहे हैं. रीटेल साइटों पर, उपयोगकर्ता बेहतर तरीके से जानकारी दिखाने के लिए प्रॉडक्ट के हाई रिज़ॉल्यूशन वाले क्लोज़अप दिखाने की उम्मीद करते हैं. साथ ही, ऐसा न कर पाने पर अध्ययन करने वाले लोग निराश हो जाते हैं.
टैप किए जा सकने वाले और बड़े हो सकने वाले इमेज का एक अच्छा उदाहरण, जे॰ क्रू साइट. ओवरले न दिखने का मतलब है कि इमेज को टैप किया जा सकता है. इससे, ज़ूम इन की गई इमेज मिलती है और बारीकी से इमेज दिखती है.
इमेज की अन्य तकनीकें
कंप्रेस की गई इमेज
कंप्रेसिव इमेज तकनीक से सभी डिवाइसों पर बहुत ज़्यादा कंप्रेस की गई 2x इमेज मिलती है, चाहे डिवाइस की असल क्षमता कुछ भी हो. इमेज के टाइप और कंप्रेस किए हुए लेवल के हिसाब से, इमेज की क्वालिटी में कोई बदलाव नहीं दिख सकता है, लेकिन फ़ाइल का साइज़ बहुत कम हो जाता है.
JavaScript से इमेज बदलना
JavaScript से इमेज बदलने की सुविधा, डिवाइस की क्षमताओं की जांच करती है और "सही काम करती है". डिवाइस पिक्सल का अनुपात
window.devicePixelRatio
की मदद से तय किया जा सकता है और स्क्रीन की चौड़ाई और ऊंचाई देखी जा सकती है.
इसके अलावा, हो सकता है कि आप navigator.connection
की मदद से कुछ इंटरनेट कनेक्शन स्निफ़ कर सकें या
नकली अनुरोध कर सकें. यह पूरी जानकारी इकट्ठा करने के बाद, यह तय किया जा सकता है कि कौनसी इमेज लोड करनी है.
इस तरीके का एक बड़ा नुकसान यह है कि JavaScript का इस्तेमाल करने का मतलब है कि इमेज लोड होने में तब तक देरी होगी, जब तक कि कम से कम लुक-आगे वाला पार्सर पूरा नहीं हो जाता. इसका मतलब है कि pageload
इवेंट चालू होने के बाद, इमेज डाउनलोड होना भी शुरू नहीं होंगी. इसके अलावा, इस बात की संभावना ज़्यादा है कि ब्राउज़र 1x और 2x, दोनों तरह की इमेज को डाउनलोड करेगा. इससे पेज का वज़न बढ़ जाएगा.
इनलाइन इमेज: रास्टर और वेक्टर
इमेज बनाने और सेव करने के दो बुनियादी तरीके हैं—और इससे यह तय होता है कि इमेज को रिस्पॉन्सिव तरीके से कैसे डिप्लॉय किया जाए.
रास्टर इमेज — जैसे कि फ़ोटोग्राफ़ और दूसरी इमेज को अलग-अलग रंगों के बिंदुओं की ग्रिड के तौर पर दिखाया जाता है. रास्टर इमेज किसी कैमरा या स्कैनर से ली जा सकती हैं या इन्हें एचटीएमएल कैनवस एलिमेंट से बनाया जा सकता है. रास्टर इमेज को सेव करने के लिए PNG, JPEG, और WebP जैसे फ़ॉर्मैट इस्तेमाल किए जाते हैं.
लोगो और लाइन आर्ट जैसी वेक्टर इमेज को कर्व, लाइन, आकार, फ़िल कलर, और ग्रेडिएंट के सेट के तौर पर परिभाषित किया जाता है. वेक्टर इमेज को Adobe Illustrator या Inkscape जैसे प्रोग्राम की मदद से बनाया जा सकता है या SVG जैसे वेक्टर फ़ॉर्मैट का इस्तेमाल करके कोड में हाथ से लिखा जा सकता है.
SVG
SVG की मदद से, किसी वेब पेज में रिस्पॉन्सिव वेक्टर ग्राफ़िक शामिल करना आसान हो जाता है. रास्टर फ़ाइल फ़ॉर्मैट के बजाय वेक्टर फ़ाइल फ़ॉर्मैट का फ़ायदा यह है कि ब्राउज़र किसी भी साइज़ में वेक्टर इमेज को रेंडर कर सकता है. वेक्टर फ़ॉर्मैट इमेज की ज्यामिति के बारे में बताता है. इसका मतलब है कि इमेज को लाइनों, कर्वों, रंगों वगैरह से कैसे बनाया जाता है. दूसरी ओर, रास्टर फ़ॉर्मैट में सिर्फ़ रंग के अलग-अलग बिंदुओं के बारे में जानकारी होती है, इसलिए ब्राउज़र को यह अंदाज़ा लगाना होता है कि स्केल करते समय खाली जगहों को कैसे भरना है.
एक ही इमेज के दो वर्शन नीचे दिए गए हैं: बाईं ओर PNG इमेज और दाईं ओर SVG. SVG किसी भी साइज़ में अच्छी दिखती है, जबकि इसके बगल में मौजूद PNG इमेज, बड़े डिसप्ले साइज़ में धुंधली दिखने लगती है.
अगर आपको अपने पेज से किए जाने वाले फ़ाइल अनुरोधों की संख्या को कम करना है, तो SVG या डेटा यूआरआई फ़ॉर्मैट का इस्तेमाल करके, इमेज को इनलाइन कोड में बदलें. इस पेज का सोर्स देखने पर, आपको दिखेगा कि नीचे दिए गए दोनों लोगो को इनलाइन एलान किया गया है: डेटा यूआरआई और SVG.
SVG की मदद से मोबाइल और डेस्कटॉप, दोनों पर बहुत काम किया जा सकता है. साथ ही, ऑप्टिमाइज़ेशन टूल की मदद से SVG फ़ाइल का साइज़ काफ़ी कम हो सकता है. नीचे दिए गए दो इनलाइन SVG लोगो एक जैसे दिखते हैं, लेकिन एक का साइज़ 3 केबी और दूसरा सिर्फ़ 2 केबी का है:
डेटा यूआरआई
डेटा यूआरआई की मदद से फ़ाइल, जैसे कि इमेज को इनलाइन तरीके से शामिल किया जा सकता है. इसके लिए, यहां दिए गए फ़ॉर्मैट का इस्तेमाल करके, Base64 कोड में बदली गई स्ट्रिंग के तौर पर img
एलिमेंट के सोर्स को सेट किया जा सकता है:
<img src="data:image/svg+xml;base64,[data]">
ऊपर दिए गए HTML5 लोगो के लिए कोड की शुरुआत इस तरह से दिखती है:
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">
(पूरे वर्शन में 5,000 से ज़्यादा वर्ण हैं!)
ड्रैग 'एन' ड्रॉप टूल, जैसे कि jpillora.com/base64-encoder इमेज जैसी बाइनरी फ़ाइलों को डेटा यूआरआई में बदलने के लिए उपलब्ध है. SVG की तरह ही, डेटा यूआरआई, मोबाइल और डेस्कटॉप ब्राउज़र पर अच्छी तरह से काम करते हैं.
सीएसएस में इनलाइन करना
डेटा यूआरआई और SVG को भी सीएसएस में अंडरलाइन किया जा सकता है. यह मोबाइल और डेस्कटॉप, दोनों पर काम करता है. यहां एक जैसी दिखने वाली दो इमेज दी गई हैं, जिन्हें सीएसएस में बैकग्राउंड इमेज के तौर पर लागू किया गया है; एक डेटा यूआरआई, एक SVG:
फ़ायदे और नुकसान की जानकारी
इमेज के लिए इनलाइन कोड ज़्यादा शब्दों में हो सकता है—खास तौर पर, डेटा यूआरआई—तो आपको इसका इस्तेमाल क्यों करना चाहिए? एचटीटीपी अनुरोधों को कम करने के लिए! SVG और डेटा यूआरआई, एक ही अनुरोध से इमेज, सीएसएस, और JavaScript समेत पूरे वेब पेज को वापस पाने में मदद कर सकते हैं.
समस्या यह है कि:
- मोबाइल पर डेटा यूआरआई, बाहरी
src
की इमेज की तुलना में मोबाइल पर दिखने में काफ़ी धीमा हो सकते हैं. - डेटा यूआरआई, एचटीएमएल अनुरोध का साइज़ बढ़ा सकते हैं.
- ये आपके मार्कअप और आपके वर्कफ़्लो को मुश्किल बनाते हैं.
- डेटा यूआरआई फ़ॉर्मैट, बाइनरी (30% तक) से काफ़ी बड़ा होता है और डाउनलोड के साइज़ को कम नहीं करता.
- डेटा यूआरआई को कैश मेमोरी में सेव नहीं किया जा सकता. इसलिए, इन्हें हर उस पेज के लिए डाउनलोड करना ज़रूरी है जिस पर उनका इस्तेमाल किया गया है.
- वे IE 6 और 7 में समर्थित नहीं हैं, IE8 में अपूर्ण समर्थन करते हैं.
- एचटीटीपी/2 की मदद से, एसेट के अनुरोधों की संख्या कम होना, कम प्राथमिकता वाला हो जाएगा.
सभी चीज़ों के रिस्पॉन्सिव होने की तरह, आपको यह देखना होगा कि क्या सबसे अच्छा काम करता है. डाउनलोड फ़ाइल का साइज़, अनुरोधों की संख्या, और डाउनलोड होने में लगने वाले कुल समय को मापने के लिए डेवलपर टूल का इस्तेमाल करें. डेटा यूआरआई कभी-कभी रास्टर इमेज के लिए काम आ सकते हैं—उदाहरण के लिए, ऐसा होम पेज जिसमें सिर्फ़ एक या दो फ़ोटो हों जिन्हें कहीं और इस्तेमाल न किया गया हो. अगर आपको वेक्टर इमेज को इनलाइन करने की ज़रूरत है, तो SVG बेहतर विकल्प है.
सीएसएस में मौजूद इमेज
सीएसएस background
प्रॉपर्टी, एलिमेंट में मुश्किल इमेज जोड़ने के लिए एक बेहतरीन टूल है. इससे एक से ज़्यादा इमेज जोड़ना, उन्हें दोहराया जा सकता है, और कई दूसरे काम किए जा सकते हैं. मीडिया क्वेरी के साथ जोड़े जाने पर, बैकग्राउंड प्रॉपर्टी और भी बेहतर हो जाती है. इससे स्क्रीन रिज़ॉल्यूशन, व्यूपोर्ट के साइज़ वगैरह के आधार पर शर्तों के साथ इमेज लोड करने की सुविधा चालू हो जाती है.
खास जानकारी
- डिसप्ले की विशेषताओं के लिए सबसे अच्छी इमेज का इस्तेमाल करें. साथ ही, स्क्रीन का साइज़, डिवाइस के रिज़ॉल्यूशन, और पेज लेआउट को भी ध्यान में रखें.
- हाई डीपीआई डिसप्ले के लिए सीएसएस में
background-image
प्रॉपर्टी बदलें. इसके लिए,min-resolution
और-webkit-min-device-pixel-ratio
वाली मीडिया क्वेरी का इस्तेमाल करें. - मार्कअप में 1x इमेज के अलावा हाई रिज़ॉल्यूशन वाली इमेज देने के लिए srcset का इस्तेमाल करें.
- JavaScript इमेज बदलने की तकनीकों का इस्तेमाल करते समय या कम रिज़ॉल्यूशन वाले डिवाइसों पर बहुत ज़्यादा कंप्रेस की गई हाई रिज़ॉल्यूशन इमेज दिखाते समय, परफ़ॉर्मेंस की लागत को ध्यान में रखें.
शर्त के साथ इमेज लोड करने या आर्ट डायरेक्शन के लिए, मीडिया क्वेरी इस्तेमाल करना
मीडिया क्वेरी न सिर्फ़ पेज के लेआउट पर असर डालती हैं, बल्कि आप इनका इस्तेमाल, इमेज को शर्तों के हिसाब से लोड करने या व्यूपोर्ट की चौड़ाई के हिसाब से कला के निर्देश देने के लिए भी कर सकती हैं.
उदाहरण के लिए, नीचे दिए गए सैंपल में, छोटी स्क्रीन पर सिर्फ़ small.png
को डाउनलोड किया जाता है और कॉन्टेंट div
पर लागू किया जाता है. वहीं, बड़ी स्क्रीन पर background-image: url(body.png)
को मुख्य हिस्से पर और background-image:
url(large.png)
कॉन्टेंट div
पर लागू किया जाता है.
.example {
height: 400px;
background-image: url(small.png);
background-repeat: no-repeat;
background-size: contain;
background-position-x: center;
}
@media (min-width: 500px) {
body {
background-image: url(body.png);
}
.example {
background-image: url(large.png);
}
}
हाई रिज़ॉल्यूशन वाली इमेज देने के लिए, इमेज सेट का इस्तेमाल करें
सीएसएस में image-set()
फ़ंक्शन, background
प्रॉपर्टी के व्यवहार को बेहतर बनाता है. इससे डिवाइस की अलग-अलग विशेषताओं के लिए, एक से ज़्यादा इमेज फ़ाइलें आसानी से उपलब्ध कराई जा सकती हैं. इससे ब्राउज़र को डिवाइस की विशेषताओं के आधार पर सबसे अच्छी इमेज
चुनने की अनुमति मिलती है. उदाहरण के लिए, सीमित बैंडविड्थ नेटवर्क पर
2x डिसप्ले पर 2x इमेज या
2x डिवाइस पर 1x इमेज का इस्तेमाल करना.
background-image: image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
सही इमेज लोड करने के साथ-साथ, ब्राउज़र उसे उसके मुताबिक स्केल भी करता है. दूसरे शब्दों में, ब्राउज़र यह मानता है कि 2x इमेज, 1x इमेज से दोगुनी बड़ी होती हैं. इसलिए, 2x इमेज को 2 के फ़ैक्टर तक कम कर देता है, ताकि पेज पर दिखाई जाने वाली इमेज का साइज़, उसके जैसा ही दिखे.
image-set()
के लिए सहायता अब भी नई है और यह सिर्फ़ -webkit
वेंडर प्रीफ़िक्स वाले Chrome और
Safari में काम करती है. जब image-set()
काम न करे, तब फ़ॉलबैक इमेज शामिल करने का ध्यान रखें; उदाहरण के लिए:
.sample {
width: 128px;
height: 128px;
background-image: url(icon1x.png);
background-image: -webkit-image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x
);
background-image: image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x
);
}
ऊपर दिया गया ऐसेट, इमेज सेट के साथ काम करने वाले ब्राउज़र में सही ऐसेट लोड करता है. ऐसा न करने पर, यह ऐसेट एक गुना ऐसेट के तौर पर दिखेगी. साफ़ तौर पर चेतावनी यह है कि image-set()
ब्राउज़र पर काम नहीं करता, लेकिन ज़्यादातर ब्राउज़र को एक गुना एसेट मिलती है.
हाई रिज़ॉल्यूशन वाली इमेज या आर्टवर्क के निर्देश देने के लिए मीडिया क्वेरी का इस्तेमाल करें
मीडिया क्वेरी, डिवाइस के पिक्सल रेशियो के आधार पर नियम बना सकती हैं. इससे 2x और 1x डिसप्ले के लिए अलग-अलग इमेज तय की जा सकती हैं.
@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
/* High dpi styles & resources here */
}
Chrome, Firefox, और Opera सभी स्टैंडर्ड (min-resolution: 2dppx)
के साथ काम करते हैं.
जबकि Safari और Android ब्राउज़र, दोनों में dppx
यूनिट के बिना पुराने वेंडर प्रीफ़िक्स वाले सिंटैक्स की ज़रूरत होती है. याद रखें, ये स्टाइल सिर्फ़ तब लोड होते हैं, जब डिवाइस, मीडिया क्वेरी से मैच करता हो. आपको बेस केस के लिए स्टाइल तय करनी होगी.
इससे यह पक्का करने का फ़ायदा भी मिलता है कि अगर ब्राउज़र किसी खास मीडिया क्वेरी के साथ काम नहीं करता, तो उस चीज़ को रेंडर किया जाए.
.sample {
width: 128px;
height: 128px;
background-image: url(icon1x.png);
}
@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2) /* Safari & Android Browser */
{
.sample {
background-size: contain;
background-image: url(icon2x.png);
}
}
व्यूपोर्ट के साइज़ के आधार पर वैकल्पिक इमेज दिखाने के लिए, कम से कम चौड़ाई वाले सिंटैक्स का इस्तेमाल भी किया जा सकता है. इस तकनीक का फ़ायदा यह है कि मीडिया क्वेरी के मेल न खाने पर,
इमेज डाउनलोड नहीं की जाती. उदाहरण के लिए, bg.png
सिर्फ़ तब डाउनलोड किया जाता है और body
पर लागू किया जाता है, जब ब्राउज़र की चौड़ाई 500 पिक्सल या इससे ज़्यादा होती है:
@media (min-width: 500px) {
body {
background-image: url(bg.png);
}
}
आइकॉन के लिए SVG का इस्तेमाल करें
अपने पेज पर आइकॉन जोड़ते समय, जहां भी हो सके वहां SVG आइकॉन का इस्तेमाल करें. कुछ मामलों में, यूनिकोड कैरेक्टर का भी इस्तेमाल करें.
खास जानकारी
- आइकॉन के लिए, रास्टर इमेज के बजाय SVG या यूनिकोड का इस्तेमाल करें.
सामान्य आइकॉन को यूनिकोड से बदलें
कई फ़ॉन्ट में, बड़ी संख्या में यूनिकोड ग्लिफ़ का इस्तेमाल किया जा सकता है. इन्हें इमेज की जगह इस्तेमाल किया जा सकता है. इमेज से उलट, यूनिकोड फ़ॉन्ट का साइज़ काफ़ी अच्छा होता है और यह मायने नहीं रखता कि स्क्रीन पर वे कितने छोटे या बड़े दिखेंगे.
सामान्य वर्णों के सेट से आगे, यूनिकोड में ऐरो (←), मैथ ऑपरेटर (फटाफट), ज्यामितीय आकार (★), कंट्रोल पिक्चर (▶), संगीत नोटेशन (♬), ग्रीक अक्षरों (Ω), और शतरंज के टुकड़ों (♞) का भी प्रतीक शामिल हो सकते हैं.
यूनिकोड कैरेक्टर को, नाम वाली इकाइयों की तरह ही शामिल किया जाता है:
&#XXXX
, जहां XXXX
यूनिकोड कैरेक्टर नंबर को दिखाता है. उदाहरण के लिए:
You're a super ★
आप सुपर हैं ★
जटिल आइकॉन को SVG से बदलें
आइकॉन की ज़्यादा जटिल शर्तों को पूरा करने के लिए, SVG आइकॉन आम तौर पर कम वज़न के होते हैं, इस्तेमाल में आसान होते हैं, और इन्हें सीएसएस के साथ स्टाइल किया जा सकता है. रास्टर इमेज की तुलना में, SVG के कई फ़ायदे हैं:
- ये वेक्टर ग्राफ़िक होते हैं जिन्हें अनगिनत स्केल किया जा सकता है.
- रंग, शैडोइंग, पारदर्शिता, और ऐनिमेशन जैसे सीएसएस इफ़ेक्ट आसान हैं.
- SVG इमेज को दस्तावेज़ में दाईं ओर इनलाइन किया जा सकता है.
- ये सिमैंटिक होते हैं.
- वे सही एट्रिब्यूट के साथ बेहतर सुलभता देते हैं.
With SVG icons, you can either add icons using inline SVG, like
this checkmark:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="32" height="32" viewBox="0 0 32 32">
<path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
</svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.
आइकॉन वाले फ़ॉन्ट का इस्तेमाल सावधानी से करें
आइकॉन फ़ॉन्ट लोकप्रिय हैं और इन्हें इस्तेमाल करना आसान हो सकता है, लेकिन SVG आइकॉन की तुलना में इनमें कुछ कमियां भी हैं:
- ये वेक्टर ग्राफ़िक होते हैं जिन्हें अनगिनत स्केल किया जा सकता है, लेकिन हो सकता है कि ये एलिया के ख़िलाफ़ हों. इसकी वजह से, ऐसे आइकॉन बन जाते हैं जो उम्मीद के मुताबिक नहीं होते हैं.
- सीएसएस की मदद से सीमित स्टाइल में दिखाया जा रहा है.
- पिक्सल में सही जगह तय करने में मुश्किल आ सकती है, जैसे कि लाइन की ऊंचाई, अक्षरों के बीच की दूरी वगैरह.
- ये सिमैंटिक नहीं होते और इन्हें स्क्रीन रीडर या दूसरी सहायक टेक्नोलॉजी के साथ इस्तेमाल करना मुश्किल हो सकता है.
- जब तक सही तरीके से स्कोप नहीं किया जाता, तब तक उपलब्ध आइकॉन के एक छोटे सबसेट का इस्तेमाल करने पर, इन फ़ाइलों की फ़ाइल का साइज़ बड़ा हो सकता है.
With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome"></span>)
or by adding special classes to an <i> element like the CSS3
logo (<i class="fa fa-css3"></i>).
सैकड़ों मुफ़्त और पैसे देकर इस्तेमाल किए जाने वाले आइकॉन फ़ॉन्ट उपलब्ध हैं. इनमें फ़ॉन्ट Awesome, Pictos, और Glyphicons शामिल हैं.
आइकॉन के लिए ज़रूरी एचटीटीपी अनुरोध और फ़ाइल के साइज़ के वज़न को संतुलित करना न भूलें. उदाहरण के लिए, अगर आपको कुछ आइकॉन की ज़रूरत है, तो एक इमेज या इमेज स्प्राइट का इस्तेमाल करना बेहतर हो सकता है.
परफ़ॉर्मेंस के लिए इमेज ऑप्टिमाइज़ करें
आम तौर पर, डाउनलोड की गई ज़्यादातर बाइट इमेज में होती हैं. साथ ही, वे अक्सर पेज पर काफ़ी जगह घेरती हैं. इससे इमेज को ऑप्टिमाइज़ करने से, बाइट की बचत होती है और आपकी वेबसाइट की परफ़ॉर्मेंस में बहुत ज़्यादा सुधार होते हैं: ब्राउज़र को जितने कम बाइट डाउनलोड करने पड़ते हैं, क्लाइंट के बैंडविथ के लिए उतनी ही कम प्रतिस्पर्धा होती है. साथ ही, ब्राउज़र उतनी ही तेज़ी से सभी एसेट डाउनलोड और डिसप्ले कर सकता है.
खास जानकारी
- इमेज फ़ॉर्मैट किसी भी क्रम में न चुनें, बल्कि उपलब्ध अलग-अलग फ़ॉर्मैट को समझें और सबसे सही फ़ॉर्मैट का इस्तेमाल करें.
- फ़ाइल का साइज़ कम करने के लिए, अपने वर्कफ़्लो में इमेज ऑप्टिमाइज़ेशन और कंप्रेशन टूल शामिल करें.
- अक्सर इस्तेमाल की जाने वाली इमेज को इमेज स्प्राइट में रखकर, एचटीटीपी अनुरोधों की संख्या कम करें.
- शुरुआत में पेज लोड होने में लगने वाला समय कम करने और पेज का शुरुआती हिस्सा कम करने के लिए, इमेज को तब ही लोड करें, जब उन्होंने पेज पर स्क्रोल कर लिया हो.
सही फ़ॉर्मैट चुनें
दो तरह की इमेज इस्तेमाल की जा सकती हैं:
वेक्टर इमेज और रास्टर इमेज.
रास्टर इमेज के लिए, आपको सही कंप्रेशन फ़ॉर्मैट भी चुनना होगा,
उदाहरण के लिए: GIF
, PNG
, JPG
.
रास्टर इमेज, जैसे कि फ़ोटोग्राफ़ और दूसरी इमेज को अलग-अलग बिंदुओं या पिक्सल की ग्रिड के रूप में दिखाया जाता है. रास्टर इमेज आम तौर पर, कैमरे या
स्कैनर से ली जाती हैं या ब्राउज़र में canvas
एलिमेंट के साथ बनाई जा सकती हैं. जैसे-जैसे इमेज का साइज़ बढ़ता है वैसे-वैसे फ़ाइल का साइज़ भी बढ़ता है. जब रास्टर इमेज को अपने मूल साइज़ से बड़ा किया जाता है, तो वे धुंधली हो जाती हैं. ऐसा इसलिए, क्योंकि ब्राउज़र को यह अनुमान लगाना ज़रूरी होता है कि छूटे हुए पिक्सल को कैसे भरना है.
लोगो और लाइन आर्ट जैसे वेक्टर इमेज को कर्व, लाइन, आकार, और फ़िल कलर के सेट से तय किया जाता है. वेक्टर इमेज को Adobe Illustrator या Inkscape जैसे प्रोग्राम की मदद से बनाया जाता है और SVG
जैसे वेक्टर फ़ॉर्मैट में सेव किया जाता है. वेक्टर इमेज, आसान प्रिमिटिव पर बनाई जाती हैं. इसलिए, इन्हें क्वालिटी या फ़ाइल के साइज़ में बदलाव किए बिना स्केल किया जा सकता है.
सही फ़ॉर्मैट चुनते समय, इमेज के ऑरिजिन (रास्टर या वेक्टर) और कॉन्टेंट (रंग, ऐनिमेशन, टेक्स्ट वगैरह) को ध्यान में रखना ज़रूरी है. कोई भी एक फ़ॉर्मैट सभी तरह की इमेज के लिए फ़िट नहीं होता. हर एक फ़ॉर्मैट की अपनी अलग-अलग खूबियों और कमियां होती हैं.
सही फ़ॉर्मैट चुनते समय, इन दिशा-निर्देशों की मदद लें:
- फ़ोटोग्राफ़िक इमेज के लिए
JPG
का इस्तेमाल करें. - वेक्टर आर्ट और गहरे रंग वाले ग्राफ़िक, जैसे कि लोगो और लाइन आर्ट के लिए,
SVG
का इस्तेमाल करें. अगर वेक्टर आर्ट उपलब्ध नहीं है, तोWebP
याPNG
आज़माएं. GIF
के बजायPNG
का इस्तेमाल करें, क्योंकि इससे ज़्यादा रंगों का इस्तेमाल किया जा सकता है और बेहतर कंप्रेशन अनुपात भी मिलता है.- लंबे ऐनिमेशन के लिए,
<video>
का इस्तेमाल करें. इससे इमेज की क्वालिटी बेहतर होती है और उपयोगकर्ता को वीडियो चलाने का कंट्रोल मिलता है.
फ़ाइल का साइज़ कम करें
सेव करने के बाद, इमेज को "पोस्ट-प्रोसेस" करके, उसका साइज़ काफ़ी कम किया जा सकता है. इमेज कंप्रेस करने के लिए कई टूल मौजूद हैं—लॉसी और लॉसलेस, ऑनलाइन, जीयूआई, कमांड लाइन. जहां भी संभव हो, इमेज ऑप्टिमाइज़ेशन को अपने-आप ऑप्टिमाइज़ करना सबसे अच्छा होता है, ताकि यह आपके वर्कफ़्लो में पहले से मौजूद हो.
ऐसे कई टूल उपलब्ध हैं जो JPG
और PNG
फ़ाइलों को अच्छी तरह से कंप्रेस करते हैं, लेकिन उनकी इमेज क्वालिटी पर कोई असर नहीं पड़ता. JPG
के लिए, jpegtran या
jpegoptim आज़माएं. यह सुविधा सिर्फ़ Linux पर उपलब्ध है.
इसे --strip-all विकल्प से चलाएं. PNG
के लिए, OptiPNG या
PNGOUT आज़माएं.
इमेज स्प्राइट का इस्तेमाल करें
सीएसएस स्प्रिटिंग एक ऐसी तकनीक है जिसमें कई इमेज को एक "स्प्राइट शीट" इमेज में जोड़ दिया जाता है. इसके बाद, किसी एलिमेंट (स्प्राइट शीट) के लिए बैकग्राउंड इमेज और सही हिस्सा दिखाने के लिए ऑफ़सेट तय करके, अलग-अलग इमेज का इस्तेमाल किया जा सकता है.
.sprite-sheet {
background-image: url(sprite-sheet.png);
width: 40px;
height: 25px;
}
.google-logo {
width: 125px;
height: 45px;
background-position: -190px -170px;
}
.gmail {
background-position: -150px -210px;
}
.maps {
height: 40px;
background-position: -120px -165px;
}
स्प्रिंटिंग का एक फ़ायदा यह है कि एक से ज़्यादा इमेज पाने के लिए डाउनलोड की संख्या कम हो जाती है, जो कैश मेमोरी में सेव करने की सुविधा को भी चालू करती है.
लेज़ी लोडिंग के बारे में सोचें
लेज़ी लोडिंग की वजह से, ऐसे लंबे पेजों पर लोड होने की रफ़्तार काफ़ी बढ़ जाती है जिनमें वेबसाइट में फ़ोल्ड के नीचे कई इमेज होती हैं. ऐसा, ज़रूरत के हिसाब से या मुख्य कॉन्टेंट के लोड होने और रेंडर होने के बाद होता है. परफ़ॉर्मेंस में सुधार के अलावा, लेज़ी लोडिंग का इस्तेमाल करने से इनफ़ाइनाइट स्क्रोलिंग का अनुभव बन सकता है.
इनफ़ाइनाइट स्क्रोलिंग वाले पेज बनाते समय सावधानी बरतें. जैसे-जैसे कॉन्टेंट दिखने लगता है, वैसे-वैसे सर्च इंजन को वह कॉन्टेंट कभी नहीं दिखता. इसके अलावा, जो उपयोगकर्ता किसी जानकारी को फ़ुटर में देखना चाहते हैं उसे फ़ुटर कभी नहीं दिखता, क्योंकि नया कॉन्टेंट हमेशा लोड होता है.
इमेज इस्तेमाल करने से पूरी तरह बचें
कभी-कभी सबसे अच्छी इमेज असल में कोई इमेज नहीं होती. जब भी हो सके, ब्राउज़र की मूल क्षमताओं का इस्तेमाल करें, ताकि वही या उससे मिलती-जुलती सुविधा दी जा सके. ब्राउज़र ऐसे विज़ुअल जनरेट करते हैं जिनमें पहले ज़रूरी इमेज होती थीं. इसका मतलब है कि अब ब्राउज़र को अलग से इमेज फ़ाइलें डाउनलोड करने की ज़रूरत नहीं होगी. इससे वे इमेज को आसानी से स्केल नहीं कर पाएंगे. आइकॉन रेंडर करने के लिए, यूनिकोड या खास आइकॉन फ़ॉन्ट का इस्तेमाल किया जा सकता है.
इमेज में एम्बेड किए गए के बजाय, मार्कअप में टेक्स्ट रखें
जहां भी हो सके, टेक्स्ट में टेक्स्ट होना चाहिए, न कि इमेज में जोड़ा जाना चाहिए. उदाहरण के लिए, हेडलाइन के लिए इमेज का इस्तेमाल करने या फ़ोन नंबर या पते जैसी संपर्क जानकारी को सीधे इमेज में डालने से, उपयोगकर्ता जानकारी को कॉपी करके चिपका नहीं सकते. इससे स्क्रीन रीडर यह जानकारी ऐक्सेस नहीं कर पाते और यह रिस्पॉन्सिव नहीं होती. इसके बजाय, टेक्स्ट को अपने मार्कअप में रखें. साथ ही, अपनी ज़रूरत के हिसाब से स्टाइल बनाने के लिए वेबफ़ॉन्ट इस्तेमाल करें.
इमेज बदलने के लिए सीएसएस का इस्तेमाल करना
मॉडर्न ब्राउज़र, सीएसएस की सुविधाओं का इस्तेमाल करके ऐसी स्टाइल बना सकते हैं जिनके लिए पहले इमेज की ज़रूरत होती थी. उदाहरण के लिए: background
प्रॉपर्टी का इस्तेमाल करके कॉम्प्लेक्स ग्रेडिएंट बनाए जा सकते हैं, box-shadow
का इस्तेमाल करके शैडो बनाए जा सकते हैं, और border-radius
प्रॉपर्टी की मदद से गोल कॉर्नर जोड़े जा सकते हैं.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentsque Si्केरिके को आमेत ऑग्यू ग्रैगना स्सेलरिस्क पोर्टा उट डॉलर (अपने घर पर शिक्षा और मनोरंजन करना) पर आधारित है. Nullamplacerat egstas nisl sed sollicitudin. फ़्यूस प्लेसराट, ipsum ac वेस्टिबुलम पोर्टा, परस डॉलर मॉलिस नंक, pharetra vehicula nulla nnch quis elit. डुइस ऑर्नारे फ़्रिंजिला दुई नॉन वेहिकुला. In hac habitasse platea dictumst. डोनक ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus puus.
<style>
div#noImage {
color: white;
border-radius: 5px;
box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
}
</style>
ध्यान रखें कि इन तकनीकों का इस्तेमाल करने के लिए रेंडरिंग साइकल की ज़रूरत होती है, जो मोबाइल पर अहम हो सकते हैं. इनका बहुत ज़्यादा इस्तेमाल करने पर आपको फ़ायदा नहीं होगा. साथ ही, इससे परफ़ॉर्मेंस पर असर पड़ सकता है.