HTML मा छवि कसरी सानो बनाउने

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

1. HTML मा छवि आकार घटाउने परिचय

छविहरू रिसाइज गर्ने वेब विकासमा एक सामान्य कार्य हो। जब हाम्रो वेबसाइटलाई अप्टिमाइज गर्ने कुरा आउँछ, यो सुनिश्चित गर्न महत्त्वपूर्ण छ कि हाम्रा छविहरू उनीहरूको दृश्य गुणस्तरमा सम्झौता नगरी सकेसम्म हल्का छन्। सौभाग्य देखि, HTML ले हामीलाई यो प्राप्त गर्न धेरै विकल्पहरू प्रदान गर्दछ। प्रभावकारी रूपमा.

छविहरूको आकार घटाउने एउटा तरिका HTML "चौडाइ" र "उचाइ" गुण छविको आयाम समायोजन गर्न प्रयोग गर्नु हो। यो छवि ट्यागमा विशेषताहरू प्रयोग गरेर प्राप्त हुन्छ। उदाहरणका लागि, यदि हामी आकार घटाउन चाहन्छौं एउटा छविबाट आधा बाटोमा, हामी "चौडाइ" र "उचाइ" मानलाई छविको मूल आकारको आधामा सेट गर्न सक्छौं। यस तरिकाले, ब्राउजरले छविलाई साना आयामहरूसँग लोड गर्नेछ, जसले पृष्ठ लोड गर्ने समय सुधार गर्न मद्दत गर्नेछ।

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

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

2. HTML मा छविहरू रिसाइज गर्न ट्याग र विशेषताहरू

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

सबै भन्दा पहिले, HTML मा छवि रिसाइज गर्न, तपाइँ `ट्याग प्रयोग गर्नुहुन्छ`। यो ट्यागले उचित रिसाइज प्राप्त गर्न धेरै महत्त्वपूर्ण विशेषताहरू समावेश गर्नुपर्छ। विशेषता src छवि मार्ग निर्दिष्ट गर्न प्रयोग गरिन्छ, जबकि विशेषता चौडाइ y उचाइ तिनीहरू क्रमशः छविको चौडाइ र उचाइ निर्दिष्ट गर्न प्रयोग गरिन्छ। यी विशेषताहरू पिक्सेल-विशिष्ट मानहरूमा सेट गर्न सकिन्छ वा सापेक्ष रिसाइज गर्न अनुमति दिन प्रतिशत प्रयोग गर्न सकिन्छ।

विशेषता को अतिरिक्त चौडाइ y उचाइ, HTML ले अन्य विशेषताहरू पनि प्रदान गर्दछ जुन छविहरू रिसाइज गर्न प्रयोग गर्न सकिन्छ। उदाहरणका लागि, विशेषता शैली अधिकतम चौडाइ, अधिकतम उचाइ, र छवि पक्ष अनुपात जस्ता अतिरिक्त CSS शैलीहरू लागू गर्न प्रयोग गर्न सकिन्छ। तपाईं पनि विशेषता प्रयोग गर्न सक्नुहुन्छ कक्षा बाह्य वा आन्तरिक शैली पानामा परिभाषित विशिष्ट शैलीहरू लागू गर्न। यी विशेषताहरूले लेआउट र छविको अन्तिम आकारमा अझ बढी नियन्त्रण गर्न अनुमति दिन्छ। छोटकरीमा, HTML मा उचित ट्याग र विशेषताहरू प्रयोग गरेर, वेब पृष्ठमा छविहरू सजिलै र प्रभावकारी रूपमा रिसाइज गर्न सम्भव छ। यी अवधारणाहरूको आधारभूत समझको साथ, वेब विकासकर्ताहरूले छविहरूको राम्रो प्रदर्शन सुनिश्चित गर्न सक्छन् विभिन्न उपकरणहरूमा र स्क्रिनहरू।

3. HTML मा छविको चौडाइ र उचाइ कसरी निर्दिष्ट गर्ने

HTML मा छविको चौडाइ र उचाइ निर्दिष्ट गर्नु उपस्थिति र लेआउट नियन्त्रण गर्न आवश्यक छ। साइटबाट वेब। सौभाग्य देखि, यो लक्ष्य हासिल गर्न धेरै तरिकाहरू छन्।

