🛀🏿 ♾ 🐏 [बुकमार्क] वेब पर छवियों के साथ काम करना 🙌🏾 🧜🏾 ☔️

एक निर्णय है कि एक वेबसाइट बनाने के लिए एक फ्रंट-एंड डेवलपर को वेब पेज में छवियों को शामिल करने के विकल्प की चिंता है। यह विधि HTML टैग का उपयोग करने के लिए हो सकती है <img>। यह एक सीएसएस संपत्ति backgroundया <image>तत्व टैग हो सकता है <svg>। छवियों के साथ काम करने के लिए सही दृष्टिकोण चुनना बहुत महत्वपूर्ण है, क्योंकि यह परियोजना के प्रदर्शन और उपलब्धता को बहुत प्रभावित कर सकता है। सामग्री, जिसका अनुवाद आज हम प्रकाशित करते हैं, वेब पेजों में चित्रों सहित विभिन्न तरीकों के अध्ययन के लिए समर्पित है। यहां, इन तरीकों के फायदे और नुकसान पर चर्चा की जाएगी। इसके अलावा, हम इस बारे में बात करेंगे कि उनका उपयोग कब और क्यों किया जाता है।

HTML <img> तत्व

<img>इसके उपयोग के सबसे सरल संस्करणों में एक तत्व केवल इसके उचित संचालन के लिए आवश्यक विशेषता शामिल है src:

<img src="cool.jpg" alt="">

▍ चौड़ाई और ऊंचाई विशेषताओं का चयन

यदि छवि की चौड़ाई और ऊंचाई समायोजित नहीं की जाती है, तो पृष्ठ को लोड करते समय और फिर छवि को लोड करने पर, पेज लेआउट को फिर से बनाने की आवश्यकता हो सकती है। इससे बचने के लिए, आप विशेषताएँ widthऔर heightटैग सेट कर सकते हैं <img>:

<img src="cool.jpg" width="200" height="100" alt="">

यद्यपि यह दृष्टिकोण किसी को "पुराने स्कूल" की याद दिला सकता है, इसलिए बोलने के लिए, यह वास्तव में काफी उपयोगी है। आइए इसे बेहतर ढंग से समझते हैं, हम एक उदाहरण के साथ उपरोक्त प्रदर्शित करेंगे। अर्थात्, मेरा सुझाव है कि आप इस लघु वीडियो को देखें ।

वीडियो से फ्रेम करें। बाईं ओर की छवि में कोई चौड़ाई और ऊंचाई नहीं है। दाईं ओर की छवियों को परिभाषित किया गया है।

यहांNetworkब्राउज़र डेवलपर टूलबार दिखाया गया है और छवियों की एक जोड़ी को लोड करने की प्रक्रिया का प्रदर्शन किया गया है। उनमें से एक बाईं ओर स्थित है<img>, जिसेटैग द्वारा दर्शाया गया है, जो कि विशेषता हैwidthऔरheightसेट नहीं है। इन विशेषताओं के अन्य मूल्यों पर सेट किया जाता है।

क्या आपने देखा है कि इस छवि के लोड होने से पहले ही पृष्ठ पर सही छवि के लिए स्थान आरक्षित है? यह दिया विशेषताओं के बारे में सब हैwidthऔरheight। अपलोड प्रक्रिया के दौरान छवि कैप्शन के साथ क्या होता है, इस पर ध्यान दें। यह विशेषताओं की ताकत का एक स्पष्ट प्रदर्शन हैwidthऔरheight।

→ यहाँ एक कार्यशील उदाहरण दिया गया है

▍ सीएसएस का उपयोग करके छवि को प्रदान करना

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

यहाँ CSS कोड इमेज को छुपा रहा है:

img {
    display: none;
}

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

▍ कंटेंट की उपलब्धता के बारे में

HTML तत्वों <img>का उपयोग करके पृष्ठों पर प्रदर्शित छवियों की उपलब्धता उनकी विशेषताओं द्वारा सुनिश्चित की जाती है alt। ऐसी विशेषता में छवि का स्पष्ट विवरण होना चाहिए। यह स्क्रीन पाठकों का उपयोग करने वाले उपयोगकर्ताओं के लिए बहुत उपयोगी हो सकता है।

