बेहतर वेब प्रदर्शन के लिए छवियों को अनुकूलित करने के 6 तरीके

बेहतर वेब प्रदर्शन के लिए छवियों को अनुकूलित करने के 6 तरीके
Rick Davis

विषयसूची

मनुष्य दृश्य जीव हैं, और अनुसंधान इस तथ्य का समर्थन करता है। केवल तीन दिनों के बाद, पाठ के लिए प्रतिधारण दर केवल 10% -20% की सीमा के भीतर है। लेकिन छवियों के लिए, प्रतिधारण दर 65% जितनी अधिक हो सकती है। मस्तिष्क 90% दृश्य जानकारी प्राप्त करता है और इसे 60,000 गुना तेजी से संसाधित करता है। निःसंदेह, वेबसाइट एंगेजमेंट में विज़ुअल्स महत्वपूर्ण भूमिका निभाते हैं।

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

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

इमेज ऑप्टिमाइज़ेशन उन सभी कदमों को संदर्भित करता है जो आप फ़ाइलों के आकार, प्रारूप या रिज़ॉल्यूशन को कम करने के लिए करते हैं। आप छवियों की गुणवत्ता से समझौता किए बिना ऐसा कर सकते हैं।

आइए आपके कुछ चित्र देखेंविकल्प।

डीमक दक्षिणा द्वारा विपणन अभियान चित्रण

1। इमेज ऑप्टिमाइज़ेशन ऑडिट के साथ शुरुआत करें

इमेज ऑप्टिमाइज़ेशन ऑडिट से आपको प्रासंगिक जानकारी मिलेगी कि आपको कहां सुधार करने की ज़रूरत है।

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

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

2। इमेज के लिए सही फ़ॉर्मैट चुनें

इमेज फ़ाइलें अलग-अलग फ़ॉर्मैट में आती हैं। वेब एप्लिकेशन के लिए ये तीन सबसे सामान्य प्रकार के छवि प्रारूप हैं जिन्हें आपको जानना आवश्यक है:

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

एंड्रियास स्टॉर्म द्वारा आइकन सहेजें

3। छवियों का आकार बदलें और उन्हें संपीड़ित करें

आपने देखा होगा कि छवियां धीरे-धीरे लोड होती हैं। पूरी छवि देखने से पहले आपको कुछ समय लगेगा; एक संकेत है कि तस्वीरें शायद बहुत भारी हैं। आकार बदलने या संपीड़ित करने से समस्या का ख्याल रखा जाएगा।

यह सभी देखें: बॉहॉस आंदोलन: डिजाइन सिद्धांत, विचार और प्रेरणाकृपया ध्यान दें कि आपको किसी भी इमेज को ऑप्टिमाइज़ करने से पहले उसे अपलोड नहीं करना चाहिए। और सर्वोत्तम गुणवत्ता के लिए, फ़ाइलों को 1 से 2 एमबी की सीमा के भीतर रखने का लक्ष्य रखें।

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

यह सभी देखें: ट्रिक या ट्रीट: फ्री डिज़ाइन एसेट्स के साथ डरावना सीज़न मनाएं

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

संपीड़न के प्रकार

दो अवधारणाएं हैं जिनका हम पहले ही ऊपर उल्लेख कर चुके हैं, दोषरहित बनाम हानिपूर्ण संपीड़न।

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

सही चित्र संपादक आपको यह निर्धारित करने में मदद करेगा कि कौन साकंप्रेशन आपके लिए सबसे अच्छा काम करता है।

4. मोबाइल-फ़र्स्ट इमेज ऑप्टिमाइज़ेशन

आपके द्वारा उठाए जाने वाले किसी भी कदम को मोबाइल-फ़र्स्ट एसईओ रणनीति का पालन करना चाहिए, क्योंकि Google ने मोबाइल फ़र्स्ट रैंकिंग पर स्विच किया है। छवियों को किसी भी मोबाइल डिवाइस पर किसी भी डेस्कटॉप डिवाइस की तरह ही दिखना चाहिए। ऐसे उपकरणों के माध्यम से भारी मात्रा में इंटरनेट ट्रैफ़िक आता है।

यदि उपयोगकर्ता मोबाइल उपकरणों का उपयोग करते समय एक अच्छे UX के साथ नहीं जुड़े हैं, तो आप उन्हें खो देंगे।

मोबाइल-फर्स्ट के लिए छवियों को अनुकूलित करने पर विचार करें। अगर यह छोटे पर्दे पर अच्छा दिखता है, तो यह डेस्कटॉप या लैपटॉप पर शानदार दिखेगा।