छविको आकार निर्दिष्ट गर्ने सबैभन्दा सजिलो तरिका "चौडाइ" र "उचाइ" विशेषताहरू प्रयोग गरेर हो। यी विशेषताहरू सिधै "img" ट्यागमा थप्न सकिन्छ र तपाईंलाई पिक्सेलमा छविको चौडाइ र उचाइ सेट गर्न अनुमति दिन्छ। उदाहरणका लागि:

"`html

«`

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

"`html

«`

तपाईंले मापनको सापेक्ष एकाइहरू पनि प्रयोग गर्न सक्नुहुन्छ, जस्तै प्रतिशत, यसको कन्टेनरको सापेक्ष छविलाई आकार दिन। यो गर्नको लागि, केवल प्रतिशत चिन्ह (%) पछि इच्छित मान निर्दिष्ट गर्नुहोस्। उदाहरणका लागि:

"`html

«`

यो नोट गर्न महत्त्वपूर्ण छ कि यदि तपाईंले HTML मा छविहरूको आकार निर्दिष्ट गर्नुभएन भने, ब्राउजरले तिनीहरूलाई तिनीहरूको मूल आकारमा प्रदर्शन गर्नेछ। तपाइँको वेबसाइट मा एक समान लेआउट कायम गर्न को लागी यी चौडाई र उचाई विशिष्टीकरण प्रविधिहरु लाई लगातार प्रयोग गर्न को लागी सल्लाह दिइन्छ। यी विकल्पहरूको साथ प्रयोग गर्नुहोस् र तपाइँका आवश्यकताहरू मिल्ने एउटा खोज्नुहोस्!

4. HTML मा छविको आकार घटाउन प्रतिशत प्रयोग गर्दै

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

HTML मा छविको आकार घटाउन प्रतिशत प्रयोग गर्न, हामी केवल निम्न चरणहरू पालना गर्छौं:

1. पहिले, हामीले HTML छवि ट्याग पत्ता लगाउँछौं () र हामी यसलाई आकार विशेषता प्रदान गर्छौं: चौडाइ र उचाइ। पिक्सेलमा निश्चित मान निर्दिष्ट गर्नुको सट्टा, हामी प्रतिशत प्रयोग गर्नेछौं। उदाहरणका लागि, यदि हामी छविले स्क्रिनको चौडाइको 50% ओगटेको चाहन्छौं भने, हामी छवि ट्यागमा चौडाइ=»50%» प्रयोग गर्नेछौं।

2. अर्को, हामी उचाइ विशेषताको लागि "स्वतः" CSS गुण प्रयोग गरेर समानुपातिक रूपमा उचाइ समायोजन गर्न सक्छौं। यसले माथि तोकिएको प्रतिशतद्वारा सेट गरिएको समानुपातिक चौडाइको आधारमा उचाइलाई स्वतः समायोजन गर्न सक्छ। उदाहरणका लागि, यदि छविको चौडाइ ५०% छ भने, उचाइ स्वतः समानुपातिक रूपमा समायोजन हुनेछ।

3. अन्तमा, छवि विभिन्न यन्त्रहरू र स्क्रिन रिजोल्युसनहरूमा सही रूपमा फिट हुन्छ भनेर सुनिश्चित गर्न, अतिरिक्त स्टाइल नियमहरू लागू गर्न सकिन्छ। हामी "max-width" CSS गुण प्रयोग गरेर अधिकतम चौडाइ सेट गर्न सक्छौं, जसले स्क्रिन सानो भएमा छवि ओभरफ्लो नहुने कुरा सुनिश्चित गर्नेछ। उदाहरणका लागि, हामी शैली थप्न सक्छौं "अधिकतम-चौडाई: 100%;" छवि ट्यागमा।

याद गर्नुहोस् कि HTML मा छविको आकार घटाउन प्रतिशत प्रयोग गर्नु सिफारिस गरिएको अभ्यास हो, किनकि यसले विभिन्न यन्त्रहरू र स्क्रिन रिजोल्युसनहरूमा थप लचिलो र अनुकूलनीय प्रस्तुति सुनिश्चित गर्दछ। माथि उल्लिखित चरणहरू पछ्याएर, तपाईं गुणस्तर गुमाउन वा तिनीहरूको उपस्थिति विकृत नगरी सजिलैसँग आफ्नो छविहरूको आकार समायोजन गर्न सक्नुहुन्छ। प्रयोग गर्नुहोस् र तपाईंको आवश्यकताहरूको लागि उत्तम फिट फेला पार्नुहोस्!

5. HTML छविहरूमा CSS सँग रिसाइज गर्दै

वेबसाइट डिजाइन गर्दा साझा चुनौतीहरू मध्ये एक छवि आकारहरू प्रबन्ध गर्नु हो। प्रायः, अप्टिमाइज गरिएका छविहरूले लामो लोडिङ समय निम्त्याउन सक्छ र प्रयोगकर्ताको अनुभवलाई नकारात्मक असर पार्न सक्छ। सौभाग्य देखि, CSS ले HTML मा छविहरूको आकार घटाउनको लागि एक सरल समाधान प्रदान गर्दछ।

छविको आकार घटाउने पहिलो चरण भनेको CSS प्रयोग गरेर यसको आयामहरू सेट गर्नु हो। यो "चौडाई" र "उचाइ" गुणहरू प्रयोग गरेर प्राप्त गरिन्छ। उदाहरणका लागि, यदि हामी छविको चौडाइ 300 पिक्सेलमा सेट गर्न चाहन्छौं भने, CSS कोड हुनेछ। width: 300px;। यो याद गर्न महत्त्वपूर्ण छ कि यो गर्दा, छवि गुणस्तर गुमाउन सक्छ वा धेरै कम भयो भने विकृत देखिन सक्छ।

छवि आकार घटाउनको लागि अर्को उपयोगी प्रविधि CSS कम्प्रेसन प्रयोग गर्नु हो। यो १००% भन्दा कम मानमा "पृष्ठभूमि-आकार" गुण सेट गरेर प्राप्त हुन्छ। उदाहरणका लागि, यदि हामी छविको आकार आधाले घटाउन चाहन्छौं भने, CSS कोड हुनेछ background-size: 50%;। यो प्रविधिले तपाईंलाई छविको आकार घटाउनको लागि गुणस्तर गुमाउन अनुमति दिन्छ, किनकि यो केवल दृश्यात्मक रूपमा समायोजित हुन्छ। यद्यपि, यो ध्यान दिन महत्त्वपूर्ण छ कि यो प्रविधि पृष्ठभूमि छविहरूको लागि मात्र काम गर्दछ। यदि हामी सीधै HTML पृष्ठमा देखाइएको छविको आकार घटाउन चाहन्छौं भने, माथि उल्लेखित "चौडाइ" र "उचाइ" गुणहरू प्रयोग गर्न उपयुक्त हुन्छ।

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

6. HTML मा साना तस्बिरहरूको लोडिङ अनुकूलन गर्न प्रविधिहरू

त्यहाँ धेरै प्रविधिहरू छन् जसले HTML मा साना छविहरूको लोडिङ अनुकूलन गर्न मद्दत गर्न सक्छ। तल यस लक्ष्य हासिल गर्न केही प्रभावकारी रणनीतिहरू छन्:

1. सही ढाँचा प्रयोग गर्नुहोस्: तपाईंको वेबसाइटको लागि सही छवि ढाँचा छनोट गर्न आवश्यक छ। साना तस्बिरहरू प्रयोग गर्दा, JPEG वा WEBP जस्ता ढाँचाहरू प्रयोग गर्न सिफारिस गरिन्छ, किनकि तिनीहरूले धेरै गुणस्तर नगुमाई छवि कम्प्रेस गर्छन्।

2. छविहरू कम्प्रेस गर्नुहोस्: तपाईंको वेबसाइटमा छविहरू थप्नु अघि, दृश्य गुणस्तरलाई धेरै असर नगरी तिनीहरूको आकार कम गर्न तिनीहरूलाई कम्प्रेस गर्न महत्त्वपूर्ण छ। त्यहाँ धेरै अनलाइन उपकरणहरू छन् जसले तपाईंलाई छविहरू छिटो र सजिलै कम्प्रेस गर्न अनुमति दिन्छ।

3. ब्राउजर क्यासको फाइदा लिनुहोस्: साना छविहरूको लागि सही क्यास समाप्ति सेट गरेर, तपाइँ तपाइँको साइट आगन्तुकहरूले केवल एक पटक छविहरू लोड गर्न आवश्यक छ भनेर सुनिश्चित गर्न सक्नुहुन्छ। यसले लोडिङ समय घटाउँछ र प्रयोगकर्ता अनुभव सुधार गर्छ।

यी प्रविधिहरूको अतिरिक्त, यो सम्झना महत्त्वपूर्ण छ कि सानो छविहरू पनि मोबाइल उपकरणहरूको लागि अनुकूलित हुनुपर्छ। यसमा तस्बिरको साइज समायोजन गर्ने र मोबाइल डेटा प्रयोगलाई कम गर्न अल्छी लोड गर्ने प्रविधिहरू प्रयोग गर्ने समावेश छ। यी रणनीतिहरूको उचित कार्यान्वयनको साथ, तपाईंको HTML वेबसाइटमा प्रभावकारी छवि लोडिङ हासिल गर्न सकिन्छ।

7. HTML मा छविहरू रिसाइज गर्न बाह्य पुस्तकालयहरू प्रयोग गर्दै

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

त्यहाँ धेरै लोकप्रिय पुस्तकालयहरू छन् जुन यस कार्यको लागि प्रयोग गर्न सकिन्छ, जस्तै jQuery, तकिया y अल्छी आकार दिन्छ। यी पुस्तकालयहरूले HTML मा छविहरू रिसाइज गर्न विभिन्न विधिहरू र कार्यहरू प्रस्ताव गर्छन्।

यी पुस्तकालयहरू प्रयोग गर्न, तपाईंले पहिले आफ्नो HTML पृष्ठको हेडरमा पुस्तकालयको लिङ्क समावेश गर्नुपर्छ। उदाहरणका लागि, यदि तपाइँ jQuery प्रयोग गर्ने निर्णय गर्नुहुन्छ भने, तपाइँ तपाइँको पृष्ठको हेडरमा निम्न लिङ्क थप्न सक्नुहुन्छ:

"`html

«`

एकचोटि तपाईंले पुस्तकालयमा लिङ्क समावेश गरिसकेपछि, तपाईंले प्रयोग गर्न सुरु गर्न सक्नुहुन्छ यसको कार्यहरू तपाईको HTML कोडमा। उदाहरणका लागि, यदि तपाइँ jQuery मार्फत छविको आकार बदल्न चाहनुहुन्छ भने, तपाइँ छविको चौडाइ र उचाइ परिवर्तन गर्न `css()` प्रकार्य प्रयोग गर्न सक्नुहुन्छ। तल कोड कस्तो देखिन्छ भन्ने उदाहरण हो:

"`html

«`

याद गर्नुहोस् कि तपाईंले "img" लाई तपाईंले रिसाइज गर्न चाहनुभएको छविको पहिचानकर्ता वा वर्गसँग प्रतिस्थापन गर्नुपर्छ। थप रूपमा, तपाइँ "300px" र "200px" मानहरू तपाइँको आफ्नै रिसाइज आवश्यकताहरूमा समायोजन गर्न सक्नुहुन्छ।

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

8. HTML मा छवि सानो बनाउँदा पहुँचयोग्यता विचारहरू

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

1. आफ्नो पृष्ठमा छवि सम्मिलित गर्न HTML `img` ट्याग प्रयोग गर्नुहोस्। छवि स्थानको साथ `src` विशेषता समावेश गर्न निश्चित गर्नुहोस्। उदाहरणका लागि:

"`html

«`

2. पिक्सेलमा छविको इच्छित चौडाइ निर्दिष्ट गर्न `चौडाइ` विशेषता थप्नुहोस्। उदाहरण को लागी, यदि तपाइँ छवि 300 पिक्सेल चौडा हुन चाहनुहुन्छ भने, तपाइँ यसलाई निम्नानुसार गर्न सक्नुहुन्छ:

"`html

«`

3. पिक्सेलमा छविको इच्छित उचाइ निर्दिष्ट गर्न `उचाइ` विशेषता प्रयोग गर्नुहोस्। यस तरिकाले, तपाईं छविको चौडाइ र उचाइ दुवै नियन्त्रण गर्न सक्नुहुन्छ। उदाहरणका लागि:

"`html

«`

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

9. HTML मा छविको आकार घटाउँदा गुणस्तर कायम राख्न सिफारिसहरू

त्यहाँ विभिन्न प्रविधिहरू र सिफारिसहरू छन् जुन हामीले HTML छविको आकार घटाउँदा यसको गुणस्तरमा सम्झौता नगरी ध्यानमा राख्नुपर्छ। तल केही प्रमुख सुझावहरू छन्:

1. "चौडाइ" र "उचाइ" विशेषता प्रयोग गर्नुहोस्: "चौडाइ" र "उचाइ" विशेषताहरू प्रयोग गरेर पिक्सेलमा छविको सही आयामहरू निर्दिष्ट गर्न महत्त्वपूर्ण छ। यसले ब्राउजरलाई छविको लागि पर्याप्त ठाउँ आरक्षित गर्न अनुमति दिन्छ, अनावश्यक पुन: स्केलिङबाट बच्न र यसरी यसको कार्यसम्पादन अनुकूलन गर्न।

2. छवि कम्प्रेस गर्नुहोस्: त्यहाँ अनलाइन उपकरणहरू र छवि सम्पादन कार्यक्रमहरू छन् जसले हामीलाई गुणस्तर नगुमाई छविहरू कम्प्रेस गर्न अनुमति दिन्छ। फाइलको साइज घटाएर, पृष्ठ लोडिङको गति निकै बढ्छ। यसबाहेक, यो प्रयोग गर्न सिफारिस गरिएको छ छवि ढाँचाहरू हल्का ढाँचाहरू, जस्तै JPEG वा कम्प्रेस गरिएको PNG, TIFF वा BMP जस्ता भारी ढाँचाहरूको सट्टा।

3. CSS को प्रयोग गरेर रिसाइज नगर्नुहोस्: यद्यपि CSS प्रयोग गरेर छवि रिसाइज गर्न सम्भव छ, यसले यसको गुणस्तरमा नकारात्मक असर पार्न सक्छ। यो सुरु देखि सही आयाम संग छविहरु को उपयोग गर्न को लागी राम्रो छ र CSS को माध्यम बाट आकार जबरजस्ती जोगिन। छविलाई सही रूपमा प्रदर्शन गर्न आवश्यक आयामहरू मात्र प्रयोग गर्नुहोस्, अत्यधिक ठूला वा सानो मानहरू बेवास्ता गर्दै।

याद गर्नुहोस् कि छवि अनुकूलन वेब विकासको एक आवश्यक भाग हो, किनकि ढिलो पृष्ठले प्रयोगकर्ता अनुभवमा नकारात्मक प्रभाव पार्न सक्छ। यी सिफारिसहरू पछ्याएर र उपयुक्त उपकरणहरू प्रयोग गरेर, तपाईंले HTML छविको गुणस्तरको त्याग नगरी यसको आकार घटाउन सक्षम हुनुहुनेछ, यसरी छिटो र अधिक कुशल वेब पृष्ठ प्राप्त गर्नुहुनेछ।

10. HTML मा छवि सानो बनाउन कोड उदाहरणहरू

एचटीएमएलमा छविलाई सानो बनाउनको लागि, तपाईंले छविको आकार बदल्न CSS प्रयोग गर्न सक्नुहुन्छ। यहाँ केहि कोड उदाहरणहरू छन् जुन तपाइँ सन्दर्भको रूपमा प्रयोग गर्न सक्नुहुन्छ:

1. छविको चौडाइ सेट गर्न CSS चौडाइ गुण प्रयोग गर्नुहोस्। उदाहरणका लागि, यदि तपाइँ छविको आकार आधाले घटाउन चाहनुहुन्छ भने, तपाइँ चौडाइ 50% मा सेट गर्न सक्नुहुन्छ।

2. छवि रिसाइज गर्ने अर्को तरिका छविको उचाइ सेट गर्न CSS "उचाइ" गुण प्रयोग गरेर हो। उदाहरणका लागि, यदि तपाइँ छविको आकार एक चौथाईले घटाउन चाहनुहुन्छ भने, तपाइँ उचाइलाई 25% मा सेट गर्न सक्नुहुन्छ।

3. तपाईंले छविको आकार बदल्नको लागि "रूपान्तरण" CSS गुण पनि प्रयोग गर्न सक्नुहुन्छ। उदाहरणका लागि, यदि तपाईं छविको साइज आधा अनुपातमा घटाउन चाहनुहुन्छ भने, तपाईंले "स्केल(०.५)" प्रकार्य प्रयोग गर्न सक्नुहुन्छ।

याद गर्नुहोस् कि यी केवल उदाहरणहरू हुन् र तपाईं आफ्नो आवश्यकता अनुसार मानहरू समायोजन गर्न सक्नुहुन्छ। साथै, ध्यान राख्नुहोस् कि HTML र CSS प्रयोग गरेर छवि रिसाइज गर्दा मात्र ब्राउजरमा प्रदर्शनलाई असर गर्छ, छवि फाइलको वास्तविक आकार होइन।

11. HTML मा छविहरू रिसाइज गर्दा सामान्य समस्याहरू समाधान गर्दै

प्रक्रिया तल विस्तृत रूपमा वर्णन गरिएको छ। चरणबद्ध रूपमा HTML मा छविहरू रिसाइज गर्दा सामान्य समस्याहरू समाधान गर्न:

1. CSS गुणहरू प्रयोग गर्नुहोस्: HTML ले छविहरूको आकार समायोजन गर्न धेरै CSS गुणहरू प्रदान गर्दछ। सबैभन्दा सामान्य मध्ये एक "चौडाई" गुण हो, जसले तपाईंलाई पिक्सेल वा प्रतिशतमा इच्छित चौडाइ निर्दिष्ट गर्न अनुमति दिन्छ। उदाहरण को लागी, छवि चौडाइ 300 पिक्सेल सेट गर्दछ। त्यस्तै गरी, "उचाइ" गुण उचाइ निर्दिष्ट गर्न प्रयोग गर्न सकिन्छ।

2. पक्ष अनुपात कायम राख्नुहोस्: विरूपण समस्याहरूबाट बच्नको लागि, छविहरू रिसाइज गर्दा मूल पक्ष अनुपात कायम राख्न सल्लाह दिइन्छ। यो प्राप्त गर्न, तपाइँ "चौडाई" गुण प्रयोग गर्न सक्नुहुन्छ र "उचाइ" गुणको मान खाली छोड्नुहोस् वा "स्वचालित" प्रयोग गर्नुहोस्। उदाहरण को लागी, .

3. बाह्य उपकरणहरू प्रयोग गर्नुहोस्: यदि तपाईंलाई एकै समयमा धेरै छविहरू रिसाइज गर्न आवश्यक छ वा यदि रिसाइज प्रक्रियामा थप उन्नत नियन्त्रण आवश्यक छ भने, बाह्य उपकरणहरू प्रयोग गर्न सकिन्छ। केहि लोकप्रिय विकल्पहरूमा छवि सम्पादन कार्यक्रमहरू समावेश छन् एडोब फोटोशप वा GIMP, वा TinyPNG वा Kraken.io जस्ता अनलाइन सेवाहरू। यी उपकरणहरूले सामान्यतया अधिक उन्नत विकल्पहरू प्रस्ताव गर्छन्, जस्तै स्वचालित रिसाइजिङ, सङ्कुचन, वा छविहरूको पुन: स्वरूपण।

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

12. HTML मा छवि कम्प्रेसन प्रविधिहरूको आवेदन

HTML मा छवि कम्प्रेसन प्रविधिहरूको प्रयोग वेबसाइटमा छविहरूको लोडिङ र प्रदर्शनलाई अनुकूलन गर्न आवश्यक छ। कम्प्रेसनले को आकार घटाउँछ छवि फाइलहरू यसको दृश्य गुणस्तरलाई उल्लेखनीय रूपमा असर नगरी, जसले पृष्ठको कार्यसम्पादन र प्रयोगकर्ता अनुभवमा सुधार गर्छ।

त्यहाँ धेरै कम्प्रेसन विधिहरू छन् जुन HTML मा लागू गर्न सकिन्छ, जस्तै Adobe Photoshop वा GIMP जस्ता विशिष्ट कार्यक्रमहरू र उपकरणहरूको प्रयोग, जसले तपाईंलाई वेबसाइटमा अपलोड गर्नु अघि छविहरूको गुणस्तर र आकार समायोजन गर्न अनुमति दिन्छ। अनलाइन सेवाहरू प्रयोग गर्न पनि सम्भव छ जसले गुणस्तर नगुमाईकनै छविहरू कम्प्रेस गर्दछ।

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

छोटकरीमा, यो वेबसाइटमा छविहरूको लोडिङ र प्रदर्शन सुधार गर्न आवश्यक छ। विशिष्ट कार्यक्रमहरू र उपकरणहरू प्रयोग गर्दै, उपयुक्त छवि ढाँचा छनौट गर्ने र अल्छी लोडिङ जस्ता प्रविधिहरू लागू गर्ने केही सिफारिस गरिएका अभ्यासहरू हुन्। सुधारिएको कार्यसम्पादन र एक इष्टतम प्रयोगकर्ता अनुभव। छविहरू छिटो र प्रभावकारी रूपमा लोड हुन्छ भनी सुनिश्चित गर्न विभिन्न यन्त्रहरू र जडानहरूमा वेबसाइट परीक्षण गर्न सधैं सम्झनुहोस्।

13. HTML मा विभिन्न यन्त्रहरूमा छविहरू कसरी अनुकूलन गर्ने

HTML मा विभिन्न यन्त्रहरूमा छविहरू अनुकूलन गर्ने विभिन्न तरिकाहरू छन्। यो समस्या समाधान गर्न एक चरण-दर-चरण विधि तल विस्तृत गरिनेछ।

1. "srcset" विशेषता प्रयोग गर्नुहोस्: यो विशेषताले तपाईंलाई विभिन्न स्क्रिन साइजका लागि विभिन्न छविहरू निर्दिष्ट गर्न अनुमति दिन्छ। यो गर्नका लागि, विभिन्न छवि फाइलहरूलाई "img" ट्यागमा समावेश गरी अल्पविरामद्वारा छुट्याइनुपर्छ। उदाहरणका लागि:
"`html