हालांकि, यदि altछवि का वर्णन करने की आवश्यकता नहीं है, तो इस विशेषता को हटाने की अनुशंसा नहीं की जाती है। तथ्य यह है कि अगर ऐसा किया जाता है, तो विशेषता की सामग्री "आवाज" होगी src। कंटेंट एक्सेसिबिलिटी के लिए यह बहुत बुरा है।

लेकिन विशेषता altन केवल उपरोक्त मामले में उपयोगी है। यदि किसी कारण से छवि अपलोड नहीं की जाएगी और इसमें एक विशेषता हैalt, तो इस विशेषता से पाठ छवि के बजाय प्रदर्शित किया जाएगा। मैं निम्नलिखित उदाहरण के साथ उपरोक्त वर्णन करना चाहता हूं।

हमारे पास कुछ चित्र हैं:

<img class="food-thumb" width="300" height="200" src="cheescake.jpg">
<img class="food-thumb" width="300" height="200" src="cheescake.jpg" alt="">

विशेषता srcमें छवि फ़ाइल के लिए एक गलत पता है; इस फ़ाइल को ब्राउज़र द्वारा लोड नहीं किया जा सकता है। पहले वाले <img>में एक विशेषता नहीं है alt, और दूसरे में एक विशेषता है जिसमें एक खाली स्ट्रिंग लिखा है। आपको क्या लगता है कि ये तत्व पृष्ठ पर कैसे प्रदर्शित होंगे?

बाईं ओर पूरी विशेषता के बिना एक छवि है। दाईं ओर - खाली ऊँची विशेषता के साथ। विशेषता के

बिना छवि के नीचेalt, पृष्ठ स्थान आरक्षित है, जो उपयोगकर्ता को भ्रमित कर सकता है और सामग्री की उपलब्धता को ख़राब कर सकता है। और एक अन्य छवि बहुत कम जगह लेती है जो एक खाली विशेषता की "सामग्री" को प्रदर्शित करने के लिए आवश्यक हैalt। नतीजतन, यह एक छवि के बजाय डॉट की तरह दिखता है। borderछविगुण सेटिंग के कारण ऐसा होता है।

हालांकि, जब विशेषता मेंaltकुछ लिखा जाता है, तो छवि अलग दिखेगी।

दाईं ओर वह चित्र है, जिसकी ऊँचाई विशेषता में पाठ लिखा गया है।

यह कुछ नहीं से बहुत बेहतर है। इसके अतिरिक्त, यदि आप प्रदर्शित फ़ाइल लोड नहीं कर सकते हैं, तो आप इसमें<img>एक छद्म तत्व जोड़ सकते हैं।

Images उत्तरदायी छवियां

विभिन्न आकारों

की छवियां तत्व इसमें<img>अच्छा है कि इसे कॉन्फ़िगर किया जा सकता है ताकि यह विभिन्न आकारों के पृष्ठ के देखने के क्षेत्रों में छवि के विभिन्न संस्करणों को प्रदर्शित करे। यह, उदाहरण के लिए, लेखों में उपयोग की जाने वाली छवियों के लिए इस्तेमाल किया जा सकता है।

छवियों का एक उत्तरदायी सेट दो तरीकों से अनुकूलित किया जा सकता है।

1. srcset विशेषता

यहाँ छवि कोड है जो विशेषता का उपयोग करता है srcset:

<img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt="">

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

2. HTML चित्र तत्व

यहां वह कोड है जो तत्व का उपयोग करता है <picture>:

<picture>
  <source srcset="large.jpg" media="(min-width: 800px)" />
  <source srcset="medium.jpg" media="(min-width: 500px)" />
  <img src="small.jpg" />
</picture>

उत्तरदायी छवियों को बनाने के लिए एक अन्य विकल्प एक तत्व का उपयोग करना है <picture>। मुझे यह दृष्टिकोण अधिक पसंद है क्योंकि यह सरल है और क्योंकि यह अधिक अनुमानित परिणाम देता है।

यहाँ इस अनुभाग के लिए एक डेमो प्रोजेक्ट है।

छवियों का आकार बदलना

बाईं ओर एक ऐसी छवि है जिसमें सीएसएस ऑब्जेक्ट-फिट संपत्ति सेट नहीं है। दाईं ओर एक छवि है जिसमें यह

