Lighthouse चलाना
यह गड़बड़ी इतनी छोटी है कि इसकी इमेज को मैन्युअल तरीके से जांचा जा सकता है. हालांकि, ज़्यादातर वेबसाइटों के लिए, इस प्रोसेस को ऑटोमेट करने के लिए Lighthouse जैसे टूल का इस्तेमाल करना ज़रूरी है.
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.
- DevTools खोलने के लिए, `Control+Shift+J` दबाएं. Mac पर, `Command+Option+J` दबाएं.
- Lighthouse टैब पर क्लिक करें.
- पक्का करें कि कैटगरी सूची में, परफ़ॉर्मेंस चेकबॉक्स चुना गया हो.
- रिपोर्ट जनरेट करें बटन पर क्लिक करें.
- इमेज का सही साइज़ ऑडिट के नतीजे देखें.
Lighthouse ऑडिट से पता चलता है कि इस पेज की दोनों इमेज का साइज़ बदलना होगा.
flower_logo.png
ठीक करें
पेज पर सबसे ऊपर से शुरू करें और लोगो की इमेज ठीक करें.
- DevTools के एलिमेंट पैनल में
flower_logo.png
की जांच करें.
यह flower_logo.png
के लिए सीएसएस है:
.logo {
width: 50px;
height: 50px;
}
इस इमेज की सीएसएस चौड़ाई 50 पिक्सल है. इसलिए, flower_logo.png
को मैच करने के लिए उसका साइज़ बदला जाना चाहिए. इमेज को फ़िट करने के लिए उसका साइज़ बदलने के लिए, ImageMagick का इस्तेमाल किया जा सकता है. ImageMagick, इमेज में बदलाव करने के लिए सीएलआई टूल है. यह codelab एनवायरमेंट में पहले से इंस्टॉल होता है.
- प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
- Terminal पर क्लिक करें (ध्यान दें: अगर Terminal बटन नहीं दिखता है, तो आपको फ़ुलस्क्रीन विकल्प का इस्तेमाल करना पड़ सकता है).
- कंसोल में, यह टाइप करें:
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% के बराबर होता है).
इस इमेज का सही साइज़, उस डिवाइस पर निर्भर करेगा जिस पर इसे देखा जा रहा है. इसलिए, आपको इसका साइज़ इस तरह से बदलना चाहिए कि ज़्यादातर उपयोगकर्ताओं के लिए यह सही लगे. आपके पास अपने ऐप्लिकेशन के उपयोगकर्ताओं के बीच, स्क्रीन के आम तौर पर इस्तेमाल होने वाले रिज़ॉल्यूशन के बारे में जानने के लिए, ऐप्लिकेशन के आंकड़ों का डेटा देखने का विकल्प होता है:
इस डेटा से पता चलता है कि इस साइट पर आने वाले 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
लाइटहाउस को फिर से चलाएं
- लाइटहाउस परफ़ॉर्मेंस ऑडिट को फिर से चलाकर पुष्टि करें कि आपने इमेज का साइज़ फिर से सही कर लिया है.
... और यह कामयाब नहीं हुआ! ऐसा क्यों है?
लाइटहाउस अपने टेस्ट Nexus 5x पर करता है. Nexus 5x की स्क्रीन का रिज़ॉल्यूशन 1080 x 1920 है.
Nexus 5x के लिए, flower_photo.jpg
का सबसे सही साइज़ 540 पिक्सल चौड़ा (1080 पिक्सल * . 5). यह हमारे साइज़ में बदली गई इमेज से बहुत छोटा है.
क्या इमेज का साइज़ और भी छोटा करना चाहिए? शायद। हालांकि, इसका जवाब हमेशा साफ़ तौर पर नहीं मिलता.
यहां हाई रिज़ॉल्यूशन वाले डिवाइसों पर इमेज की क्वालिटी और परफ़ॉर्मेंस के बीच समझौता किया जाता है. यह अनुमान लगाना आसान है कि उपयोगकर्ता, इमेज को कितनी बारीकी से देखेंगे. इसलिए, आपको इमेज को छोटा करना चाहिए. हालांकि, कुछ मामलों में इमेज की क्वालिटी ज़्यादा अहम होती है.
अच्छी बात यह है कि अलग-अलग साइज़ की इमेज दिखाने के लिए, रिस्पॉन्सिव इमेज इस्तेमाल करके इस समस्या से बचा जा सकता है. इस बारे में ज़्यादा जानने के लिए, रिस्पॉन्सिव इमेज की गाइड देखें.