ब्राउज़र प्रदर्शन को बेहतर बनाने के लिए छवि आयाम निर्दिष्ट करना

Question

मैंने हाल ही में Google डेवलपर टूल का उपयोग करके अपनी वेब साइट पर एक ऑडिट चलाया। मेरी छवियां सभी समान आकार की हैं (500 क्षैतिज बाय 300 ऊर्ध्वाधर पिक्सेल) इसलिए मैंने सोचा कि अगर मैं छवि आकार विशेषताओं को छोड़ दूं तो बेहतर होगा क्योंकि छवि आकार की गणना करने की कोई आवश्यकता नहीं होगी जब यह पहले से ही सही आकार है।

नेटवर्किंग यूटिलाइजेशन के तहत, इमेज डाइमेंशन को निर्दिष्ट करें, जिसे मैं निम्नलिखित देखता हूं

A width and height should be specified for all images in order to speed up 
page display. The following image(s) are missing a width and/or height:

अब मैं उलझन में हूँ। क्या मुझे अपनी छवियों में वास्तव में चौड़ाई और ऊँचाई की विशेषताएँ जोड़नी चाहिए, भले ही वे पहले से ही सही आकार की हों? यह बेमानी लगता है।

Answer 1

ब्राउज़र समानांतर में डेटा डाउनलोड करते हैं और जल्द से जल्द पेज को रेंडर करने की कोशिश करते हैं।

यदि आप आकार निर्दिष्ट नहीं करते हैं, तो ब्राउज़र को पता नहीं है कि छवि डाउनलोड पूरी तरह से पूर्ण होने तक छवि कितनी बड़ी होने वाली है।

यह विलंब ब्राउज़र को लेआउट को फिर से लिखने या फिर से भरने के लिए मजबूर करता है - पृष्ठ लोड समय में देरी।

इस मुद्दे के साथ अधिक छवियां - पृष्ठ धीमा होगा।

यदि आप या तो HTML या CSS में इमेज साइज निर्दिष्ट करते हैं, तो ब्राउजर कंटेंट के रिपेमेंट और रिफ्लो से बच सकता है।

इसके कारण आपको हमेशा छवि आकार निर्दिष्ट करना चाहिए। Google के पास इस पर कुछ सुझाव हैं।

https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions

ब्राउज़र रेंडरिंग प्रक्रिया पर अधिक जानकारी के लिए देखें: http://taligarsiel.com/Projects/howbrowserswork1.htm

निश्चित नहीं है कि यह कैसे अद्यतित है, लेकिन यह जानकारी देता है कि ब्राउज़र कैसे काम करते हैं और आप स्टाइल शीट को ओवरराइड करने के लिए इनलाइन सीएसएस का उपयोग नहीं करने जैसी चीजें क्यों करना चाहते हैं।

Comments

मजेदार है कि वे इसे सीएसएस में शामिल करने के लिए कहते हैं। मुझे लगता है कि वे सीएसएस लोड होने से पहले रेंडरिंग शुरू नहीं करते हैं, जो समझ में आता है कि सीएसएस के बिना पृष्ठ आम तौर पर पूरी तरह से अलग दिखता है ...

— एलेक्सिस विल्के

दरअसल, अधिकांश वर्तमान ब्राउज़र समानांतर में HTML / CSS से जानकारी प्रदान करते हैं। फिर उन्हें पेंटिंग पर जाने के लिए रेंडरिंग इंजन में खिलाया जाता है। यदि आप छवियों और अन्य लेआउट को ठीक से निर्दिष्ट करते हैं, तो पृष्ठ लेआउट तैयार हो सकता है जबकि अन्य गैर-अवरुद्ध संपत्ति डाउनलोड कर रहे हैं।

— jeffatrackaid

उस स्थिति में, छवि आकार के लिए, यदि मैं चाहता हूं कि मेरा पृष्ठ विभिन्न स्क्रीन आयामों के कारण उत्तरदायी हो, तो क्या पिक्सल के बजाय प्रतिशत निर्दिष्ट करना बेहतर होगा? एक लैपटॉप बनाम फोन पर एक छवि बहुत अलग दिखेगी।

