html - रचन - प्रपत्र एचटीएमएल

<IMG> टैग का उपयोग करने से एक और लाभ एसईओ से संबंधित है - यानी आप छवि टैग के एएलटी विशेषता में छवि के बारे में अतिरिक्त जानकारी प्रदान कर सकते हैं, जबकि सीएसएस के माध्यम से छवि निर्दिष्ट करते समय ऐसी जानकारी प्रदान करने का कोई तरीका नहीं है और उसमें केस केवल छवि फ़ाइल नाम को खोज इंजन द्वारा अनुक्रमित किया जा सकता है। एएलटी विशेषता निश्चित रूप से सीएसएस दृष्टिकोण पर <IMG> टैग एसईओ लाभ देता है। यही कारण है कि मेरे अनुसार <IMG> टैग का उपयोग करके छवि खोज परिणामों (जैसे Google छवि खोज) में अच्छी तरह रैंक करना चाहते हैं, उन्हें निर्दिष्ट करना बेहतर है।

आवश्यक होने पर केवल पृष्ठभूमि छवियों का उपयोग करें जैसे कि टाइल्स के साथ छवि वाले कंटेनर।

IMAGES का उपयोग करके प्रमुख प्रोस में से एक यह है कि यह एसईओ के लिए बेहतर है ।

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

एक और कारण है! यदि आपके पास एक उत्तरदायी डिज़ाइन है और मीडिया क्वेरी के माध्यम से उपकरणों के लिए निम्न, मध्यम और उच्च-रेज छवियों के उपयोग को विभाजित करना चाहते हैं, तो आपको पृष्ठभूमि का भी उपयोग करना चाहिए।

एक छोटा इनपुट, मुझे उत्तरदायी छवियों के साथ समस्याएं आई हैं जो एक मिनट तक आईफोन पर प्रतिपादन को धीमा कर देती हैं, यहां तक ​​कि छोटी छवियों के साथ भी:

<!-- Was super slow -->
<div class="stuff">
    <img src=".." width="100%" />
</div>

लेकिन पृष्ठभूमि छवियों का उपयोग करने के लिए स्विच करते समय समस्या चली गई, यह केवल नए व्यवहार्य लक्ष्यीकरण करने पर व्यवहार्य है।

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

कुछ अन्य परिदृश्य जहां background-image का उपयोग किया जाना चाहिए:

• जब आप उस छवि को बदलना चाहते हैं जब माउस उस पर आच्छादित होता है।
• जब आप छवि में गोलाकार कोनों को जोड़ना चाहते हैं। यदि आप img उपयोग करते हैं, तो गोल गोलाकार कोनों से बाहर निकलता है।

छवि के आकार के बारे में क्या? अगर मैं आईएमजी टैग का उपयोग करता हूं, तो ब्राउज़र छवि को स्केल करता है। अगर मैं सीएसएस पृष्ठभूमि का उपयोग करता हूं, तो ब्राउजर बड़ी छवि से सिर्फ एक खंड को काटता है।

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

पृष्ठभूमि छवि का उपयोग करना (जहां तक ​​मुझे अधिकांश ब्राउज़रों पर पता है) छवि को सीधे सहेजने के विकल्प को अक्षम करें।

ब्राउज़र हमेशा डिफ़ॉल्ट रूप से पृष्ठभूमि छवियों को मुद्रित करने के लिए सेट नहीं होते हैं; यदि आप लोगों को अपना पृष्ठ प्रिंट करना चाहते हैं :)

मुझे आश्चर्य है कि किसी ने अभी तक इसका उल्लेख नहीं किया है: सीएसएस संक्रमण ।

आप एक div की पृष्ठभूमि छवि को मूल रूप से परिवर्तित कर सकते हैं:

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

यह <img/> ' src को फीका करने के लिए किसी भी प्रकार की जावास्क्रिप्ट या jQuery एनीमेशन बचाता है।

MDN पर संक्रमण के बारे में अधिक जानकारी।

मैं पृष्ठभूमि-छवि के बजाय छवि का उपयोग करता हूं, जब मैं उन्हें 100% खिंचाव बनाना चाहता हूं जो अधिकांश ब्राउज़रों में समर्थित है।

यदि आप केवल पृष्ठ पर विशेष सामग्री के लिए या केवल एक पृष्ठ के लिए एक छवि जोड़ना चाहते हैं तो आपको आईएमजी टैग का उपयोग करना चाहिए और यदि आप एक से अधिक पृष्ठों पर छवि डालना चाहते हैं तो आपको सीएसएस पृष्ठभूमि छवि का उपयोग करना चाहिए।

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

उदाहरण के लिए, कहें कि आपके पास निम्न HTML है:

<div id="headerImage"></div>

... और सीएसएस:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

कुछ दिनों बाद, आप छवि का स्थान बदलते हैं। आपको बस सीएसएस अपडेट करना है:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

अन्यथा, आपको प्रत्येक HTML फ़ाइल में उचित <img> टैग की src विशेषता को अपडेट करना होगा (मान लें कि आप प्रक्रिया को स्वचालित करने के लिए सर्वर-साइड स्क्रिप्टिंग भाषा या CMS का उपयोग नहीं कर रहे हैं)।

यदि आप नहीं चाहते हैं कि उपयोगकर्ता छवि को सहेजने में सक्षम हो, तो पृष्ठभूमि छवियां उपयोगी होती हैं (हालांकि मुझे ऐसा करने की आवश्यकता नहीं है)।

यह भी ध्यान रखें कि अधिकांश खोज इंजन मकड़ियों सीएसएस पृष्ठभूमि छवियों को अनुक्रमित नहीं करते हैं इसलिए पृष्ठभूमि छवियों को अनदेखा कर दिया जाएगा और आप खोज इंजन से कोई ट्रैफिक नहीं प्राप्त कर पाएंगे (कोई एसईओ लाभ कम नहीं है)।

जहां टैग के साथ परिभाषित सभी छवियों को अनुक्रमित किया जाता है (जब तक मैन्युअल रूप से बहिष्कृत नहीं किया जाता है) और खोज इंजन से यातायात ला सकता है यदि उनके शीर्षक / alt विशेषताओं और फ़ाइल नामों को ठीक से अनुकूलित किया गया है (कुछ कीवर्ड wrt)।

यहां एक तकनीकी विचार है: क्या छवि गतिशील रूप से उत्पन्न की जाएगी? सीएसएस संपत्ति को गतिशील रूप से संपादित करने की कोशिश करने के बजाय HTML में <img> टैग जेनरेट करना बहुत आसान होता है।

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

IMG पहले लोड होता है क्योंकि src एचटीएमएल फाइल में ही होता है जबकि background-image के मामले में स्रोत स्टाइलशीट में उल्लिखित होता है ताकि छवि स्टाइलशीट लोड होने के बाद लोड हो, वेबपृष्ठ की लोडिंग में देरी हो।

img एक कारण के लिए एक एचटीएमएल टैग है, इसलिए इसका इस्तेमाल किया जाना चाहिए। चीजों को संदर्भित करने या चित्रित करने के लिए, उदाहरण के लिए: लेखों में।

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

हालांकि, यह एक ऐसा विषय है जिस पर चर्चा की जानी चाहिए।

पेरिस, फ्रांस से वेब छात्र