गुण CSS गुणों के साथ सेट किया गया हैobject-fit औरobject-positionये एक महान उपकरण हैं जिसका उपयोग आप किसी तत्व के साथ कर सकते हैं<img>। वे हमें इस बात पर नियंत्रण देते हैं कि किसी तत्व की सामग्री कैसे बदलती है और कैसे तैनात की जाती है<img>। यह एक सीएसएस संपत्ति के साथ काम करने के समान हैbackground।

संपत्तिobject-fitनिम्नलिखित मान हो सकते हैं:fill,contain,cover,none,scale-down।

इसका उपयोग कैसे करें:

img {
    object-fit: cover;
    object-position: 50% 50%;
}

अब जब हम तत्व को थोड़ा समझ गए हैं <img>, तो अगली छवि हेरफेर तकनीक पर आगे बढ़ने और मास्टर करने का समय आ गया है।

सीएसएस संपत्ति छवियों

छवियों को प्रदर्शित करने के लिए सीएसएस संपत्ति का उपयोग करते समय background, आपको इस संपत्ति को कुछ सामग्री के साथ, या आयाम वाले तत्व पर लागू करना होगा। आमतौर पर, इस संपत्ति के उपयोग का मुख्य क्षेत्र सजावटी तत्व हैं।

▍ सीएसएस पृष्ठभूमि संपत्ति का उपयोग कैसे करें

CSS संपत्ति का उपयोग करने के लिए background, हमें पहले एक तत्व की आवश्यकता है:

<div class="element">Some content</div>

फिर आपको एक स्टाइल चाहिए:

.element {
    background: url('cool.jpg');
}

पृष्ठभूमि संपत्ति में कई छवियों को सेट करें

CSS गुणों backgroundका उपयोग करके प्रदर्शित छवियों की एक अच्छी विशेषता यह है कि ऐसी कई छवियां हो सकती हैं। सीएसएस का उपयोग करके इन छवियों में हेरफेर किया जा सकता है:

.element {
    background: url('cool-1.jpg'), url('cool-2.jpg');
}

▍हाइडिंग इमेज

CSS का उपयोग करके, आप एक विशिष्ट देखने के क्षेत्र में छवियों को छिपा सकते हैं और दिखा सकते हैं। उसी समय, प्रदर्शित होने वाली छवियों को अपलोड नहीं किया जाएगा। यदि सीएसएस में छवि को दृश्यमान रूप से कॉन्फ़िगर नहीं किया गया है, तो यह लोड नहीं होगा। यह backgroundतत्व पर सीएसएस संपत्ति का एक अतिरिक्त लाभ है <img>।

@media (min-width: 700px) {
    .element {
        background: url('cool-1.jpg');
    }
}

यह उदाहरण एक पृष्ठभूमि छवि का वर्णन करता है जो केवल तब दिखाई देती है जब व्यूपोर्ट की चौड़ाई बड़ी होती है 700px।

▍ कंटेंट की उपलब्धता के बारे में

यदि सीएसएस संपत्ति का उपयोग करके प्रदर्शित छवियां backgroundसही तरीके से उपयोग नहीं की जाती हैं, तो यह सामग्री की पहुंच को नुकसान पहुंचा सकती है। उदाहरण के लिए, किसी लेख को बुकमार्क करने के लिए ऐसी छवि का उपयोग करके पहुंच को प्रभावित किया जा सकता है, जो एक लेख के साथ काम करते समय महत्वपूर्ण है।

। नियमित उपयोगकर्ताओं द्वारा पृष्ठभूमि छवियों को लोड करने में कठिनाई

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

▍ छद्म तत्व

CSS संपत्ति द्वारा परिभाषित छवियों के साथ भी छद्म तत्वों का उपयोग किया जा सकता है background। उदाहरण के लिए, एक छवि को दूसरे के ऊपर प्रदर्शित करने के लिए। एक तत्व के मामले में, <img>यह केवल दूसरे तत्व पर आरोपित अतिरिक्त तत्व का उपयोग करके प्राप्त किया जा सकता है।

अब एसवीजी छवियों का उपयोग करने के बारे में बात करते हैं

एसवीजी छवियाँ