— FastElephant

मैं लोगों को यह बताने के लिए पसंद करता हूं कि वे हमेशा कुछ ऐसा करें जो वे कम से कम 80% करते हों। :)

— jeffatrackaid

क्या यह उत्तर अभी भी मान्य है? लगता है कि Google ने अपनी पेजस्पीड साइट से सिफारिश को हटा दिया है।

— डेविड आइक

Answer 2

उत्तरदायी डिजाइन आम तौर पर किसी भी चौड़ाई या ऊंचाई विशेषताओं का उपयोग नहीं करता है

Google विकास उपकरण एक मार्गदर्शक है और आपको उनकी साइट पर पढ़ी गई सभी चीजों को लागू करने की आवश्यकता नहीं है, वास्तव में कुछ सामान पुराना है। अधिकांश उत्तरदायी वेबसाइटें उपयोग नहीं करती हैं widthया heightइसलिए कि वे चाहती हैं कि चित्र स्क्रीन के आकार के अनुकूल हों और निश्चित चौड़ाई और ऊंचाई का उपयोग करके <img>उपयोगकर्ता अनुभव को कम कर सकें और Google ने इसे सबसे महत्वपूर्ण कारकों में से एक घोषित किया है।

सीएसएस वर्कअराउंड

आप एक ब्लॉक स्तर के तत्व का उपयोग करने का विकल्प चुन सकते हैं जिसमें चौड़ाई और ऊंचाई है, व्यक्तिगत रूप से मैं एक का उपयोग नहीं करूंगा, लेकिन यहां Google ब्लॉक स्तर के बारे में क्या कहता है।

छवि तत्व या ब्लॉक-स्तरीय माता-पिता पर आयाम निर्दिष्ट करना सुनिश्चित करें तत्व पर आयाम या एक ब्लॉक-स्तरीय माता-पिता को सेट करना सुनिश्चित करें। यदि माता-पिता ब्लॉक-स्तरीय नहीं हैं, तो आयामों को अनदेखा किया जाएगा। पूर्वजों पर आयाम सेट न करें जो तत्काल माता-पिता नहीं है।

मुझे लगता है कि यह कुछ इस तरह दिखेगा:

स्थैतिक डिजाइन .ic {width:500px;height:500px;}

प्रभावी डिजाइन:

@media only screen and (max-width: 40em){.ic{width:1px;height:1px;}} Mobiles
@media only screen and (min-width: 40.063em){.ic{width:1px;height:1px;}} Tablets
@media only screen and (min-width: 40.063em) and (max-width: 64em){.ic{width:1px;height:1px;}} Small Screens
@media only screen and (min-width: 64.063em){.ic{width:1px;height:1px;}} Large Screens

फिर आपको दृष्टिकोण का पता लगाने और छवि के 4 विभिन्न संस्करणों की सेवा के लिए जावास्क्रिप्ट या किसी अन्य समाधान का उपयोग करने की आवश्यकता होगी, जो फिर से व्यावहारिक से कम है। इसलिए यदि आप उत्तरदायी डिजाइन का उपयोग कर रहे हैं, तो मैं सुरक्षित रूप से आगे बढ़ूंगा और चौड़ाई और ऊंचाई को जोड़ने से परेशान नहीं होगा ताकि आपकी वेबसाइट तरल हो, चाहे वह स्क्रीन पर कोई भी विचार क्यों न हो।

Comments

मुझे यह निश्चित नहीं है कि आप चौड़ाई / ऊंचाई की जानकारी का उपयोग नहीं करते हैं, लेकिन यह जानकारी व्यूपोर्ट के सापेक्ष है?

— jeffatrackaid

