<img /> प्रदर्शन में पृष्ठभूमि-छवि (सीएसएस) बनाम

Question

मैं एक ऐसी साइट का निर्माण कर रहा हूं जो स्क्रॉलिंग प्लगइन का उपयोग कर रहा है जो मूल रूप से स्क्रॉलिंग को एनिमेट करता है। मैं प्रदर्शन के बारे में काफी चिंता करता हूं जैसे कि मैं साइट पर कुछ छवियां डालता हूं, स्क्रॉलिंग/एनिमेटिंग के दौरान यह काफी चंचल दिखता है।

छवियों के साथ पता लगाने वाली मुख्य समस्या रीफ्लो/रीपेंट समस्या है, जब छवि में सही आयाम नहीं होते हैं और इसलिए स्केल किया जाता है (मुझे इससे निपटना होगा, मुझे best practice के बारे में पता है)।

इस कथन के साथ दिमाग में (छवियों को स्केल किया जाएगा)। प्रदर्शन के लिए पृष्ठभूमि के रूप में उन छवियों के साथ बेहतर, छवि तत्व या divs क्या होना चाहिए?

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

<img />: http://jsfiddle.net/ek6Xn/

<img src="..." /> 

background-image: http://jsfiddle.net/ek6Xn/1/

<div></div> 

div { 
    background:url(...); 
    background-size:100% 100%; 
} 

संदर्भ:

1. Difference in performance between img tag elements vs divs with background images?
2. When to use IMG vs. CSS background-image?
3. http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
4. http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode

Answer 1

व्यक्तिगत तौर पर मैं इस उदाहरण में प्रदर्शन के बारे में भूल जाते हैं और क्या छवि है पर ध्यान केंद्रित करेंगे:

1) छवि = सामग्री

2) पृष्ठभूमि आईएम आयु = डिज़ाइन

जिस तरह से मैं इसके बारे में सोचने की सोचता हूं, क्या मैं चाहता हूं कि सभी स्क्रीन पर छवि सभी स्क्रीन आकारों पर दिखाई दे, सीएसएस के साथ या तो चालू या बंद हो? क्या मैं चाहता हूं कि छवि Google और फेसबुक द्वारा "अनुक्रमित" हो। अगर उत्तर सभी या इनमें से किसी भी प्रश्न के लिए हाँ है, तो आम तौर पर छवि "सामग्री" होती है और आपको एक आईएमजी टैग का उपयोग करना चाहिए।

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