एसवीजी छवियों की मुख्य ताकत गुणवत्ता खोने के बिना उन्हें स्केल करने की क्षमता है। इसके अलावा <svg>, एसवीजी छवियों के अलावा , एक तत्व जेपीजी और पीएनजी फाइलें भी प्रदर्शित कर सकता है। यहाँ SVG छवि के लिए HTML कोड है:

<svg width="200" height="200">
  <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

एसवीजी तत्व के माध्यम से प्रदर्शित जेपीजी छवि

विशेषता पर ध्यान देंpreserveAspectRatio? उसके लिए धन्यवाद, छवि तत्व की पूरी चौड़ाई और ऊंचाई पर है<svg>, बिना खींच और अनुबंध के बिना।

यदि तत्व की चौड़ाई<image>अधिक है, तो यह मूल तत्व (<svg>) को चौड़ाई मेंभर देगा, लेकिन यह खिंचाव नहीं करेगा।

छवि खिंचाव नहीं करती है।

यह बहुत ही समान है कि CSS गुण कैसे काम करते हैंobject-fit: coverयाbackground-size: cover।

▍ कंटेंट की उपलब्धता के बारे में

यदि हम एसवीजी छवियों का उपयोग करते समय सामग्री की उपलब्धता के बारे में बात करते हैं, तो मैं कह सकता हूं कि इस तरह की बातचीत तुरंत एक तत्व की याद दिलाती है <title>। नीचे एक कोड का उदाहरण दिया गया है जिसमें <svg>निम्न तत्व को इमेज आउटपुट में जोड़ा जाता है :

<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

यहां, इसके अलावा, आप तत्व का उपयोग कर सकते हैं <desc>:

<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <desc>A meaningful description about the image</desc>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

नियमित उपयोगकर्ताओं द्वारा लोडिंग <svg> छवियों के साथ iesDifficulties

मदद से प्रदर्शित छवि <svg>, आप केवल इसके कोड का विश्लेषण करके और छवि के लिंक पर जाकर डाउनलोड कर सकते हैं। यह एक माइनस है, लेकिन अगर कोई आम उपयोगकर्ताओं की छवियों को डाउनलोड करने की क्षमता को सीमित करना चाहता है, तो यह सुविधा काम आ सकती है। बहुत कम से कम, इस तरह की छवि को डाउनलोड करने की संभावना कम हो जाएगी।

→ यहाँ इस अनुभाग के लिए एक उदाहरण है

विभिन्न छवि आउटपुट विधियों का उपयोग करने के लिए परिदृश्य

▍पेज अनुभाग शीर्ष पर प्रदर्शित होता है

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

छवि के साथ पृष्ठ का ऊपरी भाग और शिलालेख

इस तथ्य पर ध्यान देते हैं कि पृष्ठभूमि छवि है। आप पृष्ठ के ऐसे भाग को कैसे विकसित करेंगे? लेकिन, इससे पहले कि आप इस प्रश्न का उत्तर दें, मुझे कुछ आवश्यकताओं को तैयार करना चाहिए:

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

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

क्या यह उपयोगकर्ता के दृष्टिकोण से छवि महत्वपूर्ण है, या वह दिखाई न देने पर कुछ भी नहीं खोएगा?
क्या इस छवि को सभी आकारों के क्षेत्रों को देखने की आवश्यकता है?
क्या यह छवि स्थिर है, या यह गतिशील रूप से बदल रहा है (उदाहरण के लिए, सीएमएस से)?

इस समस्या को हल करने के लिए कुछ विकल्पों पर विचार करें।

समस्या का पहला समाधान

backgroundइसमें परिभाषित कई छवियों के साथ एक सीएसएस संपत्ति का उपयोग करना , उनमें से एक का उपयोग मुख्य छवि पर आरोपित तत्व के लिए किया जा सकता है, और दूसरे को छवि का प्रतिनिधित्व करने के लिए। इस सीएसएस पर एक नज़र डालें:

.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var('landscape.jpg');
    background-repeat: no-repeat;
    background-size: 100%, cover;
}

यह दृष्टिकोण आपको वह प्राप्त करने की अनुमति देता है जो background-imageआप चाहते हैं, आप इसे जावास्क्रिप्ट का उपयोग करके बदल सकते हैं:

<section class="hero" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');">
  <!-- Hero content -->
</section>

