अगर रेंडर की गई किसी इमेज का आसपेक्ट रेशियो, सोर्स फ़ाइल के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) (सामान्य आसपेक्ट रेशियो) से काफ़ी अलग है, तो रेंडर की गई इमेज खराब दिख सकती है. इसकी वजह से, उपयोगकर्ता अनुभव खराब हो सकता है.
लाइटहाउस इमेज का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) ऑडिट कैसे काम नहीं करता है
लाइटहाउस, ऐसी किसी भी इमेज को फ़्लैग करता है जिसकी रेंडर की गई डाइमेंशन में कुछ पिक्सल से ज़्यादा का अंतर हो और उसे असल अनुपात में दिखाए जाने पर वह अनुमानित डाइमेंशन से मैच करता हो:
इमेज का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) गलत होने की दो आम वजहें हो सकती हैं:
- इमेज के लिए, चौड़ाई और ऊंचाई की ऐसी वैल्यू सेट की गई है जो सोर्स इमेज के डाइमेंशन से अलग हैं.
- इमेज, अलग-अलग साइज़ के कंटेनर के प्रतिशत के तौर पर चौड़ाई और ऊंचाई पर सेट होती है.
पक्का करें कि इमेज सही आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) में दिख रही हों
इमेज CDN का इस्तेमाल करें
इमेज CDN की मदद से, इमेज के अलग-अलग साइज़ के वर्शन बनाने की प्रोसेस को ऑटोमेट किया जा सकता है. खास जानकारी के लिए, इमेज को ऑप्टिमाइज़ करने के लिए इमेज सीडीएन का इस्तेमाल करें देखें. साथ ही, कोडलैब के लिए मदद पाने के लिए थंबर इमेज सीडीएन को कैसे इंस्टॉल करें लेख देखें.
उस सीएसएस की जांच करें जो इमेज के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) पर असर डालती है
अगर आपको उस सीएसएस को ढूंढने में समस्या आ रही है जिसकी वजह से आसपेक्ट रेशियो गलत हो रहा है, तो Chrome DevTools आपको सीएसएस के ऐसे एलान दिखा सकता है जिनसे किसी इमेज पर असर पड़ सकता है. ज़्यादा जानकारी के लिए, Google का सिर्फ़ वह सीएसएस देखें जो किसी एलिमेंट पर लागू किया गया है पेज देखें.
एचटीएमएल में इमेज की width और height एट्रिब्यूट की जांच करें
जहां भी हो सके, हर इमेज के width और height एट्रिब्यूट को अपने एचटीएमएल में शामिल करें. इससे ब्राउज़र, इमेज के लिए जगह तय कर पाएगा.
इस तरीके से यह पक्का करने में मदद मिलती है कि एक बार इमेज लोड होने के बाद, इमेज के नीचे मौजूद कॉन्टेंट में बदलाव न हो.
हालांकि, अगर रिस्पॉन्सिव इमेज का इस्तेमाल किया जा रहा है, तो एचटीएमएल में इमेज के डाइमेंशन की जानकारी देना मुश्किल हो सकता है. रिस्पॉन्सिव इमेज के लिए, आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) बनाए रखने के लिए, सीएसएस के आसपेक्ट रेशियो लाइब्रेरी या आसपेक्ट रेशियो बॉक्स का इस्तेमाल करें.
आखिर में, हर उपयोगकर्ता के डिवाइस के लिए सही साइज़ वाली इमेज दिखाने का तरीका जानने के लिए सही डाइमेंशन वाली इमेज दिखाना पोस्ट देखें.