सही डाइमेंशन वाली इमेज दिखाएं

केटी हेम्पेनियस

इस कोडलैब को फ़ॉलो करने के लिए, दूसरे टैब में इस ग्लिच को खोलें.

लाइटहाउस चलाएं

यह ग्लिच इतना छोटा है कि इसकी इमेज को हाथ से जांचा जा सकता है. हालांकि, ज़्यादातर वेबसाइटों के लिए इसे ऑटोमेट करने के लिए Lighthouse जैसे टूल का इस्तेमाल करना ज़रूरी होता है.

1. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.
2. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
3. लाइटहाउस टैब पर क्लिक करें.
4. पक्का करें कि कैटगरी सूची में परफ़ॉर्मेंस चेकबॉक्स को चुना गया हो.
5. रिपोर्ट जनरेट करें बटन पर क्लिक करें.
6. सही साइज़ वाली इमेज ऑडिट के नतीजे देखें.

लाइटहाउस ऑडिट से पता चलता है कि इस पेज की दोनों इमेज का साइज़ बदलने की ज़रूरत है.

flower_logo.png ठीक करें

पेज के सबसे ऊपर से शुरू करें और लोगो इमेज को ठीक करें.

• DevTools एलिमेंट पैनल में flower_logo.png की जांच करें.

यह flower_logo.png के लिए सीएसएस है:

.logo {
  width: 50px;
  height: 50px;
}

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

1. प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
2. Terminal पर क्लिक करें (ध्यान दें: अगर टर्मिनल बटन नहीं दिखता है, तो आपको फ़ुलस्क्रीन विकल्प का इस्तेमाल करना पड़ सकता है).
3. कंसोल में, यह लिखें:

convert flower_logo.png -resize 50x50 flower_logo.png

flower_photo.jpg को ठीक करें

इसके बाद, बैंगनी रंग के फूलों की फ़ोटो ठीक करें.

• DevTools एलिमेंट पैनल में flower_photo.jpg की जांच करें.

यह flower_photo.jpg के लिए सीएसएस है:

.photo {
  width: 50vw;
  margin: 30px auto;
  border: 1px solid black;
}

50vw, flower_photo.jpg की सीएसएस चौड़ाई को "ब्राउज़र की आधी चौड़ाई" पर सेट करता है. (1vw ब्राउज़र की चौड़ाई के 1% के बराबर है).

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

इस डेटा से पता चलता है कि इस साइट पर आने वाले 95%से ज़्यादा लोग, 1920 पिक्सल या उससे कम चौड़ाई वाले स्क्रीन रिज़ॉल्यूशन का इस्तेमाल करते हैं.

इस जानकारी का इस्तेमाल करके, हम पता लगा सकते हैं कि इमेज कितनी चौड़ी होनी चाहिए: (1920 पिक्सल चौड़ी) * (ब्राउज़र की चौड़ाई का 50%) = 960 पिक्सल

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

• इमेज का साइज़ बदलकर 960 पिक्सल चौड़ा करने के लिए, ImageMagick का इस्तेमाल करें. टर्मिनल टाइप में:

# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg

# Windows
magick convert flower_photo.jpg -resize 960x flower_photo.jpg

ध्यान दें: 960x में टाइपिंग की कोई गलती नहीं होती, यह चौड़ाई की जानकारी देता है, लेकिन ऊंचाई की नहीं. इमेज की ऊंचाई को चौड़ाई के अनुपात में बढ़ाया जाएगा. जब आप सिर्फ़ एक ही दिशा में किसी इमेज के डाइमेंशन का ध्यान रखते हैं, तब यह एक आसान ट्रिक है.

लाइटहाउस को फिर से चलाएं

• आपने इमेज का साइज़ बदल दिया है या नहीं, इसकी पुष्टि करने के लिए लाइटहाउस परफ़ॉर्मेंस ऑडिट को फिर से चलाएं.

... और यह काम नहीं कर पाता! Why is that?

लाइटहाउस, Nexus 5x पर अपने टेस्ट करता है. Nexus 5x में 1080 x 1920 की स्क्रीन है. Nexus 5x के लिए, flower_photo.jpg का अधिकतम आकार 540 पिक्सल होगा चौड़ा (1080 पिक्सल * . 5). यह साइज़ बदलने वाली हमारी इमेज से काफ़ी छोटी है.

क्या आपको इमेज का साइज़ बदलकर और भी छोटा करना चाहिए? शायद। हालांकि, इसका जवाब हमेशा साफ़ तौर पर समझ नहीं आता.

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

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