backgroundमैंने संपत्ति को एक एम्बेड शैली में परिभाषित किया। हालांकि यह काम कर रहा कोड है, यह बुरा लग रहा है और अव्यवहारिक है।

शायद आप यहाँ सीएसएस चर का उपयोग कर सकते हैं?

<section class="hero" style="--bg-url: url('landscape.jpg')">
  <!-- Hero content -->
</section>

यहाँ एक शैली अध्ययन का परिणाम है।

तत्व की शैली का अध्ययन करें

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

विश्लेषण

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

→ यहाँ एक कार्यशील उदाहरण दिया गया है

समस्या का दूसरा हल

यहां हम HTML छवि आउटपुट टूल का उपयोग करेंगे:

<section class="hero">
  <h2 class="hero__title">Using Images in CSS</h2>
  <p class="hero__desc">An article about which and when to use</p>
  <img src="landscape.jpg" alt="">
</section>

CSS में, आपको छवि की पूर्ण स्थिति को पाठ के नीचे रखकर समायोजित करने की आवश्यकता है। इसके अलावा, यहां हमें एक छद्म तत्व की आवश्यकता है जो छवि पर आरोपित तत्व की भूमिका निभाएगा:

.hero {
    position: relative;
}

.hero img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

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

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

.hero img {
    /*   */
    background: #2962ff;
  }

यदि छवि लोड करने में विफल रहती है तो पृष्ठभूमि रंग प्रदर्शित होता है।

अच्छी बात यह है कि पृष्ठभूमि रंग केवल तभी प्रदर्शित होता है जब छवि लोड करने में विफल रहती है। यह हमें सूट करेगा।

→ यहाँ एक कार्यशील उदाहरण दिया गया है

▍ वेबसाइट का लोगो

लोगो बहुत महत्वपूर्ण है। लोगो साइटों के लिए विशिष्टता जोड़ते हैं। किसी पृष्ठ पर लोगो प्रदर्शित करने के लिए, हम कई संभावनाओं का सहारा ले सकते हैं:

एक तत्व <img>जो PNG, JPG या SVG छवि प्रदर्शित करता है।
निर्मित एसवीजी छवि।
पृष्ठभूमि छवि।

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

कई विवरणों के साथ लोगो।

यदि लोगो में कई विवरण हैं या कई आकृतियाँ हैं, तो अंतर्निहित SVG छवि का उपयोग करके प्रदर्शित करना इतना अच्छा विचार नहीं हो सकता है। ऐसी स्थिति में, मैं एक टैग का उपयोग करने की सलाह देता हूं <img>जिसके माध्यम से एक पीएनजी, जेपीजी या एसवीजी छवि प्रदर्शित की जाती है।

विविध लोगो

यहाँ SVG प्रारूप में संग्रहीत एक समान लोगो प्रदर्शित करने के लिए कोड है:

<a href="#"><img src="logo.svg" alt="Nature Food"></a>

चेतन को सरल लोगो

साधारण एनिमेटेड लोगो

एक ऐसी स्थिति पर विचार करें जहां एक साधारण लोगो है जिसमें एक निश्चित आकृति या पाठ है। जब आप इस पर मंडराते हैं, तो आपको आकार और पाठ का रंग बदलने की आवश्यकता होती है। यह कैसे करना है? यह मुझे लगता है कि इस स्थिति में निर्मित एसवीजी छवि का उपयोग करना सबसे अच्छा है:

<a href="#">
    <svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
        <rect fill="#D8D8D8" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
        <text font-family="Rubik-Medium, Rubik" font-size="25" font-weight="400" fill="#6F6F6F">
          <tspan x="63.923" y="36.923">Rect</tspan>
        </text>
      </g>
    </svg>
</a>

यहाँ शैलियों रहे हैं:

.logo rect,
.logo text {
  transition: 0.3s ease-out;
}

.logo:hover rect,
.logo:hover text {
  fill: #4a7def;
}

यहाँ इस अनुभाग के लिए एक डेमो परियोजना है:

उत्तरदायी लोगो

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

उत्तरदायी लोगो

इस लोगो व्यवहार को लागू करने के लिए, एक तत्व<picture>जो आपको लोगो के दो संस्करणों का वर्णन करने की अनुमति देता है,आदर्श है:

