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

Katie Hempenius
Katie Hempenius

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

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

Lighthouse में, सही साइज़ वाली इमेज का ऑडिट पूरा न होना.

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

flower_logo.png ठीक करें

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

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

DevTools का एलिमेंट पैनल

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

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

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

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

flower_photo.jpg ठीक करें

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

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

DevTools का एलिमेंट पैनल

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

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

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

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

स्क्रीन रिज़ॉल्यूशन के Google 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

Lighthouse को फिर से चलाना

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

लाइटहाउस की मदद से, इमेज के साइज़ का ऑडिट.

… और यह काम नहीं करता! ऐसा क्यों है?

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

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

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

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