Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

रिस्पॉन्सिव इमेज

एक तस्वीर, हज़ार शब्दों के बराबर होती है. साथ ही, इमेज हर पेज का एक अहम हिस्सा होती हैं. हालांकि, डाउनलोड किए गए ज़्यादातर बाइट भी इन्हीं से आते हैं. रिस्पॉन्सिव वेब डिज़ाइन की मदद से, डिवाइस की विशेषताओं के आधार पर न सिर्फ़ हमारे लेआउट बदल सकते हैं, बल्कि इमेज भी बदल सकती हैं.

Pete LePage

रिस्पॉन्सिव वेब डिज़ाइन का मतलब है कि डिवाइस की विशेषताओं के आधार पर, न सिर्फ़ हमारे लेआउट बदल सकते हैं, बल्कि कॉन्टेंट भी बदल सकता है. उदाहरण के लिए, हाई रिज़ॉल्यूशन (2x) वाले डिसप्ले पर, हाई रिज़ॉल्यूशन वाले ग्राफ़िक से इमेज साफ़ दिखती है. हो सकता है कि 50% चौड़ाई वाली इमेज, 800 पिक्सल चौड़े ब्राउज़र पर ठीक से काम करे. हालांकि, कम चौड़ाई वाले फ़ोन पर यह ज़्यादा जगह लेती है. साथ ही, छोटी स्क्रीन पर फ़िट होने के लिए, इसे उतनी ही बैंडविड्थ की ज़रूरत होती है.

आर्ट डायरेक्शन

कभी-कभी इमेज में ज़्यादा बदलाव करने की ज़रूरत पड़ सकती है. जैसे, इमेज के अनुपात में बदलाव करना, उसे काटना, और पूरी इमेज को बदलना. इस मामले में, इमेज को बदलने को आम तौर पर आर्ट डायरेक्शन कहा जाता है. ज़्यादा उदाहरणों के लिए, 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 एलिमेंट, ब्राउज़र में दिखने लगा है. हालांकि, यह अभी हर ब्राउज़र में उपलब्ध नहीं है, लेकिन हम इसके इस्तेमाल का सुझाव देते हैं. इसकी वजह यह है कि यह पुराने सिस्टम के साथ काम करता है और इसमें Picturefill polyfill का इस्तेमाल किया जा सकता है. ज़्यादा जानकारी के लिए, ResponsiveImages.org साइट देखें.

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>

इसे आज़माएँ

ऊपर दिए गए उदाहरण में, अगर ब्राउज़र की चौड़ाई कम से कम 800 पिक्सल है, तो डिवाइस के रिज़ॉल्यूशन के आधार पर, 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.5x
600 पिक्सल	2	`800.jpg`	2.67x
640 पिक्सल	3	`1000.jpg`	3.125x
1100 पिक्सल	1	`800.png`	1.45x

रिस्पॉन्सिव इमेज में ब्रेकपॉइंट का इस्तेमाल करें

कई मामलों में, साइट के लेआउट ब्रेकपॉइंट के हिसाब से इमेज का साइज़ बदल सकता है. उदाहरण के लिए, हो सकता है कि आप छोटी स्क्रीन पर इमेज को व्यूपोर्ट की पूरी चौड़ाई में दिखाना चाहें. वहीं, बड़ी स्क्रीन पर इमेज को सिर्फ़ छोटे हिस्से में दिखाना चाहें.

<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 पिक्सल से कम होने पर, यह पूरी चौड़ाई की होती है.

प्रॉडक्ट की इमेज को बड़ा करने की सुविधा देना

जे॰ Crews की वेबसाइट, जिस पर प्रॉडक्ट की इमेज को बड़ा करके देखा जा सकता है — J. Crew की वेबसाइट, जिस पर प्रॉडक्ट की इमेज को बड़ा करके देखा जा सकता है.

खरीदार यह देखना चाहते हैं कि वे क्या खरीद रहे हैं. खुदरा साइटों पर, उपयोगकर्ता प्रॉडक्ट की बारीकियों को बेहतर तरीके से देखने के लिए, हाई रिज़ॉल्यूशन वाले क्लोज़अप देखने की उम्मीद करते हैं. अगर वे ऐसा नहीं कर पाते, तो स्टडी में हिस्सा लेने वाले लोग निराश हो जाते हैं.