«`
यो कोडले संकेत गर्छ कि स्क्रिनको चौडाइ ३२० पिक्सेलसम्म छ भने "small-image.jpg" देखाइनेछ, यदि चौडाइ 320px भन्दा बढी छ तर 320px भन्दा कम वा बराबर छ भने "medium-image.jpg", र " ठूलो छवि .jpg» यदि चौडाइ 768px भन्दा ठूलो छ तर 768px भन्दा कम वा बराबर छ।

2. CSS मिडिया प्रश्नहरू प्रयोग गर्नुहोस्: अर्को विकल्प CSS मिडिया प्रश्नहरू नियमहरू प्रयोग गर्न विभिन्न स्क्रिन आकारहरूको लागि विभिन्न शैलीहरू परिभाषित गर्न हो। यस अवस्थामा, तपाइँ तत्वहरूको पृष्ठभूमिको रूपमा छविहरू प्रयोग गर्न सक्नुहुन्छ वा "चौडाइ" विशेषता प्रयोग गरेर विभिन्न छवि आकारहरू सेट गर्न सक्नुहुन्छ। उदाहरणका लागि:
"`html

«`
यो कोडले "small-image.jpg" लाई 480px चौडा स्क्रिनहरूमा वर्ग "image" भएको तत्वको पृष्ठभूमिको रूपमा, 480px भन्दा ठूला तर 1024px भन्दा कम वा बराबर स्क्रिनहरूमा "medium-image.jpg" देखाउँछ। 1024px भन्दा ठूलो स्क्रिनहरूमा "image-grande.jpg"।

3. फ्रेमवर्क र पुस्तकालयहरू प्रयोग गर्नुहोस्: त्यहाँ धेरै फ्रेमवर्क र पुस्तकालयहरू छन् जसले छवि अनुकूलन प्रक्रियालाई सरल बनाउँछ, जस्तै उत्तरदायी छवि समुदाय समूह (RICG), Picturefill र Lazy Load। यी उपकरणहरूले माथि उल्लेखित प्रविधिहरूको कार्यान्वयनलाई सहज बनाउँदछ र विभिन्न उपकरणहरूमा छविहरूको अधिक कुशल र स्वचालित अनुकूलनलाई अनुमति दिन्छ।

14. निष्कर्ष: HTML मा छवि सानो बनाउनको लागि उत्तम अभ्यासहरू

संक्षेपमा, एचटीएमएलमा छविको आकार घटाउनु एक अपेक्षाकृत सरल प्रक्रिया हो जुन केहि उत्कृष्ट अभ्यासहरू पछ्याएर प्राप्त गर्न सकिन्छ। त्यसो गर्नको लागि तल केही सुझावहरू र सिफारिसहरू छन्:

1. आकार विशेषताहरू प्रयोग गर्नुहोस्: लेबलको "चौडाइ" र "उचाइ" विशेषताहरू HTML मा छविको आयाम निर्दिष्ट गर्ने सरल तरिका हो। छविको चौडाइ र उचाइ क्रमशः ५०० र ३०० पिक्सेलमा सेट गर्नेछ। यो उल्लेख गर्न महत्त्वपूर्ण छ कि यसले छविको दृश्य आकार मात्र परिमार्जन गर्दछ, यसको फाइल आकार होइन।

2. छवि कम्प्रेस गर्नुहोस्: कम्प्रेसनले यसको दृश्य गुणस्तरलाई गम्भीर रूपमा असर नगरी छवि फाइलको आकार घटाउँछ। JPEG, PNG वा GIF ढाँचामा छविहरू कम्प्रेस गर्न धेरै अनलाइन उपकरणहरू र सफ्टवेयरहरू उपलब्ध छन्। सुनिश्चित गर्नुहोस् कि तपाइँ उपयुक्त कम्प्रेसन ढाँचा प्रयोग गर्नुहुन्छ र तपाइँको आवश्यकता अनुसार सेटिङहरू समायोजन गर्नुहोस्।

3. वेबको लागि अप्टिमाइज गर्नुहोस्: प्रयोगको लागि छवि अनुकूलन गर्ने अन्य तरिकाहरू छन् वेबमा। तपाईंले WebP वा SVG जस्ता थप प्रभावकारी छवि ढाँचाहरू प्रयोग गर्न सक्नुहुन्छ, जसले राम्रो कम्प्रेसन अनुपात प्रस्ताव गर्दछ। थप रूपमा, तपाईंले छविको रिजोल्युसन परिवर्तन गर्न विचार गर्नुपर्छ यदि यो केवल मोबाइल उपकरणहरूमा प्रदर्शित हुनेछ। ** ** ट्याग कसरी प्रयोग गर्ने भन्ने यहाँ छ HTML मा छविको धेरै संस्करणहरू समावेश गर्न र ब्राउजरलाई यसको क्षमताहरूको आधारमा सबैभन्दा उपयुक्त छनौट गर्न अनुमति दिन।

4. HTML कोडलाई सानो बनाउनुहोस्: अर्को महत्त्वपूर्ण पक्ष भनेको छवि समावेश भएको HTML कोडको साइज कम गर्नु हो। यो प्राप्त गर्न को लागी, तपाईले अनावश्यक खाली ठाउँ र टिप्पणीहरू हटाउन सक्नुहुन्छ। तपाईं CSS Sprites प्रविधि प्रयोग गरेर एकल स्प्राइट पानामा धेरै छविहरू संयोजन गर्न सक्नुहुन्छ। **

** यसले धेरै छवि अनुरोधहरू प्राप्त गर्दा सर्भर ओभरहेड घटाउँछ। थप रूपमा, क्यासिंग प्रविधिहरू प्रयोग गर्ने विचार गर्नुहोस् ताकि ब्राउजरले आफ्नो अस्थायी मेमोरीमा छविहरू बचत गर्न सक्छ र तिनीहरूलाई प्रत्येक भ्रमणको साथ फेरि डाउनलोड गर्न नपरोस्।

यी उत्कृष्ट अभ्यासहरू पालना गर्नुहोस् र तपाइँ निश्चित रूपमा तपाइँको HTML छविहरूको आकारलाई कुशलतापूर्वक कम गर्न सक्षम हुनुहुनेछ, यसरी तपाइँको वेबसाइटको प्रदर्शनलाई अनुकूलन गर्न र राम्रो प्रयोगकर्ता अनुभव प्रदान गर्न।

निष्कर्षमा, HTML मा छविको आकार घटाउनु वेबसाइटको लोडिङ गतिलाई अनुकूलन गर्न र प्रयोगकर्ता अनुभव सुधार गर्न आवश्यक प्रक्रिया हो। उल्लेख गरिएका उपकरण र प्रविधिहरू मार्फत, विकासकर्ताहरूले प्रभावकारी रूपमा यो लक्ष्य हासिल गर्न सक्छन्।

छवि आकार निर्दिष्ट गर्न HTML ट्यागहरू प्रयोग गर्दा लोडिङ समस्याहरू रोक्छ र छवि विभिन्न यन्त्रहरू र स्क्रिनहरूमा सही रूपमा प्रदर्शित हुन्छ भनेर सुनिश्चित गर्दछ। थप रूपमा, JPEG वा WebP जस्ता ढाँचाहरूसँग छवि कम्प्रेस गरेर, महत्त्वपूर्ण दृश्य गुणस्तर नगुमाई फाइलको वजन घटाइन्छ।

यो सम्झना महत्त्वपूर्ण छ कि प्रत्येक वेबसाइट अद्वितीय छ र तपाइँको विशिष्ट आवश्यकताहरु को आधार मा अतिरिक्त समायोजन को आवश्यकता हुन सक्छ। यो इष्टतम प्रदर्शन कायम राख्न आवधिक परीक्षण र अनुकूलन प्रदर्शन गर्न सल्लाह दिइन्छ।

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