एक तस्वीर हजार शब्दों के बराबर होती है क्योंकि यह अधिक संदेश दे सकती है। इस डिजिटल दुनिया में लगभग 64% वेबसाइटों में मीडिया, ई-कॉमर्स, ट्रैवल वेबसाइट सभी की छवियां हैं। जैसा कि हम मनुष्य दृश्य प्राणी हैं और मानव मस्तिष्क का एक महत्वपूर्ण प्रतिशत छवियों को संसाधित करने के लिए समर्पित है। वेबसाइटें आज उपयोगकर्ताओं का ध्यान आकर्षित करने के लिए इस प्रसिद्ध तथ्य का उपयोग करती हैं। लेकिन अनुचित और निम्न-गुणवत्ता वाली छवियों वाली कुछ वेबसाइटें उतनी प्रेरक नहीं होतीं।
एक वेबसाइट जो लोड होने में 3 सेकंड से अधिक समय लेती है, उपयोगकर्ताओं की व्यस्तता खो देती है और उसकी Google रैंकिंग कम होती है। इसलिए, यदि आपकी वेबसाइट पर विज़िटर की कमी है, तो अच्छी Google रैंकिंग के लिए आपको छवियों को अनुकूलित करने और नीचे बताए गए कुछ सुझावों का पालन करने की आवश्यकता है:
इससे पहले कि हम छवि अनुकूलन के बारे में जानें, आइए जानें कि छवि अनुकूलन क्या है और छवि अनुकूलन क्यों महत्वपूर्ण है।
छवि अनुकूलन क्या है?
छवि अनुकूलन छवि गुणवत्ता को खोए बिना फ़ाइल आकार को कम करने की एक प्रक्रिया है। इसका मतलब है कि आपको सबसे छोटा संभव आकार रखकर सही प्रारूप, आकार, आयाम और रिज़ॉल्यूशन में उच्च गुणवत्ता वाली छवियां मिलती हैं। एक छवि को विभिन्न तरीकों से अनुकूलित किया जा सकता है जैसे आकार को संपीड़ित करना, आकार बदलना और कैशिंग करना। यह वेबसाइटों के प्रदर्शन को बेहतर बनाने और वेबपेज लोड गति को बढ़ाने में मदद करता है।
छवि अनुकूलन क्यों महत्वपूर्ण है?
उपयोगकर्ता उस वेबसाइट को छोड़ देते हैं जो लोड होने में 3 सेकंड से अधिक समय लेती है, इस प्रकार बाउंस दर बढ़ जाती है जो अंततः वेबसाइटों की रूपांतरण दर को प्रभावित करती है। लेकिन इमेज ऑप्टिमाइजेशन के साथ पेज लोड स्पीड को बढ़ाया जा सकता है, वेबसाइटों की SEO रैंकिंग में सुधार किया जा सकता है, उपयोगकर्ताओं के अनुभव को बढ़ाया जा सकता है।
पृष्ठ लोड गति एक वेब पेज द्वारा पूरी तरह से लोड होने में लगने वाला समय है। 2 सेकंड से कम लोड समय वाली वेबसाइट सबसे अधिक देखी और पसंद की जाती है। इस प्रकार, वेबसाइट रैंकिंग में महत्वपूर्ण भूमिका निभा रहा है और छवि अनुकूलन को महत्वपूर्ण बना रहा है। इतना ही नहीं यह इमेज ऑप्टिमाइजेशन SEO रैंकिंग और कन्वर्जन से भी संबंधित है।
वेब के लिए छवि को अनुकूलित करने और पृष्ठ को तेजी से लोड करने के लिए यहां कुछ युक्तियां दी गई हैं।
<एच3>1. छवियों को उचित रंग योजना में सहेजेंमुख्य रूप से, RGB और CMYK दो रंग योजनाएं हैं जिनका उपयोग कंप्यूटर द्वारा छवियों को प्रदर्शित करने के लिए किया जाता है। जहां RGB का मतलब (लाल, हरा, नीला) और CMYK का मतलब सियान, मैजेंटा, पीला और काला है। RGB एक मानक रंग स्थान है जिसका उपयोग कैमरा, कंप्यूटर द्वारा किया जाता है और CMYK का उपयोग मुद्रण के लिए किया जाता है।
इसलिए, यदि वेब पर सीएमवाईके छवियों का उपयोग किया जाता है तो वे पृष्ठ लोड गति को धीमा कर देते हैं और साथ ही, वे आरजीबी के रूप में उज्ज्वल और ज्वलंत नहीं होते हैं। इसलिए, उपयोगकर्ताओं को आकर्षित करने और पृष्ठ लोड गति को बढ़ावा देने के लिए RGB रंग योजना छवियों का उपयोग किया जाना है।
CMYK छवियों को RGB में बदलने के लिए Adobe Photoshop का उपयोग किया जा सकता है। एक बार किसी छवि का रंग प्रोफ़ाइल बदल जाने के बाद फ़ाइल को किसी अन्य नाम से सहेजा जाना चाहिए ताकि दोनों फ़ाइलों के बीच अंतर को आसान बनाया जा सके।
<एच3>2. छवि फ़ाइल आकार को संपीड़ित करें2MB से अधिक आकार की वेब फ़ाइल का उपयोग नहीं किया जाना चाहिए क्योंकि यह पृष्ठ लोड गति को भी धीमा कर देती है। इसलिए, आकार को 2MB (2048 किलोबाइट) तक सीमित रखना एक अच्छा विचार है। इसके अलावा वेबसाइटों के लिए इस्तेमाल की जाने वाली इमेज को पिक्सलेट नहीं किया जाना चाहिए। इसका मतलब है कि छवियां तेज होनी चाहिए और छवि गुणवत्ता आकस्मिक होनी चाहिए। छवि गुणवत्ता संपीड़न सेटिंग्स, अंतिम फ़ाइल आकार पर निर्भर करती है। सही संपीड़न सेटिंग्स के साथ, छोटे फ़ाइल आकार और अच्छी छवि गुणवत्ता प्राप्त की जा सकती है।
आम तौर पर, 70-80% के बीच छवि संपीड़न स्तर के साथ सहेजी गई छवि पिक्सेलेटेड नहीं होती है। इसके लिए इमेज कंप्रेशन टूल का इस्तेमाल किया जा सकता है।
<एच3>3. छवि को सही फ़ाइल स्वरूप में सहेजेंजेपीजी, पीएनजी, जीआईएफ और एसवीजी के चार प्रमुख फाइल फॉर्मेट हैं जिनमें ग्राफिक्स और इमेज को सेव किया जा सकता है। लेकिन प्रत्येक फ़ाइल प्रारूप के अपने फायदे और नुकसान होते हैं। इसलिए, प्रत्येक ग्राफिक या छवि को रास्टर या वेक्टर के आधार पर एक विशिष्ट प्रारूप में सहेजा जाना चाहिए।
रेखापुंज छवियां पिक्सेल की सीमित संख्या होती है और इसे स्कैनर या कैमरा जैसे पिक्सेल-आधारित प्रोग्राम का उपयोग करके कैप्चर किया जा सकता है। जब बढ़े हुए रेखापुंज चित्र गुणवत्ता खो देते हैं और रेखापुंज छवियों के लिए सबसे उपयुक्त प्रारूप JPG, PNG और GIF होते हैं।
जबकि वेक्टर ग्राफ़िक्स वेक्टर सॉफ्टवेयर का उपयोग करके बनाए गए हैं और इन छवियों को गुणवत्ता के साथ समझौता किए बिना विस्तारित किया जा सकता है। वेक्टर छवियों के लिए सबसे उपयुक्त प्रारूप एसवीजी और जीआईएफ हैं। लेकिन वेक्टर इमेज को JPG या PNG फॉर्मेट में भी सेव किया जा सकता है। लेकिन ऐसा करने से छवि आपके ग्राफ़िक को असीम रूप से मापने की क्षमता खो देती है।
जेपीजी
जेपीजी के गुण
- न्यूनतम फ़ाइल आकार
- सर्वश्रेष्ठ उच्च-गुणवत्ता वाली छवियां
- वेब और अन्य आधुनिक उपकरणों के साथ संगत
जेपीजी के दोष
- संपीड़ित होने पर कम छवि गुणवत्ता
- पारदर्शी पृष्ठभूमि का समर्थन नहीं करता
JPG का उपयोग कब करें
JPG का उपयोग तब किया जा सकता है जब उच्च गुणवत्ता वाली गैर-चलती छवियों की आवश्यकता हो। लेकिन उनका उपयोग रंगीन पृष्ठभूमि पर नहीं किया जाना चाहिए।
पीएनजी
जेपीजी की तुलना में बहुमुखी एक अन्य सामान्य रेखापुंज प्रारूप पीएनजी है। यह 16 मिलियन से अधिक रंगों, अल्फा चैनल या पारदर्शी पृष्ठभूमि का समर्थन कर सकता है।
पीएनजी की खूबियां
- रंगीन पृष्ठभूमि पर छवियों को परत करने के लिए पारदर्शी पृष्ठभूमि प्रदान करता है
- गुणवत्ता खोए बिना छवियों को संपीड़ित किया जा सकता है
पीएनजी के नुकसान
- छवि फ़ाइल का आकार JPG से बड़ा है
- एनीमेशन का समर्थन नहीं करता
PNG का उपयोग कब किया जाना चाहिए
जब गैर-सफेद पृष्ठभूमि वाले ग्राफिक्स, टेक्स्ट, तेज किनारों, लोगो, आइकन और अन्य डिज़ाइन की आवश्यकता होती है तो पीएनजी ग्राफिक्स का उपयोग किया जाना चाहिए।
जीआईएफ
जीआईएफ एक और रास्टर प्रारूप है जो गति बनाने के लिए छवियों को एक दूसरे के ऊपर अनुक्रमित करके चलती छवियों को प्राप्त करने की अनुमति देता है।
जीआईएफ की खूबियां
- एनिमेटेड संदेश और चित्र बना सकते हैं
- पारदर्शी पृष्ठभूमि का समर्थन करता है
जीआईएफ के नुकसान
- छवि फ़ाइल का आकार और गुणवत्ता रंगों से जुड़ी हुई है। अधिक रंगों का अर्थ है तेज छवि, लेकिन इससे फ़ाइल का आकार बढ़ जाता है। जबकि कम रंग छवि को अधिक दानेदार बना देंगे
- केवल 256 रंगों वाली छवि का उपयोग किया जा सकता है
जब GIF का उपयोग किया जाना चाहिए
जीआईएफ एक ही ग्राफिक में लोच और दिलचस्प परिवर्तनों के साथ कई छवियों को प्रदर्शित करने की अनुमति देता है। हालांकि, कई रंगों वाले ग्राफ़िक्स फ़ाइल का आकार बढ़ाते हैं।
एसवीजी
जेपीजी के विपरीत, पीएनजी, जीआईएफ, एसवीजी एक वेक्टर प्रारूप है। यह वेब पर तेज ग्राफिक्स के साथ वस्तु में हेरफेर करने की अनुमति देता है। इंकस्केप, एडोब इलस्ट्रेटर और स्केच वेक्टर इमेज जैसे प्रोग्रामों का उपयोग करके संपादित और बनाया जा सकता है।
एसवीजी के गुण
- फ़ाइल का छोटा आकार
- फ़ाइल की गुणवत्ता खोए बिना उसका आकार बदला जा सकता है
- डेवलपर के लिए उपयोगी
- एडोब इलस्ट्रेटर जैसे प्रोग्राम का उपयोग वेक्टर छवियों को संपादित करने के लिए किया जा सकता है
- एनीमेशन की अनुमति देता है
- ग्राफिक्स के लिए माइक्रोसॉफ्ट ऑफिस द्वारा समर्थित
एसवीजी के दोष
- छवि फ़ाइल का आकार और गुणवत्ता रंगों से जुड़ी हुई है। अधिक रंगों का अर्थ है तेज छवि लेकिन बड़ी छवि फ़ाइल आकार के साथ। कम रंग छवि को और अधिक दानेदार बना देंगे
- केवल 256 रंगों के साथ चित्र के उपयोग की सीमा
एसवीजी का उपयोग कब किया जाना चाहिए
जैसा कि एसवीजी छवियों को छवि गुणवत्ता खोए बिना ज़ूम किया जा सकता है, उनका उपयोग वेब पर ग्राफिक्स, लोगो, आइकन और अन्य चित्रण के लिए किया जा सकता है। इसके अलावा इन छवियों का उपयोग मोबाइल उपकरणों के लिए किया जा सकता है क्योंकि वे स्मार्टफोन जैसे उच्च पिक्सेल घनत्व वाले डिस्प्ले के साथ बहुत अच्छे लगते हैं।
<एच3>4. स्मार्टफोन डिस्प्ले के लिए कई आकार निर्यात करेंस्मार्टफोन के लोकप्रिय होने के साथ, उपयोगकर्ता अपने मोबाइल उपकरणों पर सब कुछ एक्सेस करना चाहते हैं। लेकिन चूंकि इन उपकरणों में पीसी और वेब के लिए मानक 72 पीपीआई के विपरीत 200 से अधिक पीपीआई का प्रदर्शन होता है।
छवियों को समर्थन देने के लिए दोनों प्रकार के PPI Adobe Illustrator और Photoshop का उपयोग किया जा सकता है। यह 2X और 3X स्केल वाली छवियों को निर्यात करने में मदद करेगा। इसका मतलब है कि 200% और 300% के साथ मूल चित्र बनाए जाएंगे। साथ ही, उच्च रिज़ॉल्यूशन वाली छवियों को निर्यात किया जा सकता है।
5. छोटे चित्र आकार को 115% तक बढ़ाएं
यदि छोटे आकार की रेखापुंज छवियों का उपयोग किया जाता है, तो उन्हें पिक्सेलेशन को कम करने के लिए 115% तक अपसाइज़ करने की आवश्यकता होती है ताकि Adobe Photoshop का उपयोग किया जा सके।
ऊपर बताए गए टिप्स का उपयोग करके हम शार्प और फोकस्ड इमेज प्राप्त कर सकते हैं। चूंकि ये अनुकूलित छवियां उपयोगकर्ताओं का ध्यान खींचने और उन्हें लंबे समय तक वेब पेज पर रखने में मदद करती हैं। वे न केवल वेब पेज को सुंदर बनाएंगे बल्कि पेज लोड समय को कम करने में भी मदद करेंगे।
इमेज ऑप्टिमाइजेशन न केवल वेब के लिए मददगार है बल्कि इमेज को स्टोर करने और उन्हें आकर्षक दिखाने में भी मददगार है। एक भारी छवि बहुत अधिक बैंडविड्थ का उपयोग करती है जो उपयोगकर्ता द्वारा पसंद नहीं की जाती है इसलिए छवियों को अनुकूलित करने की आवश्यकता होती है।