टैप करके बड़ा की जा सकने वाली इमेज का एक अच्छा उदाहरण, J. Crew ने दिया है. क्रू साइट. गायब होने वाले ओवरले से पता चलता है कि इमेज पर टैप किया जा सकता है. इससे इमेज को ज़ूम इन करके देखा जा सकता है. साथ ही, इमेज की बारीकियां भी देखी जा सकती हैं.

इमेज से जुड़ी अन्य तकनीकें

कंप्रेस की गई इमेज

कंप्रेसिव इमेज तकनीक, सभी डिवाइसों पर 2x इमेज को कंप्रेस करके दिखाती है. इससे कोई फ़र्क़ नहीं पड़ता कि डिवाइस की असल क्षमता क्या है. इमेज के टाइप और कंप्रेस करने के लेवल के हिसाब से, हो सकता है कि इमेज की क्वालिटी में कोई बदलाव न दिखे. हालांकि, फ़ाइल का साइज़ काफ़ी कम हो जाता है.

इसे आज़माएँ

चेतावनी: कंप्रेसिव तकनीक का इस्तेमाल सावधानी से करें. इसकी वजह यह है कि इसमें ज़्यादा मेमोरी और डिकोडिंग की लागत बढ़ जाती है. बड़ी इमेज का साइज़ बदलकर उन्हें छोटी स्क्रीन पर फ़िट करना मुश्किल होता है. खास तौर पर, कम सुविधाओं वाले डिवाइसों पर ऐसा करना ज़्यादा मुश्किल हो सकता है. इसकी वजह यह है कि इन डिवाइसों में मेमोरी और प्रोसेसिंग की क्षमता सीमित होती है.

JavaScript की मदद से इमेज बदलना

JavaScript इमेज रिप्लेसमेंट, डिवाइस की क्षमताओं की जांच करता है और "सही काम करता है." window.devicePixelRatio की मदद से, डिवाइस के पिक्सल का अनुपात तय किया जा सकता है. साथ ही, स्क्रीन की चौड़ाई और ऊंचाई का पता लगाया जा सकता है. इसके अलावा, navigator.connection की मदद से इंटरनेट कनेक्शन को स्निफ़ किया जा सकता है या नकली अनुरोध जारी किया जा सकता है. यह सारी जानकारी इकट्ठा करने के बाद, यह तय किया जा सकता है कि कौनसी इमेज लोड करनी है.

इस तरीके का एक बड़ा नुकसान यह है कि JavaScript का इस्तेमाल करने का मतलब है कि इमेज लोड होने में तब तक देरी होगी, जब तक कि लुक-अहेड पार्सर अपना काम पूरा नहीं कर लेता. इसका मतलब है कि pageload इवेंट ट्रिगर होने के बाद ही इमेज डाउनलोड होना शुरू होंगी. इसके अलावा, ब्राउज़र 1x और 2x, दोनों इमेज डाउनलोड करेगा. इससे पेज वेट बढ़ जाएगा.

इनलाइन इमेज: रास्टर और वेक्टर

इमेज बनाने और उन्हें सेव करने के दो अलग-अलग तरीके हैं. इनसे यह तय होता है कि इमेज को रिस्पॉन्सिव तरीके से कैसे डिप्लॉय किया जाए.

रास्टर इमेज — जैसे कि फ़ोटो और अन्य इमेज, रंग के अलग-अलग बिंदुओं के ग्रिड के तौर पर दिखाई जाती हैं. रास्टर इमेज, कैमरे या स्कैनर से ली जा सकती हैं या एचटीएमएल कैनवस एलिमेंट की मदद से बनाई जा सकती हैं. PNG, JPEG, और WebP जैसे फ़ॉर्मैट का इस्तेमाल, रास्टर इमेज को सेव करने के लिए किया जाता है.

वेक्टर इमेज, जैसे कि लोगो और लाइन आर्ट को कर्व, लाइन, शेप, फ़िल कलर, और ग्रेडिएंट के सेट के तौर पर तय किया जाता है. वेक्टर इमेज को Adobe Illustrator या Inkscape जैसे प्रोग्राम की मदद से बनाया जा सकता है. इसके अलावा, SVG जैसे वेक्टर फ़ॉर्मैट का इस्तेमाल करके, कोड में हाथ से लिखा जा सकता है.