<a class="logo" href="/">
    <picture>
      <source media="(min-width: 1350px)" srcset="sm-logo--full.svg"><img src="sm-logo.svg" alt="Smashing Magazine"></picture>
  </a>

CSS में, आपको उस घटना में लोगो की चौड़ाई बदलने की जरूरत है जो व्यूपोर्ट की चौड़ाई के बराबर या उससे अधिक है 1350px:

.logo {
  display: inline-block;
  width: 45px;
}

@media (min-width: 1350px) {
  .logo {
    width: 180px;
  }
}

हमारे सामने उत्तरदायी लोगो की समस्या का एक सरल और समझने योग्य समाधान है।

→ यहाँ इस अनुभाग के लिए एक कार्य उदाहरण है

ढाल के साथ लोगो

एक ढाल के साथ लोगो का एक उदाहरण

जब लोगो के साथ काम करना जो कि एक ढाल है, तो आपको इस बात से अवगत होना चाहिए कि इस तरह के लोगो को किसी डिज़ाइन एप्लिकेशन, जैसे Adobe Illustrator या Sketch से निर्यात करना, एकदम सही हो सकता है। इस प्रक्रिया के दौरान, लोगो में कुछ टूट सकता है।

एसवीजी प्रारूप का उपयोग करते समय, आप आसानी से लोगो के लिए एक ढाल रंग लागू कर सकते हैं। निम्नलिखित उदाहरण में, मैंने इसका उपयोग किया<linearGradient>, इसके साथ पाठ विशेषताfill:

<svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="gradient" x1="0%" y1="100%" x2="0%" y2="0%">
        <stop offset="0%" stop-color="#4a7def"></stop>
        <stop offset="50%" stop-color="#ab4787"></stop>
      </linearGradient>
    </defs>
      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
        <rect fill="#AB4787" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
        <text font-family="Rubik-Medium, Rubik" font-size="30" font-weight="400" fill="url(#gradient)">
          <tspan x="63.923" y="36.923">Rect</tspan>
        </text>
      </g>
</svg>

→ यहाँ एक उदाहरण है

▍अवतार उपयोगकर्ता

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

आरंभ करने के लिए, निम्नलिखित लेआउट पर एक नज़र डालें। कृपया ध्यान दें कि स्पष्ट किनारों के साथ दो स्वच्छ अवतार हैं।

सफल अवतार की एक जोड़ी

और क्या होगा यदि उपयोगकर्ता, अवतार के रूप में, लगभग सफेद पृष्ठभूमि वाली तस्वीर का उपयोग करने का निर्णय लेता है? यदि ऐसा है, तो अवतार इतने अच्छे से दूर दिखेगा।

असफल अवतार

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

बाईं ओर एक अवतार है जिसकी पृष्ठभूमि बहुत हल्की है। दाईं ओर इस समस्या को हल करने का परिणाम है। इस समस्या

को हल करने के कई तरीके हैं:

का उपयोग कर <img>।
उपयोग <img>और सहायक तत्व <div>।
का उपयोग करना <div>और सीएसएस गुण background।
<image>सी का उपयोग करना <svg>।

क्या सबसे अच्छा यहाँ फिट बैठता है? चलो पता करते हैं।

<Img> का उपयोग करना

इस समस्या को हल कैसे करें? हो सकता है - बस तत्व की सीमा को समायोजित करें? हम इस संभावना की खोज कर रहे हैं (मैं तुरंत इस तथ्य के लिए माफी मांगता हूं कि नीचे आप अक्सर मेरी तस्वीर देखेंगे)।

यहाँ सीएसएस है:

.avatar {
    border: 2px solid #f2f2f2;
}

यहाँ है कि यह कैसा दिखता है।

परिणाम अपेक्षा के अनुरूप नहीं था: अंधेरे सीमा छवि की सीमाओं के बाहर स्थित है।

जो हुआ वह हमें शोभा नहीं देता। हमें एक आंतरिक सीमा की आवश्यकता है जो अंधेरे छवि के साथ मिलती है। नतीजतन, यह पता चला है कि तत्व की सीमा निर्धारित करने से हमें यहां मदद नहीं मिलेगी।

<Img> और सहायक <div> का उपयोग करना

मुझे आपको याद दिलाना है कि हम छवि के लिए एक आंतरिक छाया को जोड़ने के कार्य के साथ सामना कर रहे हैं। हम आंतरिक छाया ( box-shadow) और कीवर्ड का उपयोग करके इस समस्या को हल नहीं कर सकते inset, क्योंकि HTML तत्व <img>आंतरिक छाया का समर्थन नहीं करते हैं। इस समस्या को हल करने के लिए, आपको एक तत्व में एक अवतार डालने <div>और एक अन्य तत्व का उपयोग करने की आवश्यकता है , जिसका एकमात्र उद्देश्य आंतरिक सीमा खींचना है।

यहाँ HTML कोड है:

<div class="avatar-wrapper">
     <img class="avatar" src="shadeed2.jpg" alt="A photo of Ahmad Shadeed">
     <div class="avatar-border"></div>
</div>

यहाँ शैलियों रहे हैं:

.avatar-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
}

.avatar-border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

यदि तत्व <div>में 10% काले रंग में बॉर्डर पेंट किया गया है, तो यह सुनिश्चित करेगा कि ऐसी सीमा अंधेरे छवि में दिखाई नहीं देगी, और प्रकाश में ध्यान देने योग्य होगी, इसकी सीमा पर प्रकाश डाला जाएगा। यहाँ है कि यह कैसा दिखता है।

आंतरिक बॉर्डर, केवल उज्ज्वल छवियों में दिखाई दे रहा

→ यहाँ है इस खंड के लिए एक उदाहरण

<Div> और CSS बैकग्राउंड प्रॉपर्टी का उपयोग करना

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

अवतार पृष्ठ के चारों ओर बिखरे हुए हैं।

यहाँ HTML होगा:

<div class="avatar" style="--img-url: url(shadeed2.jpg)"></div>

यहाँ शैली है:

.avatar {
  background: var(--img-url) center/cover;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(#000, 0.1);
}

यहां आप एक काम करने वाला उदाहरण पा सकते हैं।

<Svg> में <छवि> का उपयोग करना

मेरा मानना है कि यह हमारी समस्या का सबसे दिलचस्प समाधान है। मैंने नए फेसबुक डिज़ाइन का अध्ययन करते हुए इस ट्रिक को खोजा ।

ये है मार्कअप:

<svg role="none" style="height: 36px; width: 36px;">
  <mask id="avatar">
    <circle cx="18" cy="18" fill="white" r="18"></circle>
  </mask>
  <g mask="url(#avatar)">
    <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
    <circle cx="18" cy="18" r="18"></circle>
  </g>
</svg>

सबसे पहले, इस कोड को पार्स करें। यह है कि यह क्या है:

एक चक्र छवि का मुखौटा।
वह समूह जिस पर मुखौटा लागू होता है।
विशेषता के साथ छवि preserveAspectRatio=«xMidYMid»।
एक सर्कल जो आंतरिक सीमा के रूप में उपयोग किया जाता है।

यहां बताया गया है कि यह कैसे स्टाइल है:

circle {
  stroke-width: 2;
  stroke: rgba(0, 0, 0, 0.1);
  fill: none;
}

→ यहाँ आप एक उदाहरण पा सकते हैं

, अवतारों के साथ, हमने इसका पता लगाया। इसलिए, हम आगे बढ़ते हैं।

▍ आइकन के साथ इनपुट फ़ील्ड

यहां एक आइकन के साथ इनपुट फ़ील्ड का एक उदाहरण है।

आइकन के साथ इनपुट फ़ील्ड

ऐसे फ़ील्ड काफी सामान्य हैं। किसी आइकन से फ़ील्ड को कैसे लैस करें? जब ऐसा क्षेत्र फोकस प्राप्त करता है तो क्या होता है? इन मुद्दों का अन्वेषण करें।

यहाँ HTML कोड है:

<p>
    <label for="name">Full name</label>
    <input type="text" id="name">
</p>

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

input {
    background-color: #fff;
    background-image: url('user.svg');
    background-size: 20px 20px;
    background-position: left 10px center;
    background-repeat: no-repeat;
}

जब आप फ़ोकस प्राप्त करते हैं, तो आइकन का रंग बदलने के लिए आप URL-एनकोडेड SVG इमेज का उपयोग कर सकते हैं। यह करने के लिए बहुत आसान है। उदाहरण के लिए, यह उपकरण इस उद्देश्य के लिए डिज़ाइन किया गया है , जिसे योकसेल द्वारा विकसित किया गया है।

यहाँ एक उदाहरण है।

मुद्रण के लिए ▍CSS शैली

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

यदि चित्रों के साथ सचित्र नुस्खा में चरण हैं, तो यह महत्वपूर्ण है कि वे इसके मुद्रित संस्करण में आते हैं, अन्यथा जो पृष्ठ प्रिंट करता है वह नुस्खा का उपयोग करने में सक्षम नहीं होगा।

सीएसएस संपत्ति पृष्ठभूमि का उपयोग करके प्रदर्शित छवियों को प्रिंट करने के लिए इच्छित पृष्ठों में शामिल न करने का प्रयास करें

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

सीएसएस पृष्ठभूमि संपत्ति का उपयोग करके पृष्ठ में शामिल छवियों के बजाय रिक्त स्थान

नुस्खा के ऐसे मुद्रित संस्करण के लिए बहुत कम उपयोग होगा। यह ब्राउज़र को पेज के प्रिंट संस्करण में समान चित्र प्रदर्शित करने के लिए मजबूर करके तय किया जा सकता है। लेकिन यह दृष्टिकोण फ़ायरफ़ॉक्स और IE में काम नहीं करता है। यह सीएसएस में कैसा दिखता है:

.element {
    background: url('cheesecake.png') center/cover no-repeat;
    -webkit-print-color-adjust: exact; /*        */
}

ऐसी स्थितियों में, HTML तत्व का उपयोग करना सबसे अच्छा है <img>। इस तत्व का उपयोग करते हुए पृष्ठ में शामिल छवियां समस्याओं के बिना मुद्रित होती हैं।

→ यहाँ एक उदाहरण है

सारांश

आज हमने वेब पेजों में छवियों को शामिल करने के विभिन्न तरीकों के बारे में बात की, उनके पेशेवरों और विपक्षों पर चर्चा की, और उनके उपयोग के लिए परिदृश्यों की जांच की। हम आशा करते हैं कि आपने आज जो सीखा है, वह आपको उपयोगी लगेगा।

प्रिय पाठकों! क्या आपने वेब पेजों पर चित्र प्रदर्शित करने में समस्याओं का सामना किया है?

[बुकमार्क] वेब पर छवियों के साथ काम करना

HTML <img> तत्व

▍ चौड़ाई और ऊंचाई विशेषताओं का चयन

▍ सीएसएस का उपयोग करके छवि को प्रदान करना

▍ कंटेंट की उपलब्धता के बारे में

Images उत्तरदायी छवियां

1. srcset विशेषता

2. HTML चित्र तत्व

छवियों का आकार बदलना

सीएसएस संपत्ति छवियों

▍ सीएसएस पृष्ठभूमि संपत्ति का उपयोग कैसे करें

पृष्ठभूमि संपत्ति में कई छवियों को सेट करें

▍हाइडिंग इमेज

▍ कंटेंट की उपलब्धता के बारे में

। नियमित उपयोगकर्ताओं द्वारा पृष्ठभूमि छवियों को लोड करने में कठिनाई

▍ छद्म तत्व

एसवीजी छवियाँ

▍ कंटेंट की उपलब्धता के बारे में

नियमित उपयोगकर्ताओं द्वारा लोडिंग <svg> छवियों के साथ iesDifficulties

विभिन्न छवि आउटपुट विधियों का उपयोग करने के लिए परिदृश्य

▍पेज अनुभाग शीर्ष पर प्रदर्शित होता है

समस्या का पहला समाधान

विश्लेषण

समस्या का दूसरा हल

▍ वेबसाइट का लोगो

कई विवरणों के साथ लोगो।

चेतन को सरल लोगो

उत्तरदायी लोगो

ढाल के साथ लोगो

▍अवतार उपयोगकर्ता

<Img> का उपयोग करना

<Img> और सहायक <div> का उपयोग करना

<Div> और CSS बैकग्राउंड प्रॉपर्टी का उपयोग करना

<Svg> में <छवि> का उपयोग करना

▍ आइकन के साथ इनपुट फ़ील्ड

मुद्रण के लिए ▍CSS शैली

सारांश

More articles: