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

Katie Hempenius

रन लाइटहाउस

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

1. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन .
2. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
3. Lighthouse टैब पर क्लिक करें.
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 पर क्लिक करें (ध्यान दें: अगर 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 की सीएसएस चौड़ाई को " ब्राउज़र." (एक वर्शन 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

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

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

... और यह कामयाब नहीं हुआ! ऐसा क्यों है?

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

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

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

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