हम सभी के साथ ऐसा कभी न कभी हुआ है: आप किसी इमेज को करें. इमेज ठीक लग रही है, लेकिन इससे उपयोगकर्ताओं को लोगों की भावनाओं को ठेस पहुंचाने वाला पेज परफ़ॉर्मेंस.
गलत आकार वाली इमेज की पहचान करना
लाइटहाउस की मदद से, गलत साइज़ की इमेज को आसानी से पहचाना जा सकता है. यह चलाकर देखेंः परफ़ॉर्मेंस ऑडिट (लाइटहाउस > विकल्प > परफ़ॉर्मेंस) और सही साइज़ वाली इमेज ऑडिट के नतीजे. ऑडिट में ऐसी कोई भी इमेज शामिल होती है जो का आकार बदलना होगा.
इमेज का सही साइज़ तय करना
इमेज का साइज़ बदलना काफ़ी मुश्किल हो सकता है. इस कारण, हमने दो काम करता है: "अच्छा" और "बेहतर." दोनों से परफ़ॉर्मेंस बेहतर होगी, लेकिन "बेहतर" इसलिए, मुमकिन है कि इसे समझने और लागू करने में थोड़ा ज़्यादा समय लगे. हालांकि, यह आपको और बेहतर परफ़ॉर्मेंस के लिए भी इनाम मिलेंगे. सबसे बढ़िया विकल्प आप उसे आसानी से लागू कर सकते हैं.
सीएसएस यूनिट के बारे में ज़रूरी जानकारी
एचटीएमएल एलिमेंट का साइज़ तय करने के लिए, सीएसएस यूनिट दो तरह की होती हैं: चित्र सहित:
- निरपेक्ष इकाइयां: जिन तत्वों को निरपेक्ष इकाइयों का इस्तेमाल करके शैली दी गई है वे हमेशा एक ही साइज़ में दिखाए जाते हैं, भले ही कोई भी डिवाइस हो. मान्य, निरपेक्ष सीएसएस यूनिट: px, cm, mm, in.
- सापेक्ष इकाइयां: सापेक्ष इकाइयों का उपयोग करके स्टाइल किए गए तत्वों को यहां दिखाया जाएगा अलग-अलग साइज़, जो बताई गई लंबाई के आधार पर अलग-अलग हो सकते हैं. के उदाहरण मान्य, मिलती-जुलती सीएसएस यूनिट: %, vw (व्यूपोर्ट की चौड़ाई का 1vw = 1%), em (1.5 em = 1.5 गुना फ़ॉन्ट साइज़).
"अच्छा" अप्रोच
इमेज का साइज़, इन चीज़ों के हिसाब से तय किया गया है...
- सापेक्ष इकाइयां: चित्र का आकार उस आकार में बदलें, जो सभी डिवाइस पर काम करेगा.
Analytics के डेटा की जांच करने से, आपको मदद मिल सकती है (जैसे, Google Analytics) से संपर्क करके यह देख सकते हैं कि आपके उपयोगकर्ता आम तौर पर किन डिसप्ले साइज़ का इस्तेमाल करते हैं. इसके अलावा, screensiz.es कई सामान्य डिवाइसों के डिसप्ले के बारे में जानकारी देता है. - एब्सलूट इकाइयां: इमेज को जिस साइज़ में दिखाना है उसके हिसाब से साइज़ बदलें.
DevTools एलिमेंट पैनल का इस्तेमाल करके, यह पता लगाया जा सकता है कि इमेज का साइज़ क्या है पर दिखाया गया.
"बेहतर" अप्रोच
ऐब्सलूट और रिलेटिव साइज़ वाली इमेज के लिए, srcset का इस्तेमाल करें
और sizes
एट्रिब्यूट का इस्तेमाल करके, अलग-अलग डिसप्ले डेंसिटी पर अलग-अलग इमेज दी जा सकती हैं.
रिस्पॉन्सिव इमेज के बारे में गाइड पढ़ें.
"डिसप्ले सघनता" का मतलब यह है कि अलग-अलग डिसप्ले पिक्सल की डेंसिटी. अन्य सभी चीज़ों की वैल्यू बराबर होने पर, पिक्सल डेंसिटी ज़्यादा होती है कम पिक्सल सघनता वाले डिसप्ले की तुलना में डिसप्ले बेहतर दिखेगा.
इसलिए, अगर आप चाहते हैं कि उपयोगकर्ता पिक्सल की सघनता पर ध्यान दिए बिना, सबसे सटीक इमेज देखें उनके डिवाइस का इस्तेमाल किया जा सकता है.
रिस्पॉन्सिव इमेज (स्क्रीन के हिसाब से साइज़ बदलने वाली इमेज) तकनीक की मदद से, आपके पास इमेज के अलग-अलग वर्शन और डिवाइस के लिए सही इमेज चुनें सबसे अच्छा है.
सभी डिवाइस पर काम करने वाली इमेज छोटे डिवाइस. रिस्पॉन्सिव इमेज की तकनीकें, खास तौर पर srcset और साइज़, आपको इमेज के कई वर्शन तय करने और डिवाइस को चुनने की अनुमति देता है उसके हिसाब से सबसे सही साइज़.
इमेज का साइज़ बदलें
आपने चाहे जो भी तरीका चुना हो, आपको अपने Search Ads 360 कैंपेन का इस्तेमाल करना मददगार लग सकता है इमेज का साइज़ बदलने के लिए ImageMagick. ImageMagick सबसे लोकप्रिय हैं कमांड-लाइन टूल का इस्तेमाल कर सकते हैं. ज़्यादातर लोग इमेज का साइज़ बदल सकते हैं GUI-आधारित इमेज एडिटर के मुकाबले सीएलआई का इस्तेमाल करने पर तेज़ी से मिलता है.
इमेज का साइज़ बदलकर, ओरिजनल इमेज के साइज़ को 25% करें:
convert flower.jpg -resize 25% flower_small.jpg
इमेज को "200 पिक्सल चौड़ी और 100 पिक्सल लंबाई" के अंदर फ़िट करने के लिए स्केल करें:
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
अगर आप कई इमेज का साइज़ बदलने वाले हैं, तो आपको ऐसी स्क्रिप्ट या सेवा जिसका इस्तेमाल इस प्रोसेस को अपने-आप करने के लिए किया जाता है. इस बारे में ज़्यादा जानने के लिए, यहां जाएं: रिस्पॉन्सिव इमेज के बारे में जानकारी देने वाली गाइड.
डाइमेंशन तय करके लेआउट शिफ़्ट से बचें
इस गाइड में डाउनलोड की गई ग़ैर-ज़रूरी बाइट की संख्या को कम करने के लिए, इमेज के डाइमेंशन के बारे में बताया गया है. हालांकि, यह ध्यान रखना ज़रूरी है कि लेआउट में इमेज के लिए सही जगह तय करना, पेज की कुल लेआउट शिफ़्ट मेट्रिक को कम करने का एक और अहम हिस्सा है. एचटीएमएल में इमेज दिखाते समय, सही width और height एट्रिब्यूट का इस्तेमाल करें. इससे ब्राउज़र को पता चलेगा कि इमेज के लेआउट में कितनी जगह देनी है:
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
इन एट्रिब्यूट या सीएसएस के साइज़ के बिना, ब्राउज़र को यह पता नहीं चलता कि इमेज लोड होने तक कितनी जगह लेगा. इससे दस्तावेज़ के लेआउट शिफ़्ट हो जाते हैं. इससे उपयोगकर्ताओं को परेशानी हो सकती है. ऐसा तब होता है, जब कॉन्टेंट पढ़ने या देखने के बाद कॉन्टेंट कहीं और ले जाता है. इससे उपयोगकर्ता किताब पढ़ते समय अपनी जगह खो सकते हैं या खो सकते हैं वे टारगेट किए गए हिट टारगेट पर क्लिक कर देते हैं. साथ ही, पेज लोड होने के दौरान किसी ऐसे पेज पर क्लिक कर देते हैं जो उनका इरादा नहीं था.
साफ़ तौर पर चौड़ाई और ऊंचाई देने के बजाय, इमेज पर सीएसएस aspect-ratio प्रॉपर्टी का इस्तेमाल करें. इसका असर एलिमेंट के साइज़ पर वैसा ही होता है जैसा width और height एट्रिब्यूट इस तरह से करते हैं कि कंटेनर के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) एक जैसा रहेगा. हालांकि, दोनों में अंतर यह है कि इमेज में दिए गए आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) की तुलना में इमेज का अलग आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) इस्तेमाल किया जा सकता है. इसलिए, हो सकता है कि आप object-fit सेटिंग का इस्तेमाल करके, यह पक्का करना चाहें कि 16/9 वाले इस व्यू में इमेज डिस्टॉर्ट न हो:
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
पुष्टि करें
अपनी सभी इमेज का साइज़ बदलने के बाद, लाइटहाउस को फिर से चलाएं और यह पुष्टि करें कि आपने कोई इमेज नहीं दिखाई है कुछ भी मिस हो जाए.