क्या प्रत्यक्ष एचटीएमएल या सीएसएस में छवियों को परिभाषित करना बेहतर है?

Question

अगर मैं सीधे html में या सीएसएस में छवियों को सम्मिलित करने के विकल्प नहीं है, उदाहरण के लिए कहते हैं कि एक लिंक एक छवि में लिपटे मैं या तो कर सकता है ...

<a href="#"><img src="#" alt="" width="" height="" /></a> 

या मैं क्या कर सकता है ...

<a id="img" href="#"></a> 

#img {background: url('#') no-repeat; height: #; width: #;} 

कौन सा बेहतर है और क्यों? दोनों काम के रूप में काम करते हैं, लेकिन लोड समय आदि में कोई अंतर है, या किसी भी बेहतर अभ्यास माना जाता है?

Answer 1

एचटीएमएल में छवियों का उपयोग करना बेहतर होता है जब छवि का कोई प्रासंगिक अर्थ होता है ... यदि यह बिना किसी प्रासंगिक अर्थ के सजावटी चित्र है, तो सीएसएस का उपयोग करें। सीएसएस प्रेजेंटेशन के लिए है, एचटीएमएल सामग्री के लिए है।

सबसे अच्छा संकेत आप यह निर्धारित करने के लिए है कि क्या है एक तस्वीर के लिए HTML या CSS उपयोग करने के लिए: अगर मैं चित्र निकालने के लिए, वेब पृष्ठ की सामग्री अभी भी मतलब होगा?

एचटीएमएल में एक छवि संदर्भ में एक अर्थपूर्ण पाठ फॉल-बैक के साथ संदर्भ में दृश्य अर्थ प्रदान करने के लिए है। बिना किसी सामग्री के ए तत्व का उपयोग करना टालना चाहिए क्योंकि इसकी सामग्री लिंक के साथ संबंधों, ब्राउज़र और वेब क्रॉलर (जैसे Google बॉट) के साथ संबंध रखेगी।

सजावटी उद्देश्यों के लिए सीएसएस छवियों केवल का उपयोग करें। अन्यथा यह आपकी खोज इंजन रैंकिंग को नुकसान पहुंचा सकता है। छवियों के लिए हमेशा alt विशेषता प्रदान करें, यह निर्धारित करें कि यह क्या अनुमान लगाएगा कि एक अंतिम विज़िटर कोई छवि नहीं देख सकता है।

Answer 2

यदि छवि में लोगो, या एक फोटो जैसे संदर्भ हैं, तो मैं इसे <img> के रूप में लोड करने का सुझाव दूंगा, सुनिश्चित करें कि आप पहुंच और एसईओ कारणों के लिए भी alt टेक्स्ट प्रदान कर रहे हैं।

यदि किसी छवि के पृष्ठ के दायरे में कोई संदर्भ नहीं है, तो मुझे लगता है कि इसके लिए सही जगह सीएसएस में परिभाषित की गई है जो डिजाइन को नियंत्रित करती है।

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

Answer 3

आम तौर पर, मैं जितना संभव हो सके सीएसएस में कई छवियां डालने का प्रयास करता हूं लेकिन डूजर और मारियो के अच्छे अंक हैं। यदि छवि संदर्भ के लिए महत्वपूर्ण है, तो यह HTML में जा सकती है। जब पाठ को चारों ओर और छवि को तैरने की आवश्यकता होती है तो मैं <img> टैग का भी उपयोग करूंगा।

सीएसएस ऐसा कर सकता है कि <img>CSS image sprites नहीं हो सकता है। यह एकमात्र वास्तविक प्रदर्शन लाभ है जिसे आप एक या दूसरे से प्राप्त करेंगे। यूट्यूब.com जैसी प्रदर्शन-भूख ​​वाली वेबसाइटें HTTP ट्रैफ़िक (और इसलिए पृष्ठ लोड समय) को कम करने के लिए कई छवियों को एक बड़ी समग्र छवि में जोड़ती हैं। उदाहरण के लिए, यह youtube.com से लिया गया एक स्प्राइट है। सिमेंटिक HTML की

Answer 4

पालन सिद्धांतों। अगर छवि सामग्री है, यानी एक थंबनेल, फोटो, या बटन, <img> तत्व का उपयोग करें। यदि यह पृष्ठ डिज़ाइन का अधिक हिस्सा है, तो पृष्ठभूमि छवि अधिक उपयुक्त हो सकती है।

एक अधिक सटीक उदाहरण: आप अगले एक पाठ लिंक के लिए एक आइकन के रूप में अपनी छवि का उपयोग कर रहे हैं, तो एक पृष्ठभूमि छवि का उपयोग करें:

<span class="printIcon" onclick="window.print()">Print</a> 

.printIcon { background: url(...) no-repeat; padding-left: 20px } 

अगर आपकी चित्र बटन ही है, बिना किसी पाठ पहलू के, एक उपयुक्त alt विशेषता के साथ <img> तत्व का उपयोग करें जो छवि के लिए अनुपलब्ध होने पर छवि के प्रतिस्थापन के लिए काम करेगा।

<img src="printButton.png" alt="Print" onclick="window.print()" />