HTML टैग का उपयोग करके एक चित्र का आकार बदलने के लिए विशेषताएँ चौड़ाई (चौड़ाई) और ऊँचाई (ऊँचाई) प्रदान की जाती हैं। पिक्सेल का उपयोग मूल्य के रूप में किया जाता है, और तर्कों को चित्र के भौतिक आयामों से मेल खाना चाहिए। उदाहरण के लिए, अंजीर में। 10.6 एक छवि दिखाता है जिसमें 100x111 पिक्सल के आयाम हैं।

चित्र: 10.6। मूल आकार का चित्र

तदनुसार, इस आंकड़े को रखने के लिए HTML कोड उदाहरण 10.4 में दिखाया गया है।

उदाहरण 10.4। चित्र आयाम

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

चित्र: 10.7। छवि आयाम निर्दिष्ट नहीं हैं और यह अभी तक लोड नहीं हुआ है

चित्र: 10.8। छवि भरी हुई, पाठ सुधारित

छवि की चौड़ाई और ऊंचाई दोनों को ऊपर और नीचे बदला जा सकता है। हालाँकि, यह छवि की लोडिंग गति को प्रभावित नहीं करता है, क्योंकि फ़ाइल का आकार अपरिवर्तित रहता है। इसलिए, छवि को कम करते समय सावधान रहें, क्योंकि यह पाठकों के बीच भ्रम पैदा कर सकता है कि इतनी छोटी ड्राइंग को लोड करने में इतना समय क्यों लगता है। लेकिन आकार बढ़ने से विपरीत प्रभाव पड़ता है - छवि का आकार बड़ा होता है, लेकिन फ़ाइल उसी आकार की छवि के सापेक्ष तेज़ी से लोड होती है।

अंजीर में। 10.9 उसी छवि को दिखाता है जैसा कि अंजीर में दिखाया गया है। 10.6, लेकिन चौड़ाई और ऊंचाई में दोगुनी है।

चित्र: 10.9। ब्राउज़र में बढ़े हुए चित्र को देखें

ऐसी आकृति के लिए कोड अनिवार्य रूप से अपरिवर्तित रहेगा और उदाहरण 10.5 में दिखाया गया है।

उदाहरण 10.5। एक तस्वीर का आकार बदलें

इस तरह के आकार को पुनरुत्पादन कहा जाता है, और ब्राउज़र एल्गोरिदम ग्राफिक संपादकों के लिए अपनी क्षमताओं में नीच है। इसलिए, केवल विशेष मामलों में इस तरह से छवि को बढ़ाना आवश्यक है, अन्यथा तस्वीर की गुणवत्ता बहुत अधिक बिगड़ जाती है। ग्राफिक्स प्रोग्राम का उपयोग करने के लिए बेहतर है। अपवाद आयताकार क्षेत्रों वाले चित्र हैं। अंजीर में। 10.10 एक पैटर्न फ़ाइल दिखाता है जो 54 बाइट्स की होती है और इसका मूल आकार 8 बाय 8 पिक्सेल होता है, जिसे बढ़ाकर 150 पिक्सेल कर दिया जाता है।

चित्र: 10.10। बढ़ी हुई छवि

रेज़ोमिंग के लिए ब्राउज़र दो एल्गोरिदम का उपयोग करते हैं - बाइबिक (चिकनी किनारों और रंगों की चिकनी तानवाला श्रेणी) और निकटतम बिंदु (रंगों के मूल सेट और किनारों की तीक्ष्णता को बरकरार रखता है)। ब्राउज़रों के हाल के संस्करण बाइबिक एल्गोरिथ्म का उपयोग करते हैं, जबकि पुराने ब्राउज़र, इसके विपरीत, निकटतम बिंदु एल्गोरिथ्म का उपयोग करते हैं।

तस्वीर को सेंटीमीटर (मिलीमीटर, इंच) में निर्दिष्ट आकार के आधार पर आकार दिया जाएगा, साथ ही डीपीआई में निर्दिष्ट आकार को ध्यान में रखते हुए, पेपर प्रिंटिंग मानकों के अनुसार किया जाएगा। सेमी, मिमी और इंच में आयाम हजारवें की सटीकता के साथ निर्दिष्ट किए जा सकते हैं, उदाहरण के लिए, 15x10 प्रारूप के बजाय, आप 15.201x10.203 सेमी सेट कर सकते हैं।