एबी_केरीमोव द्वारा एएसओ अनुकूलन

5। फ़ाइल नाम और SEO पर उनका प्रभाव

छवि अनुकूलन के लिए आपको इस बात पर भी ध्यान देने की आवश्यकता है कि आप फ़ाइलों को कैसे नाम देते हैं। आपके द्वारा की जाने वाली सभी क्रियाओं का उद्देश्य खोज इंजनों पर दृश्यता में सुधार करना होना चाहिए। जब आप तस्वीर अपलोड करते हैं या लेते हैं, तो डिवाइस स्वचालित रूप से इसे फ़ाइल नाम देगा। इस नाम में आमतौर पर यादृच्छिक कोड या संख्याएँ शामिल होती हैं। यह 2224444.jpg जैसा कुछ दिख सकता है।

तस्वीर को अपनी वेबसाइट पर अपलोड करने से सर्च इंजन को बिल्कुल भी मदद नहीं मिलेगी।

प्रत्येक छवि को वर्णनात्मक लेबल आवंटित करके वेब क्रॉलर के लिए आपको ढूंढना आसान बनाएं। प्रासंगिक कीवर्ड शामिल करें जो आपके व्यवसाय या साइट के बारे में जानकारी देते हैं।

6. आलसी लोडिंग का उपयोग करने पर विचार करें

छवियों की आलसी लोडिंग बिल्कुल वैसा ही है जैसा कि नाम से पता चलता है। के बजायपूरी छवि एक बार में लोड हो रही है, यह एक तरह से सामने आती है। छवि लोड करना जारी रखती है और ऑनलाइन विज़िटर पृष्ठ को नीचे स्क्रॉल करता है।

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

लोड हो रहा है... डोना द्वारा

अंतिम विचार <5

वेब प्रदर्शन एक महत्वपूर्ण रैंकिंग कारक है जिसका उपयोग खोज इंजन करते हैं। पेज लोड होने की गति कम होने पर Google आपकी साइट को penalize करेगा।

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

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




Rick Davis
Rick Davis
रिक डेविस उद्योग में 10 से अधिक वर्षों के अनुभव के साथ एक अनुभवी ग्राफिक डिजाइनर और दृश्य कलाकार हैं। उन्होंने छोटे स्टार्टअप्स से लेकर बड़े निगमों तक कई तरह के ग्राहकों के साथ काम किया है, जिससे उन्हें अपने डिजाइन लक्ष्यों को प्राप्त करने और प्रभावी और प्रभावशाली दृश्यों के माध्यम से अपने ब्रांड को ऊपर उठाने में मदद मिली है।न्यूयॉर्क शहर में स्कूल ऑफ़ विज़ुअल आर्ट्स के स्नातक, रिक को नए डिज़ाइन रुझानों और तकनीकों की खोज करने और क्षेत्र में जो संभव है उसकी सीमाओं को लगातार आगे बढ़ाने का शौक है। ग्राफिक डिजाइन सॉफ्टवेयर में उनकी गहरी विशेषज्ञता है, और वे हमेशा अपने ज्ञान और अंतर्दृष्टि को दूसरों के साथ साझा करने के लिए उत्सुक रहते हैं।एक डिजाइनर के रूप में अपने काम के अलावा, रिक एक प्रतिबद्ध ब्लॉगर भी हैं, और ग्राफिक डिजाइन सॉफ्टवेयर की दुनिया में नवीनतम रुझानों और विकास को कवर करने के लिए समर्पित हैं। उनका मानना ​​है कि एक मजबूत और जीवंत डिजाइन समुदाय को बढ़ावा देने के लिए जानकारी और विचारों को साझा करना महत्वपूर्ण है, और हमेशा अन्य डिजाइनरों और क्रिएटिव के साथ ऑनलाइन जुड़ने के लिए उत्सुक रहते हैं।चाहे वह क्लाइंट के लिए एक नया लोगो डिजाइन कर रहा हो, अपने स्टूडियो में नवीनतम उपकरणों और तकनीकों के साथ प्रयोग कर रहा हो, या सूचनात्मक और आकर्षक ब्लॉग पोस्ट लिख रहा हो, रिक हमेशा सर्वोत्तम संभव काम देने और दूसरों को उनके डिजाइन लक्ष्यों को प्राप्त करने में मदद करने के लिए प्रतिबद्ध है।