वेब पर मौजूद टेक्स्ट, स्क्रीन के किनारे पर अपने-आप रैप हो जाता है, ताकि यह ओवरफ़्लो न हो. यह इमेज से अलग है. इमेज का साइज़ स्वाभाविक होता है. अगर कोई इमेज, स्क्रीन की चौड़ाई से ज़्यादा है, तो इमेज ओवरफ़्लो हो जाएगी. इस वजह से, एक हॉरिज़ॉन्टल स्क्रोलबार दिखेगा.
अच्छी बात यह है कि ऐसा होने से रोकने के लिए सीएसएस में कदम उठाए जा सकते हैं.
अपनी तस्वीरों को सीमित करें
अपनी स्टाइलशीट में, आप यह एलान कर सकते हैं कि max-inline-size
का इस्तेमाल करके इमेज को उनके एलिमेंट से ज़्यादा बड़े साइज़ में रेंडर नहीं किया जाना चाहिए.
img {
max-inline-size: 100%;
block-size: auto;
}
यही नियम एम्बेड किए गए दूसरे तरह के कॉन्टेंट पर भी लागू किया जा सकता है, जैसे कि वीडियो और iframe.
img,
video,
iframe {
max-inline-size: 100%;
block-size: auto;
}
यह नियम लागू होने के बाद, ब्राउज़र इमेज को स्क्रीन पर फ़िट करने के लिए, इमेज का साइज़ अपने-आप कम कर देंगे.
auto
वैल्यू के तौर पर block-size
जोड़ने का मतलब है कि इमेज का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) स्थिर रहेगा.
कभी-कभी ऐसा हो सकता है कि इमेज के डाइमेंशन पर आपका कंट्रोल न हो. उदाहरण के लिए, ऐसा तब हो सकता है, जब इमेज को कॉन्टेंट मैनेजमेंट सिस्टम की मदद से जोड़ा गया हो. अगर आपके डिज़ाइन के मुताबिक इमेज का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) उसके असल डाइमेंशन से अलग है, तो सीएसएस में aspect-ratio
प्रॉपर्टी का इस्तेमाल करें.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
}
हालांकि, ब्राउज़र इमेज को स्क्वॉश या स्ट्रेच कर सकता है, ताकि वह आपके पसंदीदा आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) में फ़िट हो जाए.
ऐसा होने से रोकने के लिए, object-fit
प्रॉपर्टी का इस्तेमाल करें.
contain
की object-fit
वैल्यू की मदद से, ब्राउज़र को इमेज के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) को बनाए रखने के लिए कहा जाता है. भले ही, इसका मतलब ऊपर और नीचे खाली जगह छोड़ना हो.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: contain;
}
cover
की object-fit
वैल्यू की मदद से, ब्राउज़र को इमेज के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) को बनाए रखने का निर्देश मिलता है. भले ही, इमेज को सबसे ऊपर और नीचे के हिस्से में ही क्यों न काटा जाए.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
}
अगर इमेज को ऊपर और नीचे के हिस्से में समान तरीके से काटने से समस्या हो रही है, तो फ़ोटो का फ़ोकस अडजस्ट करने के लिए, object-position वाली सीएसएस प्रॉपर्टी का इस्तेमाल करें.
आपके पास यह पक्का करने का विकल्प होता है कि इमेज का सबसे अहम कॉन्टेंट अब भी दिख रहा हो.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
object-position: top center;
}
इमेज डिलीवर करना
सीएसएस के इन नियमों से ब्राउज़र को पता चलता है कि आपको इमेज किस तरह रेंडर करनी हैं. ब्राउज़र को उन इमेज को कैसे हैंडल करना चाहिए, इस बारे में अपने एचटीएमएल में संकेत भी दिए जा सकते हैं.
साइज़ के सुझाव
अगर आपको इमेज के डाइमेंशन के बारे में पता है, तो आपको width
और height
एट्रिब्यूट शामिल करना चाहिए. भले ही, इमेज को किसी अलग साइज़ पर रेंडर किया गया हो, (आपके max-inline-size: 100%
नियम की वजह से), ब्राउज़र को अब भी चौड़ाई और ऊंचाई का अनुपात पता है. साथ ही, वह सही जगह पर खाली जगह भी सेट कर सकता है. इससे, इमेज लोड होने पर दूसरा कॉन्टेंट बार-बार रुक जाएगा.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
>
संकेत लोड हो रहे हैं
loading
एट्रिब्यूट का इस्तेमाल करके, ब्राउज़र को बताएं कि इमेज को तब तक लोड नहीं करना है, जब तक वह व्यूपोर्ट में या उसके पास न आ जाए. वेबसाइट में फ़ोल्ड के नीचे वाली इमेज के लिए, lazy
वैल्यू का इस्तेमाल करें. ब्राउज़र तब तक लेज़ी इमेज लोड नहीं करेगा, जब तक उपयोगकर्ता इतना नीचे तक स्क्रोल नहीं करता कि इमेज दिखने वाली है. अगर उपयोगकर्ता कभी स्क्रोल नहीं करता है, तो इमेज कभी लोड नहीं होती.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
>
वेबसाइट में फ़ोल्ड के ऊपर हीरो इमेज के लिए, loading
का इस्तेमाल नहीं किया जाना चाहिए. अगर आपकी साइट अपने-आप loading="lazy"
एट्रिब्यूट लागू करती है, तो इसे लागू होने से रोकने के लिए, आम तौर पर eager
एट्रिब्यूट को सेट किया जा सकता है. यह डिफ़ॉल्ट तौर पर उपलब्ध होता है:
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
>
प्राथमिकता पाएं
एलसीपी इमेज जैसी ज़रूरी इमेज के लिए, fetchpriority
एट्रिब्यूट को high
पर सेट करके, फ़ेच प्राथमिकता का इस्तेमाल करके, लोड करने को और प्राथमिकता दी जा सकती है:
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
fetchpriority="high"
>
इससे ब्राउज़र को इमेज को सामान्य तौर पर फ़ेच किए जाने के बाद, लेआउट पूरा होने का इंतज़ार करने के बजाय, इमेज को तुरंत फ़ेच करने का निर्देश मिलेगा. यह ज़्यादा प्राथमिकता पर, इमेज को फ़ेच करने के लिए कहेगा.
लेकिन याद रखें: जब आप ब्राउज़र से इमेज जैसे किसी एक रिसॉर्स को डाउनलोड करने को प्राथमिकता देते हैं, तो ब्राउज़र को स्क्रिप्ट या फ़ॉन्ट फ़ाइल जैसे दूसरे रिसॉर्स की प्राथमिकता हटानी होगी. किसी इमेज पर fetchpriority="high"
सिर्फ़ तब सेट करें, जब वह वाकई में ज़रूरी हो.
पहले से लोड करने से जुड़े संकेत
कुछ इमेज शायद शुरुआती एचटीएमएल में उपलब्ध न हों—अगर उन्हें JavaScript से जोड़ा गया हो या सीएसएस में बैकग्राउंड इमेज के रूप में जोड़ा गया हो. इन अहम इमेज को समय से पहले फ़ेच करने के लिए, प्रीलोड का भी इस्तेमाल किया जा सकता है. इसे वाकई ज़रूरी इमेज के लिए fetchpriority
एट्रिब्यूट के साथ जोड़ा जा सकता है:
<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">
ध्यान रखें कि इसका इस्तेमाल ज़रूरत के मुताबिक ही करें, ताकि ब्राउज़र की प्राथमिकता के हिसाब से मिली जानकारी को बहुत ज़्यादा प्राथमिकता न दी जाए. इस वजह से, परफ़ॉर्मेंस में गिरावट आ सकती है.
imagesrcset
और imagesizes
एट्रिब्यूट के ज़रिए, srcset (जिसके बारे में नीचे बताया गया है) के आधार पर रिस्पॉन्सिव इमेज को पहले से लोड करने की सुविधा ज़्यादा बेहतर है और यह कुछ ब्राउज़र में काम करती है, लेकिन सभी में नहीं:
href
फ़ॉलबैक को बाहर रखकर, यह पक्का किया जा सकता है कि जिन ब्राउज़र पर यह काम नहीं करता वे गलत इमेज पहले से लोड न करें.
इन इमेज के ब्राउज़र पर काम करने की सुविधा के हिसाब से, अलग-अलग इमेज फ़ॉर्मैट के आधार पर पहले से लोड करने की सुविधा फ़िलहाल काम नहीं करती. इसकी वजह से, इन्हें ज़्यादा डाउनलोड किया जा सकता है.
जहां तक हो सके, पेज को पहले से लोड होने से बचाएं. साथ ही, इमेज को शुरुआती एचटीएमएल में रखें, ताकि कोड को बार-बार न बदला जा सके. साथ ही, ब्राउज़र पर काम करने वाले विकल्पों की पूरी रेंज का ऐक्सेस दिया जा सके.
इमेज डिकोड करना
decoding
एट्रिब्यूट को भी img
एलिमेंट में जोड़ा जा सकता है. ब्राउज़र को बताया जा सकता है कि इमेज को एसिंक्रोनस तरीके से डिकोड किया जा सकता है. इसके बाद, ब्राउज़र अन्य कॉन्टेंट को प्रोसेस करने को प्राथमिकता दे सकता है.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
>
अगर कॉन्टेंट की प्राथमिकता के लिए सबसे ज़रूरी इमेज है, तो sync
वैल्यू का इस्तेमाल किया जा सकता है.
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
decoding="sync"
>
decoding
एट्रिब्यूट से इस बात पर कोई असर नहीं पड़ेगा कि इमेज कितनी तेज़ी से डीकोड की जाती है. हालांकि, इससे सिर्फ़ यह तय होगा कि ब्राउज़र, अन्य कॉन्टेंट को रेंडर करने से पहले इमेज के डीकोड होने का इंतज़ार करे या नहीं.
ज़्यादातर मामलों में, इसका कोई खास असर नहीं होगा. हालांकि, कुछ मामलों में इसकी मदद से इमेज या कॉन्टेंट को थोड़ा तेज़ी से दिखाया जा सकता है. उदाहरण के लिए, किसी बड़े दस्तावेज़ के लिए, जिसमें बहुत से एलिमेंट हैं और जिन्हें रेंडर होने में समय लगता है. साथ ही, अगर बड़ी इमेज को डिकोड करने में समय लगता है, तो ब्राउज़र को ज़रूरी इमेज पर sync
सेट करने से, इमेज का इंतज़ार करने और दोनों को एक साथ रेंडर करने के लिए कहा जाएगा. इसके अलावा, async
को सेट करने पर, इमेज डिकोड होने का इंतज़ार किए बिना कॉन्टेंट को तेज़ी से दिखाया जा सकता है.
हालांकि, बेहतर विकल्प यह है कि बहुत ज़्यादा डीओएम साइज़ से बचें. साथ ही, यह पक्का करें कि डीकोड करने में लगने वाले समय को कम करने के लिए, रिस्पॉन्सिव इमेज का इस्तेमाल किया गया हो. इसका मतलब है कि डिकोड करने वाले एट्रिब्यूट का कोई असर नहीं होगा.
srcset
के साथ रिस्पॉन्सिव इमेज
max-inline-size: 100%
के इस एलान की वजह से, आपकी इमेज कभी भी अपने कंटेनर से अलग नहीं होंगी. हालांकि, कोई ऐसी बड़ी इमेज होने पर भी अच्छा नहीं लगेगा जो फ़िट होने के लिए सिकुड़ सकती है. अगर कोई व्यक्ति कम बैंडविड्थ वाले नेटवर्क पर छोटी स्क्रीन वाले डिवाइस का इस्तेमाल करता है, तो वह बेवजह बड़े साइज़ की इमेज डाउनलोड कर लेगा.
अगर एक ही इमेज के अलग-अलग साइज़ में कई वर्शन बनाए जाते हैं, तो ब्राउज़र को srcset
एट्रिब्यूट का इस्तेमाल करके उनके बारे में बताया जा सकता है.
चौड़ाई का डिस्क्रिप्टर
आपके पास कॉमा से अलग की गई वैल्यू की सूची बनाने का विकल्प होता है. हर वैल्यू, किसी इमेज का यूआरएल होना चाहिए. इसके बाद, स्पेस और इमेज के बारे में कुछ मेटाडेटा होना चाहिए. इस मेटाडेटा को डिस्क्रिप्टर कहा जाता है.
इस उदाहरण में, मेटाडेटा w
यूनिट का इस्तेमाल करके, हर इमेज की चौड़ाई के बारे में बताता है. एक w
का मतलब है एक पिक्सल.
<img
src="small-image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
srcset="small-image.png 300w,
medium-image.png 600w,
large-image.png 1200w"
>
srcset
एट्रिब्यूट, src
एट्रिब्यूट को नहीं बदलता. इसके बजाय, srcset
एट्रिब्यूट, src
एट्रिब्यूट की मदद से पूरे करता है. आपके पास एक मान्य src
एट्रिब्यूट होना चाहिए. हालांकि, अब ब्राउज़र इसकी वैल्यू को srcset
एट्रिब्यूट में दिए गए किसी विकल्प से बदल सकता है.
ब्राउज़र तब तक बड़ी इमेज डाउनलोड नहीं करेगा, जब तक कि उनकी ज़रूरत न हो. इससे बैंडविड्थ बचती है.
साइज़
अगर विड्थ डिस्क्रिप्टर का इस्तेमाल किया जा रहा है, तो आपको ब्राउज़र को ज़्यादा जानकारी देने के लिए, sizes
एट्रिब्यूट का भी इस्तेमाल करना होगा. यह ब्राउज़र को बताता है कि अलग-अलग स्थितियों में, इमेज का साइज़ कितना होगा. ये शर्तें, मीडिया क्वेरी में बताई जाती हैं.
sizes
एट्रिब्यूट, मीडिया क्वेरी और इमेज की चौड़ाई की कॉमा-सेपरेटेड लिस्ट देता है.
<img
src="small-image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
srcset="small-image.png 300w,
medium-image.png 600w,
large-image.png 1200w"
sizes="(min-width: 66em) 33vw,
(min-width: 44em) 50vw,
100vw"
>
इस उदाहरण में, आप ब्राउज़र को बता रहे हैं कि इमेज को स्क्रीन के एक तिहाई से ज़्यादा हिस्से में दिखाने के लिए, व्यूपोर्ट की चौड़ाई 66em
से ऊपर है (उदाहरण के लिए, तीन कॉलम वाले लेआउट के अंदर).
व्यूपोर्ट की चौड़ाई 44em
और 66em
के बीच के लिए, इमेज को स्क्रीन की आधी चौड़ाई (दो कॉलम वाला लेआउट) में दिखाएं.
44em
के नीचे दी गई किसी भी चीज़ के लिए, इमेज को स्क्रीन की पूरी चौड़ाई पर दिखाएं.
इसका मतलब है कि सबसे चौड़ी स्क्रीन के लिए, सबसे बड़ी इमेज का इस्तेमाल करना ज़रूरी नहीं है. एक से ज़्यादा कॉलम वाला लेआउट दिखाने वाली चौड़ी ब्राउज़र विंडो, एक कॉलम में फ़िट होने वाली इमेज का इस्तेमाल करेगी. वह इमेज, छोटी स्क्रीन पर सिंगल-कॉलम लेआउट के लिए इस्तेमाल की जाने वाली इमेज से छोटी हो सकती है.
पिक्सल की सघनता के बारे में बताने वाला
यहां भी एक ही इमेज के कई वर्शन देने पड़ सकते हैं.
कुछ डिवाइसों में, हाई डेंसिटी वाले डिसप्ले होते हैं. डबल-डेंसिटी वाले डिसप्ले पर, एक पिक्सल के अंदर दो पिक्सल की जानकारी डाली जा सकती है. इससे उस तरह के डिसप्ले पर इमेज बेहतर दिखती रहती हैं.
सघनता डिस्क्रिप्टर का इस्तेमाल करके, src
एट्रिब्यूट में दी गई इमेज के साथ इमेज की पिक्सल सघनता के बारे में बताएं. सघनता डिस्क्रिप्टर एक संख्या होती है, जिसके बाद अक्षर x: 1x
, 2x
वगैरह होते हैं.
<img
src="small-image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
srcset="small-image.png 1x,
medium-image.png 2x,
large-image.png 3x"
>
अगर small-image.png
का साइज़ 300 x 200 पिक्सल और medium-image.png
का साइज़ 600 x 400 पिक्सल है, तो srcset
सूची में medium-image.png
के बाद, 2x
हो सकता है.
आपको पूर्ण संख्याओं का उपयोग नहीं करना है. अगर इमेज के दूसरे वर्शन का साइज़ 450 x 300 पिक्सल है, तो 1.5x
की मदद से उसके बारे में जानकारी दी जा सकती है.
प्रज़ेंटेशन के लिए इमेज
एचटीएमएल में मौजूद इमेज, कॉन्टेंट होते हैं. इसलिए, आप हमेशा स्क्रीन रीडर और सर्च इंजन के लिए, इमेज के ब्यौरे के साथ alt
एट्रिब्यूट देते हैं.
अगर किसी ऐसी इमेज को एम्बेड किया जाता है जो पूरी तरह से आकर्षक है और जिसमें कोई काम का कॉन्टेंट नहीं है, तो खाली alt
एट्रिब्यूट का इस्तेमाल करें.
<img
src="flourish.png"
alt=""
width="400"
height="50"
>
आपको अब भी alt
एट्रिब्यूट को शामिल करना होगा. alt
एट्रिब्यूट मौजूद न होना और खाली alt
एट्रिब्यूट एक जैसा नहीं होता. खाली alt
एट्रिब्यूट से स्क्रीन रीडर को पता चलता है कि यह इमेज प्रज़ेंटेशन के मकसद से बनाई गई है.
आम तौर पर, प्रज़ेंटेशन या सजावटी इमेज आपके एचटीएमएल में नहीं होनी चाहिए. एचटीएमएल, स्ट्रक्चर के लिए होता है. सीएसएस, प्रज़ेंटेशन के लिए है.
बैकग्राउंड की इमेज
प्रज़ेंटेशन वाली इमेज लोड करने के लिए, सीएसएस में background-image
प्रॉपर्टी का इस्तेमाल करें.
element {
background-image: url(flourish.png);
}
background-image
के लिए image-set
फ़ंक्शन का इस्तेमाल करके, एक से ज़्यादा इमेज के बारे में बताया जा सकता है.
सीएसएस में image-set
फ़ंक्शन काफ़ी हद तक एचटीएमएल में srcset
एट्रिब्यूट की तरह काम करता है. हर इमेज के लिए, पिक्सल सघनता डिस्क्रिप्टर का इस्तेमाल करके इमेज की सूची दें.
element {
background-image: image-set(
small-image.png 1x,
medium-image.png 2x,
large-image.png 3x
);
}
ब्राउज़र, डिवाइस के पिक्सल की सघनता के हिसाब से सबसे सही इमेज चुनेगा.
अपनी साइट पर इमेज जोड़ते समय कई बातों का ध्यान रखना चाहिए:
हर इमेज के लिए सही जगह रिज़र्व करना. यह पता लगाया जा रहा है कि आपको कितने साइज़ की ज़रूरत है. यह तय करना कि इमेज कॉन्टेंट है या सजावटी है.
सही इमेज पाने में समय लगाना सही है. खराब इमेज रणनीतियां, उपयोगकर्ताओं को परेशानी और परेशानी के लिए ज़िम्मेदार हैं. इमेज के लिए एक अच्छी रणनीति, आपकी साइट को तेज़ और तेज़ महसूस कराती है. भले ही, उपयोगकर्ता के डिवाइस या इंटरनेट कनेक्शन की वजह से, किसी भी डिवाइस या इंटरनेट का इस्तेमाल किया जा रहा हो.
आपकी टूलकिट में एक और एचटीएमएल एलिमेंट है, जिससे इमेज पर ज़्यादा कंट्रोल रखा जा सकता है: picture
एलिमेंट.
आपने जो सीखा है उसकी जांच करें
इमेज के बारे में अपनी जानकारी को परखें
इमेज के लिए स्टाइल जोड़ना ज़रूरी है, ताकि वे व्यूपोर्ट में फ़िट हो सकें.
जब किसी इमेज की ऊंचाई और चौड़ाई को किसी अस्वाभाविक आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) में ज़बरदस्ती लागू किया जाता है, तो इन अनुपातों में इमेज के फ़िट होने के लिए, कौनसी स्टाइल मदद कर सकती है?
object-fit
contain
और cover
जैसे कीवर्ड के साथ इमेज कैसे फ़िट होती है.image-fit
fit-image
aspect-ratio
अपनी इमेज में height
और width
लगाने से, सीएसएस को इसे अलग स्टाइल में नहीं किया जा सकता.
srcset
एट्रिब्यूट, src
एट्रिब्यूट का _______ नहीं देता है. यह _______ नहीं है.
srcset
, src
एट्रिब्यूट को बिलकुल नहीं बदलता.इमेज में alt
मौजूद न होना, खाली alt
के जैसा ही है.
alt
एट्रिब्यूट से स्क्रीन रीडर को पता चलता है कि यह इमेज प्रज़ेंटेशन के मकसद से बनाई गई हैalt
मौजूद न होने से, स्क्रीन रीडर को कोई सिग्नल नहीं मिलता.