SVG

SVG की मदद से, किसी वेब पेज में रिस्पॉन्सिव वेक्टर ग्राफ़िक्स शामिल किए जा सकते हैं. रास्टर फ़ाइल फ़ॉर्मैट के मुकाबले वेक्टर फ़ाइल फ़ॉर्मैट का फ़ायदा यह है कि ब्राउज़र, वेक्टर इमेज को किसी भी साइज़ में रेंडर कर सकता है. वेक्टर फ़ॉर्मैट, इमेज की ज्यामिति के बारे में बताते हैं. जैसे, इमेज को लाइनों, कर्व, और रंगों वगैरह से कैसे बनाया गया है. दूसरी ओर, रास्टर फ़ॉर्मैट में सिर्फ़ रंग के अलग-अलग बिंदुओं की जानकारी होती है. इसलिए, ब्राउज़र को स्केल करते समय खाली जगहों को भरने का अनुमान लगाना पड़ता है.

यहां एक ही इमेज के दो वर्शन दिए गए हैं: बाईं ओर PNG इमेज और दाईं ओर SVG इमेज. एसवीजी फ़ाइल किसी भी साइज़ में अच्छी दिखती है. वहीं, इसके बगल में मौजूद पीएनजी फ़ाइल, बड़े डिसप्ले साइज़ पर धुंधली दिखने लगती है.

अगर आपको अपने पेज से की जाने वाली फ़ाइल के अनुरोधों की संख्या कम करनी है, तो SVG या डेटा यूआरआई फ़ॉर्मैट का इस्तेमाल करके, इमेज को इनलाइन कोड किया जा सकता है. अगर इस पेज का सोर्स देखा जाए, तो आपको दिखेगा कि नीचे दिए गए दोनों लोगो को इनलाइन के तौर पर दिखाया गया है: एक डेटा यूआरआई और एक एसवीजी.

SVG, मोबाइल और डेस्कटॉप पर बेहतर तरीके से काम करता है. साथ ही, ऑप्टिमाइज़ेशन टूल की मदद से, SVG के साइज़ को काफ़ी कम किया जा सकता है. यहां दिए गए दोनों इनलाइन SVG लोगो एक जैसे दिखते हैं. हालांकि, एक का साइज़ करीब 3 केबी और दूसरे का साइज़ सिर्फ़ 2 केबी है:

डेटा यूआरआई

डेटा यूआरआई की मदद से, Base64 एन्कोड की गई स्ट्रिंग के तौर पर img एलिमेंट के src को सेट करके, किसी फ़ाइल (जैसे कि इमेज) को इनलाइन करके शामिल किया जा सकता है. ऐसा करने के लिए आपको ये फ़ॉर्मैट इस्तेमाल करने होंगे:

<img src="data:image/svg+xml;base64,[data]">

ऊपर दिए गए HTML5 लोगो के कोड की शुरुआत कुछ इस तरह दिखती है:

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">

(पूरे वर्शन में 5,000 से ज़्यादा वर्ण हैं!)

इमेज जैसी बाइनरी फ़ाइलों को डेटा यूआरआई में बदलने के लिए, खींचें और छोड़ें टूल उपलब्ध हैं. जैसे, jpillora.com/base64-encoder. एसवीजी की तरह ही, डेटा यूआरआई भी मोबाइल और डेस्कटॉप ब्राउज़र पर अच्छी तरह से काम करते हैं.

सीएसएस में इनलाइन करना

डेटा यूआरआई और एसवीजी को सीएसएस में भी इनलाइन किया जा सकता है. यह सुविधा मोबाइल और डेस्कटॉप, दोनों पर काम करती है. यहां सीएसएस में बैकग्राउंड इमेज के तौर पर लागू की गई, एक जैसी दिखने वाली दो इमेज दी गई हैं. इनमें से एक डेटा यूआरआई है और दूसरी एसवीजी:

इनलाइनिंग के फ़ायदे और नुकसान

