पेज लोडिंग के लिए एचटीएमएल बनाम सीएसएस में छवि आयामों को निर्दिष्ट करना

Question

मैंने कहीं से बहुत समय पहले सीखा है कि एचटीएमएल दस्तावेज़ में <img> तत्वों के लिए चौड़ाई और ऊंचाई निर्दिष्ट करना पृष्ठ लोडिंग अनुभव में तेजी लाने और सुधारने के लिए, और आम तौर पर इसे रखा जाता है अभ्यास:

<img src="" width="100" height="100" /> 

अब मैं एक स्थिति है जहाँ मैं एक ही पृष्ठ पर छवियों की एक बहुत बड़ी संख्या है के साथ सामना कर रहा हूँ, और मैं दोनों आसान नियंत्रण और कम दोहराव HTML के लिए सीएसएस के माध्यम से आयाम स्थापित करने के लिए पसंद करते हैं कोड:

.whatever img {width: 100px; height: 100px;} 

यद्यपि यह एक गंभीर गंभीर मुद्दा नहीं है, मैं सोच रहा हूं कि सीएसएस में आयामों को घोषित करने के समान ही लाभ होगा जैसे एचटीएमएल में आयाम घोषित करना, या क्या इसे सीधे एचटीएमएल में ही किया जाना चाहिए?

कोई अंतर्दृष्टि का स्वागत किया जाएगा।

धन्यवाद

Answer 1

मुझे लगता है कि अगर शैली पत्रक तुरंत उपलब्ध है, छवि आयाम तुरंत लेआउट, जो व्यायाम के पूरे मुद्दे है पर लागू होंगे।

अनुमान है कि Google's pagespeed rules द्वारा समर्थित है।

अनावश्यक रीफ़्लो और रीपेंट की आवश्यकता को समाप्त द्वारा तेजी से प्रतिपादन के लिए सभी छवियों की चौड़ाई और ऊंचाई निर्दिष्ट की अनुमति देता है: वे निर्दिष्ट करने छवियों कि जिस तरह से (जोर मेरा) के साथ ठीक होने लगते हैं।

जब ब्राउज़र पृष्ठ को बताता है, तो इसे छवियों जैसे प्रतिस्थापन योग्य तत्वों के आसपास प्रवाह करने में सक्षम होना चाहिए। यह छवियों को डाउनलोड करने से पहले भी एक पृष्ठ प्रस्तुत करना शुरू कर सकता है, बशर्ते कि यह गैर-प्रतिस्थापन योग्य तत्वों को लपेटने के आयामों को जानता हो। यदि किसी दस्तावेज़ में कोई आयाम निर्दिष्ट नहीं है, या यदि निर्दिष्ट आयाम वास्तविक छवियों से मेल नहीं खाते हैं, तो छवियों को डाउनलोड होने के बाद ब्राउज़र को एक रिफ्लो और पुन: चित्रित करने की आवश्यकता होगी। रीफ्लो को रोकने के लिए, सभी छवियों की चौड़ाई और ऊंचाई निर्दिष्ट करें, या तो HTML <img> टैग, या सीएसएस में।

Answer 2

एक विशेषता में चौड़ाई और ऊंचाई को परिभाषित (के रूप में सीएसएस में के खिलाफ) के बीच महत्वपूर्ण अंतर है कि यह तो डेटा, नहीं एक प्रस्तुति पैरामीटर हो जाता है। बस एक निम्नलिखित स्टाइलशीट

img[src='/images/tree.jpeg'] { 
    width: 100px; 
    height: 100px; 
} 

यह बेकार में छवियों के साथ सीएसएस entangles प्रबंध कल्पना। यह अनुकूली लेआउट को भी प्रतिबंधित करता है, यानी आप अब तक लोड नहीं होने वाली छवियों को सही स्थान ले सकते हैं जब उनके आयामों में से एक अनुमानित होता है (उदा। width: 100%)।

इसके अलावा, object-fit जैसे सीएसएस नियमों पर विचार करें। width और heigth शैली गुणों के बारे में भ्रम का अर्थ उठ सकता है।