आप max-width:100%;उत्तरदायी डिजाइन का उपयोग करते समय आमतौर पर सीएसएस में उपयोग करते हैं। ऊंचाई और चौड़ाई का उपयोग करते हुए द्रव आकार बढ़ाए जाने और नीचे स्केलिंग को अक्षम हैं

— साइमन हैटर

क्या आपको इस बारे में कोई जानकारी है कि यह पेंटिंग या सामग्री की रिफ्लोज़ को कैसे प्रभावित करता है? मैं आंतरिक रूप से मान सकता हूं कि ब्राउज़र इस सापेक्ष राशि को एक निश्चित आकार में अनुवाद कर सकता है, ताकि आपको फिर से रंगना न पड़े।

— जेफेट्रैकैड

Answer 3

मैंने अभी Wordpress Stack Exchange पर एक समान प्रश्न का उत्तर दिया है। इसे यहां रिपॉजिट करना (व्यवस्थापक / मध्यस्थ: यदि इसकी अनुमति नहीं है, तो मुझे मदद करने का उचित तरीका बताएं)।

वास्तव में इसका मतलब यह नहीं है कि आपको html में चौड़ाई और ऊंचाई निर्दिष्ट करने की आवश्यकता है। इसका मतलब यह है कि आप उचित स्थान को आरक्षित कर सकते हैं और जब छवि लोड हो जाती है, तो ब्राउज़र को पृष्ठ को फिर से लिखना और फिर से लिखना नहीं पड़ता है।

इसके अलावा, यदि आप आयामों को हार्डकोड करते हैं, तो यह उत्तरदायी व्यवहार को हरा देता है। यदि आपका लेआउट उत्तरदायी नहीं है, तो यह ठीक है, लेकिन यदि आप कुछ जवाबदेही रखना चाहते हैं, तो आप परिणाम प्राप्त करने के लिए केवल CSS का उपयोग कर सकते हैं।

अधिकांश समय, दोनों चौड़ाई का उपयोग max-width:100करते हुए और काम करेंगे, लेकिन स्मैशिंग पत्रिका के इस पोस्ट में एक दिलचस्प तकनीक है: अधिकतम-चौड़ाई का उपयोग करने के बजाय: 100%, आप पैडिंग-बॉटम हैक का उपयोग कर सकते हैं :

"तकनीक के साथ, हम ऊंचाई को चौड़ाई के सापेक्ष एक माप के रूप में परिभाषित करते हैं। पैडिंग और मार्जिन में ऐसे आंतरिक गुण होते हैं, और हम उन तत्वों के लिए पहलू अनुपात बनाने के लिए उनका उपयोग कर सकते हैं, जिनमें कोई सामग्री नहीं है। क्योंकि पैडिंग की क्षमता है। , हम किसी तत्व की चौड़ाई के सापेक्ष पैडिंग-बॉटम सेट कर सकते हैं। यदि हम ऊंचाई को 0 पर सेट करते हैं, तो हम वही चाहते हैं जो हम चाहते हैं। [...]

अगला कदम कंटेनर के अंदर एक छवि रखना है और सुनिश्चित करें कि यह कंटेनर को भरता है। ऐसा करने के लिए, हमें छवि को कंटेनर के अंदर पूरी तरह से रखने की आवश्यकता है, जैसे: "

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Answer 4

प्रक्रिया कुछ इस प्रकार है:

1. .html फ़ाइल पढ़ें
2. .html फ़ाइल हेडर से, पढ़ें .css, .js फाइलें (.js AFTER .css ... होनी चाहिए)।
3. पेज से img और स्क्रिप्ट पढ़ें

इस प्रकार, छवि टैग "देर से" पढ़े जाते हैं। हालाँकि, आपके पृष्ठ के प्रारूपण की गणना करने के लिए, छवि का आकार होना एक अच्छी बात है (अन्यथा ब्राउज़र 1x1, 25x25 जैसे "यादृच्छिक" आकार का उपयोग करते हैं, ... जो भी ब्राउज़र ने प्रोग्राम किया है।)

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