इमेज के लिए इनलाइन कोड में ज़्यादा जानकारी हो सकती है. खास तौर पर, डेटा यूआरआई में. इसलिए, आपको इसका इस्तेमाल क्यों करना चाहिए? एचटीटीपी अनुरोधों को कम करने के लिए! एसवीजी और डेटा यूआरआई की मदद से, एक ही अनुरोध में पूरे वेब पेज को वापस लाया जा सकता है. इसमें इमेज, सीएसएस, और JavaScript शामिल हैं.

नुकसान:

मोबाइल पर, डेटा यूआरआई को दिखने में बाहरी src की इमेज की तुलना में काफ़ी ज़्यादा समय लग सकता है.
डेटा यूआरआई, एचटीएमएल अनुरोध के साइज़ को काफ़ी बढ़ा सकते हैं.
इनसे आपके मार्कअप और वर्कफ़्लो में जटिलता आ जाती है.
डेटा यूआरआई फ़ॉर्मैट, बाइनरी से काफ़ी बड़ा (30% तक) होता है. इसलिए, इससे डाउनलोड का कुल साइज़ कम नहीं होता.
डेटा यूआरआई को कैश मेमोरी में सेव नहीं किया जा सकता. इसलिए, उन्हें हर उस पेज के लिए डाउनलोड करना होगा जिस पर उनका इस्तेमाल किया जाता है.
ये IE 6 और 7 में काम नहीं करते. साथ ही, IE8 में भी ये पूरी तरह से काम नहीं करते.
एचटीटीपी/2 का इस्तेमाल करने पर, ऐसेट के अनुरोधों की संख्या कम करने की ज़रूरत नहीं पड़ेगी.

रिस्पॉन्सिव विज्ञापनों की तरह ही, आपको यह टेस्ट करना होगा कि आपके लिए क्या सबसे सही है. डाउनलोड की गई फ़ाइल का साइज़, अनुरोधों की संख्या, और कुल इंतज़ार का समय मापने के लिए, डेवलपर टूल का इस्तेमाल करें. डेटा यूआरआई कभी-कभी रास्टर इमेज के लिए मददगार हो सकते हैं. उदाहरण के लिए, किसी ऐसे होम पेज पर जिसमें सिर्फ़ एक या दो फ़ोटो हों और जिनका इस्तेमाल कहीं और न किया गया हो. अगर आपको वेक्टर इमेज को इनलाइन करना है, तो एसवीजी एक बेहतर विकल्प है.

सीएसएस में इमेज

सीएसएस background प्रॉपर्टी, एलिमेंट में कॉम्प्लेक्स इमेज जोड़ने के लिए एक बेहतरीन टूल है. इसकी मदद से, कई इमेज आसानी से जोड़ी जा सकती हैं, उन्हें दोहराया जा सकता है, और कई अन्य काम किए जा सकते हैं. मीडिया क्वेरी के साथ इस्तेमाल करने पर, बैकग्राउंड प्रॉपर्टी और भी असरदार हो जाती है. इससे स्क्रीन रिज़ॉल्यूशन, व्यूपोर्ट के साइज़ वगैरह के आधार पर, इमेज को शर्त के साथ लोड किया जा सकता है.

खास जानकारी

डिसप्ले की विशेषताओं के लिए सबसे अच्छी इमेज का इस्तेमाल करें. साथ ही, स्क्रीन के साइज़, डिवाइस के रिज़ॉल्यूशन, और पेज के लेआउट का ध्यान रखें.
min-resolution और -webkit-min-device-pixel-ratio के साथ मीडिया क्वेरी का इस्तेमाल करके, हाई डीपीआई डिसप्ले के लिए सीएसएस में background-image प्रॉपर्टी बदलें.
मार्कअप में 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 इमेज को दो गुना छोटा कर देता है, ताकि पेज पर इमेज का साइज़ एक जैसा दिखे.

image-set() के लिए सहायता अब भी नई है और यह सिर्फ़ Chrome और Safari में -webkit वेंडर प्रीफ़िक्स के साथ काम करती है. 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 के साथ काम करने वाले ब्राउज़र में सही ऐसेट लोड करता है. ऐसा न होने पर, यह 1x ऐसेट पर वापस चला जाता है. हालांकि, ध्यान देने वाली बात यह है कि image-set() ब्राउज़र के साथ काम करने की सुविधा कम है. ज़्यादातर ब्राउज़र को 1x ऐसेट मिलती है.

हाई रिज़ॉल्यूशन वाली इमेज या आर्ट डायरेक्शन देने के लिए, मीडिया क्वेरी का इस्तेमाल करें

मीडिया क्वेरी, डिवाइस पिक्सल रेशियो के आधार पर नियम बना सकती हैं. इससे 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);
  }
}

इसे आज़माएँ

व्यूपोर्ट के साइज़ के हिसाब से वैकल्पिक इमेज दिखाने के लिए, min-width सिंटैक्स का भी इस्तेमाल किया जा सकता है. इस तकनीक का फ़ायदा यह है कि अगर मीडिया क्वेरी मैच नहीं होती है, तो इमेज डाउनलोड नहीं होती है. उदाहरण के लिए, bg.png को सिर्फ़ तब डाउनलोड किया जाता है और body पर लागू किया जाता है, जब ब्राउज़र की चौड़ाई 500 पिक्सल या उससे ज़्यादा हो:

@media (min-width: 500px) {
    body {
    background-image: url(bg.png);
    }
}

आइकॉन के लिए एसवीजी का इस्तेमाल करना

अपने पेज पर आइकॉन जोड़ते समय, जहां संभव हो वहां SVG आइकॉन का इस्तेमाल करें. कुछ मामलों में, यूनिकोड वर्णों का इस्तेमाल करें.

खास जानकारी

आइकॉन के लिए, रास्टर इमेज के बजाय एसवीजी या यूनिकोड का इस्तेमाल करें.

साधारण आइकॉन को यूनिकोड से बदलना

कई फ़ॉन्ट में, यूनिकोड ग्लिफ़ के लिए सहायता शामिल होती है. इनका इस्तेमाल इमेज के बजाय किया जा सकता है. इमेज के उलट, यूनिकोड फ़ॉन्ट अच्छी तरह से स्केल होते हैं और अच्छे दिखते हैं. इससे कोई फ़र्क़ नहीं पड़ता कि वे स्क्रीन पर कितने छोटे या बड़े दिखते हैं.

सामान्य वर्ण सेट के अलावा, यूनिकोड में ऐरो (←), मैथ ऑपरेटर (√), ज्यामितीय आकृतियां (★), कंट्रोल पिक्चर (▶), म्यूज़िक नोटेशन (♬), ग्रीक अक्षर (Ω), और शतरंज के मोहरों (♞) के सिंबल भी शामिल हो सकते हैं.

यूनिकोड वर्ण को शामिल करने का तरीका, नाम वाली इकाइयों को शामिल करने के तरीके जैसा ही है: &#XXXX, जहां XXXX यूनिकोड वर्ण नंबर को दिखाता है. उदाहरण के लिए:

You're a super &#9733;

आप एक सुपर ★ हैं

जटिल आइकॉन को एसवीजी से बदलना

ज़्यादा जटिल आइकॉन की ज़रूरतों के लिए, एसवीजी आइकॉन आम तौर पर हल्के होते हैं, इस्तेमाल करने में आसान होते हैं, और उन्हें सीएसएस की मदद से स्टाइल किया जा सकता है. रास्टर इमेज के मुकाबले, 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">.

इसे आज़माएँ

आइकॉन फ़ॉन्ट का इस्तेमाल सावधानी से करें

ऐसे पेज का उदाहरण जो अपने फ़ॉन्ट आइकॉन के लिए FontAwesome का इस्तेमाल करता है.

आइकॉन फ़ॉन्ट काफ़ी लोकप्रिय हैं और इन्हें इस्तेमाल करना आसान है. हालांकि, एसवीजी आइकॉन की तुलना में इनमें कुछ कमियां हैं:

