कैसे एसईओ अनुकूल होने के लिए अपनी छवियों का अनुकूलन करने के लिए (पूरा गाइड)

आपकी वेबसाइट का प्रदर्शन उस विशिष्ट वेब होस्ट से लेकर कई कारकों पर निर्भर करता है, जो आपके द्वारा चुनी गई छवि फ़ाइल आकार के लिए, वेबसाइट पहुंच संबंधी दिशानिर्देशों के बाद आपके द्वारा चुने गए विशिष्ट वेब होस्ट से लेकर है।.


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

छवि अनुकूलन क्या है?

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

फ़ाइल का आकार घटाना छवि अनुकूलन है। आप इसके लिए स्क्रिप्ट या प्लगइन का उपयोग कर सकते हैं.

इसके बाद आपके पृष्ठों के लिए तेजी से लोडिंग समय होता है। दोषरहित और हानिपूर्ण संपीड़न दो सबसे सामान्य अनुकूलन विधियाँ हैं.

छवि प्रारूपण के लाभ

वेब पर औसत छवि आकारयह अनुमान है कि एक वेबपेज के कुल वजन का लगभग 54 प्रतिशत छवियों के कारण है.

जब आप वेबसाइट ऑप्टिमाइज़ेशन पर काम कर रहे हों, तो इसकी वजह से आपकी छवियां आपका पहला काम होना चाहिए। छवि प्रारूपण के लाभों में शामिल हैं:

  • बेहतर पेज लोड करने की गति
  • बैकअप बनाने के लिए यह तेज़ है
  • कम सर्वर स्टोरेज स्पेस की आवश्यकता होती है
  • सही एसईओ प्लगइन के साथ बेहतर एसईओ
  • कम बैंडविड्थ का उपयोग किया जाता है

छवि अनुकूलन के साथ प्रदर्शन में सुधार कैसे करें

लक्ष्य समान रूप से स्वीकार्य गुणवत्ता और न्यूनतम संभव फ़ाइल आकार को संतुलित करना है। ऐसा करने के लिए आपके पास एक से अधिक तरीके हैं। अपलोड करने से पहले, अपनी छवियों को संपीड़ित करना एक सामान्य विकल्प है। आप इस उद्देश्य के लिए एक उपकरण या एक प्लगइन का उपयोग कर सकते हैं (यहां कुछ हैं).

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

अपनी आवश्यकताओं के लिए सबसे अच्छा संयोजन निर्धारित करने के लिए विभिन्न फ़ाइल स्वरूपों और संपीड़न प्रकारों के साथ प्रयोग.

सर्वश्रेष्ठ फ़ाइल स्वरूप चुनें

सर्वश्रेष्ठ फ़ाइल प्रकार चुनने के लिए, यह जानना महत्वपूर्ण है कि कौन से उपलब्ध हैं। ये सबसे आम हैं:

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

छवि फ़ाइल स्वरूप

अन्य विकल्प भी हैं, लेकिन ये सबसे आम हैं और इनके साथ काम करना आसान है। अन्य विकल्पों में जेपीईजी एक्सआर और वेबपी शामिल हैं। सभी ब्राउज़र इन दोनों का समर्थन नहीं करते हैं, इसलिए इससे अवगत रहें.

हालांकि, वे एक व्यवहार्य विकल्प हो सकते हैं। उदाहरण के लिए, तुलनात्मक जेपीईजी छवि की तुलना में, औसतन, वेबपी के साथ 30 प्रतिशत फ़ाइल आकार में कमी है.

इन दो विकल्पों के लिए सार्वभौमिक समर्थन की कमी के कारण, आपके एप्लिकेशन को आपके सर्वर पर अतिरिक्त तर्क की आवश्यकता होगी या उपयुक्त संसाधन प्रदान करने के लिए आवेदन करना होगा:

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

आकार बनाम संपीड़न गुणवत्ता

कम संपीड़न एक उच्च गुणवत्ता देने के लिए जाता है, लेकिन आम तौर पर फाइल का आकार बड़ा होता है। उच्च संपीड़न के साथ विपरीत सच है। फाइलें छोटी हैं, लेकिन गुणवत्ता कम हो जाती है.

छवि गुणवत्ता बनाम संपीड़न

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

दोषरहित बनाम हानिपूर्ण अनुकूलन

ये दो प्रकार के संपीड़न हैं जो आप उपयोग करेंगे। यह समझना महत्वपूर्ण है कि वे क्या करते हैं:

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

या तो दोषरहित या कमज़ोर कॉन्फ़िगरेशन का इष्टतम कॉन्फ़िगरेशन आपके स्वयं के मानदंड पर निर्भर करता है, जैसे कि प्रस्तुत की गई कलाकृतियों और फ़ाइल का आकार और छवि सामग्री के बीच का व्यापार.

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

स्केल पर छवियों का आकार बदलना

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

वर्डप्रेस में आकार बदलने वाली छवि

मूल फ़ाइल अछूती और बरकरार रहती है। यदि आप चाहें तो डिस्क स्थान के संरक्षण के लिए मूल को सहेजने से बचने के लिए आप प्लगइन्स का उपयोग कर सकते हैं.

छवियों को बदलना और खत्म करना

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

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

यह आपकी पठनीयता और ब्रांडिंग में भी सुधार कर सकता है। बस यह सुनिश्चित करें कि आप अभी भी आसानी से खोज कर सकते हैं, पाठ का चयन कर सकते हैं और इसे पढ़ सकते हैं, बिना पठनीयता के मुद्दों के.

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

रेखापुंज बनाम वेक्टर छवियाँ

रैस्टर बनाम वेक्टर

रेखापुंज और वेक्टर प्राथमिक छवि फ़ाइल प्रकारों में से दो हैं। पिक्सेल-आधारित प्रोग्राम, एक स्कैनर या एक कैमरा का उपयोग रेखापुंज चित्र बनाने के लिए किया जाता है.

ये व्यापक रूप से इंटरनेट पर उपयोग किए जाते हैं और अधिक सामान्यतः उपयोग किए जाते हैं। वेक्टर सॉफ्टवेयर का उपयोग वेक्टर इमेज बनाने के लिए किया जाता है। ये उन चित्रों के लिए आम हैं, जो भौतिक उत्पादों और इंजीनियरिंग, सीएडी और 3 डी ग्राफिक्स पर चलते हैं.

वेक्टर छवियां संकल्प- और ज़ूम-स्वतंत्र हैं। जब ज्यामितीय आकार शामिल होते हैं, तो वेक्टर आदर्श होता है। जब चित्र जटिल होते हैं और उनके पास विवरणों और अनियमित आकृतियों का खजाना होता है, तो रेखापुंज चित्रों को पसंद किया जाता है.

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

उच्च संकल्प स्क्रीन निहितार्थ

दो अलग-अलग पिक्सेल प्रकारों के बीच अंतर करना महत्वपूर्ण है, जिसमें डिवाइस पिक्सेल और सीएसएस पिक्सेल शामिल हैं। एक सीएसएस पिक्सेल में कई डिवाइस पिक्सेल मौजूद हो सकते हैं। स्क्रीन पर विस्तार अधिक डिवाइस पिक्सेल के साथ महीन हो जाता है.

सीएसएस पिक्सेल बनाम डिवाइस पिक्सेलउच्च डिवाइस पिक्सेल काउंट का पूरा लाभ उठाने के लिए, छवि परिसंपत्तियों में अधिक विवरण होना चाहिए.

यह कार्य है वेक्टर छवियों के लिए आदर्श है क्योंकि वे तेज परिणाम पैदा कर सकते हैं जब किसी भी प्रस्ताव पर प्रदान किया गया.

चूंकि रेखापुंज छवियां छवि डेटा को एन्कोड करने के लिए प्रति-पिक्सेल आधार का उपयोग करती हैं, इसलिए वे अधिक चुनौतीपूर्ण हैं। जबकि पिक्सल बढ़ने पर रैस्टर फाइल साइज बढ़ जाता है.

इसलिए, उच्च-रिज़ॉल्यूशन स्क्रीन को लाभ प्राप्त करने के लिए उच्च-रिज़ॉल्यूशन छवियों की आवश्यकता होती है। वेक्टर चित्र हैं उच्च-रिज़ॉल्यूशन स्क्रीन के लिए सबसे अच्छा है चूंकि वे हमेशा स्वतंत्र होने के कारण तेज परिणाम प्रदान करते हैं.

बस याद रखें कि संकल्प की परवाह किए बिना, छवि अनुकूलन तकनीक समान हैं.

वेक्टर छवियों का अनुकूलन

स्केलेबल वेक्टर ग्राफिक्स (एसवीजी) सभी आधुनिक ब्राउज़रों द्वारा समर्थित हैं.

यह दो-आयामी ग्राफिक्स के लिए आदर्श है और प्रारूप XML- छवि आधारित है। एसवीजी फाइलें पाठ संपादक का उपयोग करके बनाई जा सकती हैं जिन्हें आप पसंद करते हैं या अधिकांश वेक्टर-आधारित सॉफ़्टवेयर प्रकारों के साथ.

एसवीजी फ़ाइलों के आकार को कम करने के लिए, उन्हें छोटा किया जाना चाहिए। एसवीजी फ़ाइलों को संपीड़ित करते समय GZIP का उपयोग किया जाना चाहिए.