ऊर्ध्वाधर (चित्र) स्थिति के लिए मानक फोटो आकारों के साथ तालिका:

मानक पेपर शीट का आकार a4 आकार - 21x29.7 सेमी या 2480x3508 पिक्सल 300 डीपीआई पर। अन्य शीट प्रारूपों के आकार को विकिपीडिया पृष्ठ पर देखा जा सकता है, लेकिन यह मत भूलो कि आयाम वहाँ मिलीमीटर और इंच में सूचीबद्ध हैं, अर्थात्। इस पृष्ठ पर सेटिंग्स में, उचित मूल्य का चयन करें।

यदि आपको डीपीआई (प्रति इंच डॉट्स) पर ध्यान दिए बिना एक फोटो का आकार बदलने की आवश्यकता है, अर्थात, केवल निर्दिष्ट प्रारूप के अनुपात का अवलोकन करना है, तो इसके लिए आपको सेटिंग्स में "आकार डीपीआई" पैरामीटर को "0" पर सेट करना होगा।

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

अनुदेश

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

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

पहला तरीका। "फ़ाइल" पर क्लिक करें - "नया ..." या कुंजी संयोजन Ctrl + N। आपके सामने सेटिंग्स वाली एक विंडो दिखाई देगी। वहाँ चौड़ाई, ऊँचाई और आवश्यक रंग रिज़ॉल्यूशन के मापदंडों को निर्दिष्ट करें। फिर ब्राउज़र में अपनी पसंद की छवि खोलें, राइट-क्लिक करें और "कॉपी पिक्चर" चुनें। फिर प्रोग्राम पर लौटें और संयोजन Ctrl + V दबाएं।

चित्र ग्राफिक्स संपादक विंडो में दिखाई देगा। फिर "संपादित करें" - "फ्री ट्रांसफ़ॉर्म" या Ctrl + T के संयोजन पर क्लिक करें। मुख्य बिंदु दिखाई देंगे, जिनकी मदद से आप चित्र को काम करने वाली खिड़की के आकार में समायोजित कर सकते हैं। जैसे ही आपको वांछित परिणाम मिलता है (वैसे, आप कार्य क्षेत्र की सीमाओं से परे जा सकते हैं), "फ़ाइल" पर क्लिक करें - "इस रूप में सहेजें ..." या कुंजी संयोजन Ctrl + S।

दूसरा तरीका। आपको पहले अपने कंप्यूटर पर जाना होगा, फिर "फ़ाइल" - "ओपन ..." (या Ctrl + O के संयोजन) पर क्लिक करें और वांछित छवि का चयन करें। फिर "छवि" - "छवि आकार ..." चुनें या Alt + Ctrl + I संयोजन दबाएं। "पहलू अनुपात को बनाए रखें" चेकबॉक्स को अनचेक करें और वांछित आकार का चयन करें। फिर ओके की दबाएं।

छवियाँ लगभग किसी भी वेबसाइट का हिस्सा हैं, इसलिए आकार बदलना आवश्यक है। आप चित्र का आकार 2 तरीकों से बदल सकते हैं: ग्राफ़िक्स एडिटर में या प्रोग्राम में HTML कोड में css में।

यदि आप HTML में css कोड में छवि का आकार सेट नहीं करते हैं, तो साइट पर इसकी ऊंचाई और चौड़ाई मूल फ़ाइल के समान पिक्सेल में होगी। यही है, आप केवल एक ग्राफिक संपादक का उपयोग करके छवि को सीएसएस और एचटीएमएल के बिना आकार बदल सकते हैं, यदि आप इसके आकार को निर्दिष्ट नहीं करते हैं तो यह स्वचालित रूप से साइट पर आकार देगा। लेकिन ऐसे मामले हैं जब आपको प्रोग्राम में HTML में छवि का आकार बदलने की आवश्यकता होती है।

1. ग्राफिक्स एडिटर में तस्वीर बदलना

आप किसी भी ग्राफिक्स एडिटर (फोटोशॉप, जिम्प, एक्सनव्यू) में छवि का आकार बदल सकते हैं और यह मूल आयामों के अनुसार साइट पर स्वचालित रूप से आकार बदल जाएगा।

विधि के लाभ:

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

ग्राफिक संपादक चौड़ाई और ऊंचाई में 200 पिक्सेल से कम की छवियों को खराब रूप से संपीड़ित करते हैं।

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

2. साइट पर सीएसएस कोड में तस्वीर बदलना

पेशेवरों:

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

ग्राफिक संपादकों के विपरीत, छोटे चित्र, ऊंचाई या चौड़ाई में 200 पिक्सेल से कम कुशलता से संपीड़ित होते हैं। यदि आप चाहते हैं कि आपकी वेबसाइट का आकार 200 पिक्सेल से कम हो, तो बेहतर है कि मूल आकार को 30-50% (260-300 पिक्सेल) से बड़ा किया जाए ताकि अच्छी गुणवत्ता बनाए रखी जा सके।

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

प्रोग्राम को संपीड़ित करने में अधिक समय लगता है क्योंकि आकार बदलना केवल मूल संस्करण को डाउनलोड करने के बाद होता है। इसलिए, यदि चित्र का आकार चौड़ाई या ऊंचाई में 200 पिक्सेल से अधिक है, तो साइट के काम को तेज करने के लिए इसे ग्राफिक्स एडिटर में संपीड़ित करना बेहतर है।

कैसे सीएसएस का उपयोग करके HTML में छवि का आकार बदलें

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

छवि आकार निर्दिष्ट किए बिना नमूना कोड

ब्राउज़र में परिणाम

पेज कोड

छवि कोड के साथ नमूना कोड .css में आकार देता है

ब्राउज़र में परिणाम

पेज कोड

शैली \u003d "चौड़ाई: 150px;"\u003e

ऊपर दिखाए गए दोनों उदाहरणों में, समान छवि का उपयोग 300x184px (चौड़ाई और ऊंचाई) के आकार के साथ किया जाता है। 1 उदाहरण में, छवि 300x184px के मूल आकार के साथ परिवर्तन के बिना ब्राउज़र में प्रदर्शित की गई थी, क्योंकि सीएसएस में चौड़ाई और ऊंचाई निर्दिष्ट नहीं की गई थी। और उदाहरण 2 में, चित्र को ब्राउज़र में 2 गुना कम करके प्रदर्शित किया गया था, क्योंकि चौड़ाई 150px पर सेट हो गई थी, उसके अनुसार ऊंचाई स्वचालित रूप से 92 px में बदल गई थी। जैसा कि आप देख सकते हैं, ऊंचाई की संपत्ति को बिल्कुल निर्दिष्ट करने की आवश्यकता नहीं है क्योंकि यह स्वचालित रूप से चौड़ाई में आनुपातिक रूप से बदलता है।

यदि आप दोनों मापदंडों की आपूर्ति करते हैं: चौड़ाई (चौड़ाई), ऊंचाई (ऊंचाई) और वे अनुपात के अनुरूप नहीं होंगे, तब चित्र का आकार बिल्कुल वैसा ही होगा, लेकिन संकुचित या फैला हुआ रूप में, मूल्यों पर निर्भर करता है।

चित्रों को बढ़ाना अवांछनीय क्यों है

महत्वपूर्ण: तस्वीर के आकार में वृद्धि के साथ गुणवत्ता में कमी होती है। किसी भी तरह से बदलते समय, मूल छवि की तुलना में कम मूल्यों को सेट करना महत्वपूर्ण है, अर्थात, केवल कम करें।

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

सवाल का जवाब देने से पहले “ hTML में तस्वीर कैसे डालें?», यह ध्यान दिया जाना चाहिए कि यह भारी मात्रा में ग्राफिक सामग्री के साथ वेब पेजों को ओवरलोड करने के लायक नहीं है, क्योंकि यह न केवल उपयोगकर्ता द्वारा संसाधन की दृश्य धारणा में सुधार करेगा, बल्कि पेज लोड समय भी बढ़ाएगा।

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

