इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

Pete LePage

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

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

कभी-कभी इमेज में ज़्यादा बदलाव करने की ज़रूरत पड़ सकती है: अनुपात, काट-छांट करना, और यहां तक कि पूरी इमेज को बदलना. इस मामले में, चित्र बदलने को आम तौर पर कला दिशा निर्देश कहा जाता है. यहां जाएं: responsiveimages.org/demos/ उदाहरण.

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

क्या आपको पता है कि किसी वेब पेज को लोड करने के लिए, इमेज औसतन 60% से ज़्यादा बाइट होती हैं?

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

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

यह Udacity कोर्स की तरफ़ से मुफ़्त में उपलब्ध कोर्स है

कोर्स करें

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

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

खास जानकारी

इमेज को गलती से ओवरफ़्लो होने से रोकने के लिए, उनकी ज़रूरत के हिसाब से साइज़ का इस्तेमाल करें कंटेनर.
जब आपको अलग-अलग इमेज के बारे में बताना हो, तो picture एलिमेंट का इस्तेमाल करें डिवाइस की विशेषताओं पर आधारित कॉन्टेंट (जैसे, आर्ट डायरेक्शन).
img एलिमेंट में संकेत देने के लिए, srcset और x डिस्क्रिप्टर का इस्तेमाल करें इस ब्राउज़र में आपको अलग-अलग डेंसिटी में से चुनने के लिए, सबसे अच्छी इमेज के बारे में जानकारी मिलती है.
अगर आपके पेज पर सिर्फ़ एक या दो इमेज हैं और उनका इस्तेमाल, यहां पर कहीं और नहीं किया गया है तो फ़ाइल के अनुरोधों को कम करने के लिए इनलाइन इमेज का इस्तेमाल करें.

इमेज के लिए अलग-अलग साइज़ का इस्तेमाल करें

इमेज को रोकने के लिए चौड़ाई तय करते समय, मिलती-जुलती इकाइयों का इस्तेमाल करना न भूलें को गलती से देख दिया जाता है. उदाहरण के लिए, width: 50%; की वजहें इमेज की चौड़ाई, शामिल एलिमेंट का 50% होना चाहिए (व्यूपोर्ट के 50% हिस्से से नहीं या पिक्सल के असल साइज़ का 50% होता है).

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

img, embed, object, video {
    max-width: 100%;
}

img पर alt एट्रिब्यूट का इस्तेमाल करके, काम की जानकारी देना न भूलें एलिमेंट; ये आपकी साइट को ज़्यादा से ज़्यादा लोगों तक पहुंचाने में आपकी मदद करते हैं. इसके लिए, रीडर और अन्य सहायक टेक्नोलॉजी के लिए.

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

srcset एट्रिब्यूट, img एलिमेंट की मदद से, कई इमेज फ़ाइलें आसानी से उपलब्ध कराई जा सकती हैं की सुविधा देता है. image-set से मिलती-जुलती सीएसएस फ़ंक्शन मूल रूप से सीएसएस में होती है, तो srcset, ब्राउज़र को अलग-अलग विशेषताओं के आधार पर इमेज की झलक दिखाता है. उदाहरण के लिए, 2x डिस्प्ले पर 2x इमेज, और संभावित रूप से भविष्य में 1x इमेज सीमित बैंडविड्थ नेटवर्क पर होने पर दोगुना डिवाइस.

<img src="photo.png" srcset="photo@2x.png 2x" ...>

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

वहीं, शर्तों में पिक्सल की सघनता से लेकर चौड़ाई और ऊंचाई के साथ-साथ, सिर्फ़ पिक्सल डेंसिटी का इस्तेमाल किया जा सकता है. करंट को बैलेंस करने के लिए आने वाले समय की सुविधाओं का इस्तेमाल करते हैं, तो 2x इमेज एट्रिब्यूट की वैल्यू सबमिट करें.

`picture` के साथ रिस्पॉन्सिव इमेज में कला के दिशा-निर्देश

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

ध्यान दें: ब्राउज़र में picture एलिमेंट दिखना शुरू हो गया है. हालांकि, यह अभी हर ब्राउज़र में उपलब्ध नहीं है, लेकिन हम इसके इस्तेमाल का सुझाव देते हैं. ऐसा इसलिए, क्योंकि यह पिक्चरफ़िल पॉलिफ़िल की मदद से काम करता है और इसमें पुराने सिस्टम के साथ काम करता है. ज़्यादा जानकारी के लिए, 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.67 गुना
640 पिक्सल	3	`1000.jpg`	3.125 गुना
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% चौड़ाई है; और 500px से कम हो, तो यह पूरी चौड़ाई वाला है.

