ब्राउज़र कैसे छवियां प्रस्तुत करते हैं?

Question

हालांकि यह एक साधारण सवाल लगता है, मैं इसके बारे में सोच रहा हूं।

ब्राउज़र कैसे छवियों को प्रस्तुत करते हैं? मेरा मतलब है कि एक उदाहरण के लिए, मान लें कि मेरे पास 1 एमबी छवि है जो 3000px x 1500px है। मैं फिर इस छवि को एक कंटेनर में रखने का फैसला करता हूं जो चौड़ाई के लिए सेट है: 100%; जिसका अर्थ यह है कि यह reponsively पैमाने पर होगा। क्या ब्राउजर पूरे 1 एमबी लोड करेगा और फिर कंटेनर फिट करने के लिए छवि को स्केल करने के लिए आगे बढ़ेगा या फिर इसे स्केल करेगा और फिर इसे लोड करने के लिए आगे बढ़ेगा?

मैं पूछ रहा हूं क्योंकि यह मेरी स्थिति बहुत अधिक है और यदि यह पूर्व (पहले 1 एमबी लोड करें) तो मुझे लगता है कि मुझे मोबाइल उपकरणों पर एक अलग छवि की सेवा करनी होगी?

धन्यवाद

संपादित करें: के बाद से लोग कह रहे हैं कि यह 1mb छवि पहले से लोड होगा, आप कैसे सुझाव है मैं उपयोगकर्ता के लिए एक बड़ी छवि की सेवा? मोबाइल के लिए इसे स्केल करें और मोबाइल/डेस्कटॉप संस्करण रखें?

Answer 1

ब्राउज़र (स्पष्ट रूप से) इसे लोड करने से पहले किसी छवि के साथ स्केल (या कुछ भी नहीं) स्केल नहीं कर सकता है।

Answer 2

छवि को HTTP अनुरोध के माध्यम से पहले पुनर्प्राप्त किया गया है उदा।

GET /images/myimage.png 

और फिर स्केलिंग/परिवर्तन लागू होते हैं। तो यदि आप विभिन्न प्लेटफार्मों के लिए अलग-अलग छवियां चाहते हैं तो आपको इस तरह के अनुरोध करना चाहिए।

Answer 3

छवि पूरी तरह से लोड होने के बाद सीएसएस लागू होती है। तो संक्षेप में यह पहले 1 एमबी छवि लोड करना होगा और फिर आयाम लागू करना होगा। इसके अलावा छवियों को सर्वर पक्ष में संग्रहीत किया जाता है। मैं जो इस का वर्णन करता है एक बहुत ही उपयोगी छवि पाया: -

एक तरफ ध्यान दें पर:

ब्राउज़र अक्सर समय की एक बहुत ही कम समय में एक ही पृष्ठ कई बार प्रस्तुत करना, विशेष रूप से पढ़ने के बाद छवि मेटाडाटा।