मैं HTML में एक छवि कैसे डालूं?

HTML पृष्ठ में एक चित्र सम्मिलित करने के लिए, एक एकल सरल टैग का उपयोग किया जाता है:

,

जहां xxx छवि पता है। यदि चित्र पृष्ठ के समान निर्देशिका में है, तो टैग इस तरह दिखाई देगा:

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

यह चित्र के स्थान पर तब दिखाया जाता है जब यह अनुपलब्ध, लोड, या "नो पिक्चर्स" ब्राउज़र मोड में होता है। यह टैग की पूरी विशेषता का उपयोग करके जोड़ा गया है .

एक ग्राफिक फ़ाइल में वैकल्पिक पाठ जोड़ने का एक उदाहरण:

HTML में इमेजेज करना

ग्राफ़िक फ़ाइल के प्रदर्शन आयामों को बदलने के लिए, ऊँचाई और चौड़ाई टैग का उपयोग करें, जहाँ ऊँचाई ऊँचाई है, और चौड़ाई चौड़ाई है, जिसे पिक्सेल में मापा जाता है।

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

चित्र को निर्दिष्ट आयामों के साथ एक आयत में रखा गया है, और यदि पैरामीटर मूल लोगों की तुलना में कम या अधिक हैं, तो तस्वीर खींच या संकुचित है।

यदि ऊंचाई और चौड़ाई विशेषताओं का उपयोग नहीं किया जाता है, तो ब्राउज़र पाठ और अन्य पृष्ठ तत्वों के प्रदर्शन में देरी करते हुए, छवि को तुरंत लोड करता है।

इन मापदंडों को दोनों पिक्सेल में निर्दिष्ट किया जा सकता है (चित्र का आकार स्थिर है और उपयोगकर्ता के स्क्रीन रिज़ॉल्यूशन पर निर्भर नहीं करता है), और प्रतिशत के रूप में (चित्र का आकार स्क्रीन रिज़ॉल्यूशन पर निर्भर करता है)।

उदाहरण के लिए:

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

ऐसा करने के लिए, यह केवल एक पैरामीटर के मान को निर्दिष्ट करने के लिए पर्याप्त है ( चौड़ाई या ऊँचाई), और ब्राउज़र स्वचालित रूप से दूसरे के मूल्य की गणना करेगा।

HTML में छवि स्थान

कई HTML टैग्स के साथ, आइए संरेखित विशेषता लागू करें, जो छवि को संरेखित करता है:

- चित्र पाठ के ऊपर स्थित है;

- चित्र पाठ के नीचे स्थित है;

- चित्र पाठ के बाईं ओर स्थित है;

- चित्र पाठ के दाईं ओर स्थित है।

लिंक तस्वीर

यह अग्रानुसार होगा:

जैसा कि आप देख सकते हैं, एक ग्राफिक इंसर्ट एक लिंक हो सकता है और, जब क्लिक किया जाता है, तो पूर्ण या संक्षिप्त रूप में दर्ज किसी भी पते पर पुनर्निर्देशित किया जा सकता है।

मैं HTML में चित्र को पृष्ठभूमि कैसे बना सकता हूं?

छवि को न केवल दृश्य वस्तु के रूप में पृष्ठ में डाला जा सकता है, बल्कि पृष्ठभूमि भी बनाई जा सकती है। एक छवि को पृष्ठभूमि के रूप में परिभाषित करने के लिए, टैग में पृष्ठभूमि \u003d "xxx" विशेषता लिखना आवश्यक है, जहां xxx चित्र पता उसी प्रकार निर्दिष्ट किया गया है जैसे ऊपर दिए गए उदाहरणों में।

उदाहरण के लिए, निम्न बनावट छवि को पृष्ठभूमि छवि के रूप में सेट करते हैं:

चित्र को तैयार पृष्ठ के साथ फ़ोल्डर में सहेजें और निम्न पंक्तियाँ लिखें:

पाठ के साथ पृष्ठभूमि।

पृष्ठ पर पृष्ठभूमि चित्र सेट है।