प्रॉडक्ट की इमेज को बड़ा करने लायक बनाएं

जे॰ प्रॉडक्ट की बड़ी हो सकने वाली इमेज वाली क्रू की वेबसाइट — जे॰ क्रू की वेबसाइट पर मौजूद प्रॉडक्ट की इमेज को बड़ा करके देखा जा सकता है.

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

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

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

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

कॉन्टेंट बनाने कंप्रेसिव इमेज तकनीक यह सभी डिवाइसों की बहुत ज़्यादा कंप्रेस की हुई 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 ...">

(पूरा वर्शन 5000 से ज़्यादा वर्णों का है!)

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

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

डेटा यूआरआई और SVG को सीएसएस में भी इनलाइन किया जा सकता है—और यह इन पर काम करता है मोबाइल और डेस्कटॉप दोनों पर उपलब्ध है. यहां एक जैसी दिखने वाली दो इमेज दी गई हैं, जिन्हें CSS में बैकग्राउंड की इमेज; एक डेटा यूआरआई, एक 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
);

सही इमेज लोड करने के साथ-साथ, ब्राउज़र इसे स्केल भी करता है भुगतान करते हैं. दूसरे शब्दों में, ब्राउज़र यह मानता है कि दो गुना इमेज, 1x चित्र जितना बड़ा होता है, और इस तरह 2x चित्र को 2 के गुणक से कम कर दिया जाता है, इसलिए कि पेज पर इमेज का साइज़ एक जैसा हो.

image-set() के लिए सहायता अब भी नई है. यह सिर्फ़ Chrome और -webkit वेंडर प्रीफ़िक्स के साथ 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
  );
}

इसे आज़माएँ

ऊपर दिया गया तरीका, इमेज सेट के साथ काम करने वाले ब्राउज़र में सही ऐसेट लोड करता है; नहीं तो यह 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);
  }
}

इसे आज़माएँ

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

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

आइकॉन के लिए SVG का इस्तेमाल करें

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

खास जानकारी

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

सामान्य आइकॉन को यूनिकोड से बदलें

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

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

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

You're a super &#9733;

आप हैं सुपर ★

कॉम्प्लेक्स आइकॉन को 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">.

इसे आज़माएँ

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

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

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

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

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 शामिल है बहुत बढ़िया, Pictos और ग्लिफ़िकॉन.

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

बेहतर परफ़ॉर्मेंस के लिए इमेज को ऑप्टिमाइज़ करें

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

खास जानकारी

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

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

दो तरह की इमेज का इस्तेमाल किया जा सकता है: वेक्टर इमेज और रास्टर इमेज. रास्टर इमेज के लिए, आपको सही कंप्रेशन फ़ॉर्मैट चुनना होगा, उदाहरण के लिए: 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. पेलेनटेस्क सिट ame augue eugue magna selerisqueporta ut dolor. नुल्लम प्लेसरेट इगेस्तस निसिल sed सॉलिसिट्यूडिन. फ़्यूस प्लेसरेट, आईपीसम एसी वेस्टिबुलम पोर्टा, प्युरस dolor mollis nunc, pharetra vehicula nulla nunc quis elit. डुइस ऑर्नायर फ्रिंजिला डुई नॉन वेहिकुला. In hac habitasse platea dictumst. डोनेक इप्सम लेक्टस, हेंड्रेरिट मेलेसुआदा सेपियन ईगेट, विनेनाटिस टेंपस पुरस.

<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

डेटा यूआरआई

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

इनलाइनिंग प्रो और नुकसान

सीएसएस में मौजूद इमेज

खास जानकारी

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

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

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

आइकॉन के लिए SVG का इस्तेमाल करें

खास जानकारी

सामान्य आइकॉन को यूनिकोड से बदलें

कॉम्प्लेक्स आइकॉन को SVG से बदलें

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

बेहतर परफ़ॉर्मेंस के लिए इमेज को ऑप्टिमाइज़ करें

खास जानकारी

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

फ़ाइल का साइज़ कम करें

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

लेज़ी लोडिंग का ध्यान रखें

इमेज से पूरी तरह बचें

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

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

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

`picture` के साथ रिस्पॉन्सिव इमेज में कला के दिशा-निर्देश