ये वेक्टर ग्राफ़िक्स होते हैं, जिन्हें किसी भी साइज़ में बदला जा सकता है. हालांकि, इनमें ऐंटी-एलियासिंग की सुविधा हो सकती है. इस वजह से, आइकॉन उतने साफ़ नहीं दिखते जितने दिखने चाहिए.
सीएसएस के साथ सीमित स्टाइलिंग.
लाइन की ऊंचाई, अक्षरों के बीच की दूरी वगैरह के हिसाब से, Pixel की सही पोज़िशनिंग मुश्किल हो सकती है.
ये सिमैंटिक नहीं होते हैं. साथ ही, स्क्रीन रीडर या अन्य सहायक टेक्नोलॉजी के साथ इनका इस्तेमाल करना मुश्किल हो सकता है.
अगर सही तरीके से स्कोप नहीं किया गया, तो उपलब्ध आइकॉन के सिर्फ़ एक छोटे सबसेट का इस्तेमाल करने पर भी, फ़ाइल का साइज़ बड़ा हो सकता है.

With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

इसे आज़माएँ

मुफ़्त और पैसे चुकाकर इस्तेमाल किए जाने वाले सैकड़ों आइकॉन फ़ॉन्ट उपलब्ध हैं. इनमें Font 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. Pellentesque sit amet augue eu magna scelerisque porta ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Fusce placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis ornare fringilla dui non vehicula. In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.

<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>

ध्यान रखें कि इन तकनीकों का इस्तेमाल करने के लिए, रेंडरिंग साइकल की ज़रूरत होती है. मोबाइल पर यह साइकल काफ़ी अहम हो सकता है. अगर इनका ज़रूरत से ज़्यादा इस्तेमाल किया जाता है, तो आपको मिलने वाले फ़ायदे खत्म हो जाएंगे. साथ ही, इससे परफ़ॉर्मेंस पर भी असर पड़ सकता है.

आर्ट डायरेक्शन

रिस्पॉन्सिव (डिवाइस के हिसाब से आकार बदलने वाली) इमेज

मार्कअप में इमेज

खास जानकारी

इमेज के लिए, डेटा के हिसाब से साइज़ का इस्तेमाल करें

ज़्यादा डीपीआई वाले डिवाइसों के लिए, srcset की मदद से img को बेहतर बनाएं

picture की मदद से, रिस्पॉन्सिव इमेज में आर्ट डायरेक्शन

रिलेटिव साइज़ वाली इमेज

रिस्पॉन्सिव इमेज में ब्रेकपॉइंट का इस्तेमाल करें

प्रॉडक्ट की इमेज को बड़ा करने की सुविधा देना

इमेज से जुड़ी अन्य तकनीकें

कंप्रेस की गई इमेज

JavaScript की मदद से इमेज बदलना

इनलाइन इमेज: रास्टर और वेक्टर

SVG

डेटा यूआरआई

सीएसएस में इनलाइन करना

इनलाइनिंग के फ़ायदे और नुकसान

सीएसएस में इमेज

खास जानकारी

शर्तों के हिसाब से इमेज लोड करने या आर्ट डायरेक्शन के लिए, मीडिया क्वेरी का इस्तेमाल करें

हाई रिज़ॉल्यूशन वाली इमेज उपलब्ध कराने के लिए, इमेज सेट का इस्तेमाल करना

हाई रिज़ॉल्यूशन वाली इमेज या आर्ट डायरेक्शन देने के लिए, मीडिया क्वेरी का इस्तेमाल करें

आइकॉन के लिए एसवीजी का इस्तेमाल करना

खास जानकारी

साधारण आइकॉन को यूनिकोड से बदलना

जटिल आइकॉन को एसवीजी से बदलना

आइकॉन फ़ॉन्ट का इस्तेमाल सावधानी से करें

परफ़ॉर्मेंस के लिए इमेज ऑप्टिमाइज़ करना

खास जानकारी

सही फ़ॉर्मैट चुनें

फ़ाइल का साइज़ कम करना

इमेज स्प्राइट का इस्तेमाल करना

लेज़ी लोडिंग का इस्तेमाल करें

इमेज का इस्तेमाल न करें

इमेज में एम्बेड करने के बजाय, मार्कअप में टेक्स्ट डालें

इमेज बदलने के लिए सीएसएस का इस्तेमाल करना

ज़्यादा डीपीआई वाले डिवाइसों के लिए, `srcset` की मदद से `img` को बेहतर बनाएं

`picture` की मदद से, रिस्पॉन्सिव इमेज में आर्ट डायरेक्शन