रेखापुंज छवियों का अनुकूलन

पिक्सल का एक ग्रिड एक रेखापुंज छवि बनाता है। अलग-अलग पिक्सेल दो-आयामी ग्रिड पर हैं। उदाहरण के लिए, 10,000 पिक्सेल्स का एक क्रम 100 बाय 100 पिक्सल की छवि बनाता है। हर पिक्सेल पारदर्शिता और रंग जानकारी को एन्कोड करता है.

रेखापुंज भारीRGBA मान प्रत्येक पिक्सेल द्वारा संग्रहीत किए जाते हैं। इसमें शामिल है:

  • लाल चैनल
  • ब्लू चैनल
  • ग्रीन चैनल
  • अल्फा (पारदर्शिता) चैनल

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

इसलिए, छवि फ़ाइल का आकार कम करने के लिए, कुछ रणनीतियाँ हैं:

  • छवि की बिट-डेप्थ को कम करें आप छोटे रंग की पटल का उपयोग करके ऐसा कर सकते हैं.
  • उस डेटा को ऑप्टिमाइज़ करें जिसे व्यक्तिगत पिक्सेल स्टोर कर रहे हैं.

उपकरण और पैरामीटर ट्यूनिंग

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

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

कुछ सामान्य उपकरणों के बारे में सीखना आपको सही विकल्प बनाने में सहायता कर सकता है। ये चार सबसे अधिक उपयोग किए जाने वाले हैं:

  • Gifsicle: यह आपको विभिन्न GIF छवियों को अनुकूलित और बनाने की अनुमति देता है.
  • Optipng: इसका उपयोग दोषरहित PNG अनुकूलन की अनुमति देने के लिए किया जाता है.
  • Jpegtran: यह आपको JPEG छवियों को अनुकूलित करने की अनुमति देता है.
  • Pngquant: यह हानिपूर्ण PNG अनुकूलन के लिए अनुमति देने के लिए उपयोग किया जाता है.

स्केलिंग इमेज एसेट्स देना

जब आप छवि अनुकूलन का प्रदर्शन कर रहे हैं तो विचार करने के लिए दो प्राथमिक मापदंड हैं:

  • पिक्सेल की छवि की कुल संख्या का अनुकूलन.
  • एक छवि में प्रत्येक पिक्सेल को एनकोड करने के लिए कितने बाइट्स का अनुकूलन आवश्यक है.

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

इस वजह से, छवियों को अनुकूलित करने का सबसे प्रभावी और आसान तरीका यह सुनिश्चित करना है कि आप अधिक पिक्सेल शिपिंग नहीं कर रहे हैं, जो आपको बिल्कुल अपने इच्छित आकार में ब्राउज़र में संपत्ति दिखाने की आवश्यकता है.

इसलिए, छवियों को पुनर्विक्रय करने के लिए केवल अपने ब्राउज़र पर निर्भर न रहें. इससे उन्हें कम रिज़ॉल्यूशन पर प्रदर्शित किया जा सकता है। यह बहुत से अतिरिक्त CPU संसाधनों का भी उपयोग करता है.

आमतौर पर वितरित हर एक संपत्ति के लिए सटीक प्रदर्शन आकार की गारंटी देना संभव नहीं है। हालांकि, यह सुनिश्चित करना महत्वपूर्ण है कि आप सभी अनावश्यक पिक्सेल को न्यूनतम रखें.

यह भी जरूरी है कि आप अपनी बड़ी संपत्ति को अपने प्रदर्शन आकार के करीब पहुंचाएं.

छवि अनुकूलन चेकलिस्ट

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

यह आपके आगंतुकों को खुश करेगा और आपकी वेबसाइट के समग्र कार्य में सुधार करेगा। जब आप अपनी छवियों का अनुकूलन कर रहे हैं तो निम्नलिखित चेकलिस्ट बिंदुओं पर विचार करें:

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

इसे योग करने के लिए, छवि अनुकूलन के लिए एक विज्ञान और एक कला दोनों है। अत्यधिक विकसित एल्गोरिदम और तकनीक विज्ञान के रूप में काम करते हैं.

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

Wix जैसे तीसरे पक्ष के वेबसाइट बिल्डरों की बढ़ती लोकप्रियता और परिष्कार के साथ, डिजाइनरों के लिए मैला करना आसान है, लेकिन अच्छी छवि अनुकूलन प्रक्रियाओं को विकसित करने और बनाए रखने पर ध्यान केंद्रित करना है चाहे एक थप्पड़ मारना या खरोंच से एक साइट का निर्माण करना.

संदर्भ और छवि क्रेडिट:

  • PicupMedia.com
  • Computing.HomeDNS.org
  • CognitiveSEO.com
  • StackOverflow.com
  • EngineThemes.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector