छवियां एक सभ्य वेबसाइट के सबसे महत्वपूर्ण तत्वों में से एक हैं। वे विज़िटर्स का ध्यान आकर्षित करती हैं, आपकी सामग्री को अधिक शेयर करने योग्य बनाती हैं और आपके उपयोगकर्ताओं को कार्रवाई करने के लिए मजबूर करती हैं (जैसे आपके उत्पाद खरीदना)।
हालांकि, उच्च रिज़ॉल्यूशन वाली छवियों को जोड़ना, या बड़ी फ़ाइल आकार वाली छवियां, आपकी वेबसाइट को धीमा कर सकती हैं और अंतिम उपयोगकर्ता के लिए खराब उपयोगकर्ता अनुभव प्रदान कर सकती हैं। वहां मौजूद ढेर सारे टूल्स के साथ खराब उपयोगकर्ता अनुभव देने का वास्तव में कोई बहाना नहीं है जो आपकी छवियों को गुणवत्ता में ध्यान देने योग्य हानि के बिना संपीड़ित करने में आपकी मदद कर सकते हैं और यहां तक कि आपके लिए प्रक्रिया को स्वचालित भी कर सकते हैं।
इस लेख में मैं आपको वेब पर उपयोग के लिए और विशेष रूप से वर्डप्रेस वेबसाइटों पर छवियों को ऑप्टिमाइज़ करने के कई तरीके दिखाऊंगा।
सही फ़ाइल प्रारूप चुनें
JPEG और PNG वेब पर दो सबसे लोकप्रिय छवि फ़ाइल प्रारूप हैं। JPEG एक संपीड़ित प्रारूप है जो आमतौर पर कई रंगों वाली तस्वीरों के लिए उपयोग किया जाता है, जबकि PNG टेक्स्ट, चित्र, लोगो, स्क्रीनशॉट और पारदर्शी छवियों वाली तस्वीरों के लिए बहुत बेहतर हैं। एक अन्य सामान्य प्रारूप GIF है जो कुछ रंगों वाली छवियों या बड़े क्षेत्रों वाली छवियों के लिए सबसे उपयुक्त है जो एक ही रंग के हैं। GIF आज वेब पर ज्यादातर एनिमेटेड छवियों के लिए उपयोग किया जाता है।
अधिकांश छवि संपादन सॉफ़्टवेयर आपको अपनी फ़ाइल को कई अलग-अलग प्रारूपों में सहेजने की अनुमति देता है। सही प्रारूप चुनने से यह सुनिश्चित होगा कि आपको सबसे तेज छवि मिले जो आपकी वेबसाइट पर उपयोगकर्ता अनुभव को बढ़ाना चाहिए।
सही आकार और रिज़ॉल्यूशन का उपयोग करें
अपनी साइट पर छवियां जोड़ते समय आपको सावधान रहने की आवश्यकता है। अपनी छवियों को उसी चौड़ाई और ऊंचाई पर सहेजना सर्वोत्तम अभ्यास माना जाता है जिस पर यह वेबसाइट पर दिखाई देगी और यथासंभव सबसे छोटे फ़ाइल आकार पर बिना गुणवत्ता खोए।
अपलोड करने से पहले छवियों को संपीड़ित करें
बहुत सारे टूल्स हैं जो आपकी छवियों को आपके सर्वर पर अपलोड करने से पहले संपीड़ित करने में आपकी मदद करेंगे। फोटोशॉप में उदाहरण के लिए एक आसान "सेव फॉर वेब एंड डिवाइसेज" सुविधा है जो आपको प्रारूप और गुणवत्ता सेटिंग्स चुनने की अनुमति देगी। जब आप एक विशेष सेटिंग लागू करते हैं तो आप अपनी छवि के लिए फ़ाइल आकार भी देखेंगे। GIMP जैसे अन्य छवि हेरफेर टूल्स समान विकल्प प्रदान करते हैं।
ऑनलाइन संपीड़न टूल भी मौजूद हैं, जैसे Picresize, Kraken.io और TinyPNG, जहां आप अपनी उच्च रिज़ॉल्यूशन छवियों को अपलोड कर सकते हैं, उन्हें ऑप्टिमाइज़ कर सकते हैं और वेब पर उपयोग के लिए संपीड़ित प्रारूप डाउनलोड कर सकते हैं।
अपलोड करने के बाद छवियों को संपीड़ित करें
इस उद्देश्य के लिए कई प्लगइन्स मौजूद हैं, और अधिक लोकप्रिय में से एक WP Smush है जो समर्पित सर्वरों का उपयोग करके JPEG, PNG या GIF प्रारूपों को व्यक्तिगत रूप से या बल्क में ऑप्टिमाइज़ करने में मदद करता है। यह केवल फ़ाइलों से मेटाडेटा और अप्रयुक्त रंगों को हटाकर फ़ाइल आकार को कम करता है। मुफ्त संस्करण के साथ आप 1MB और नीचे की छवियों तक सीमित हैं, लेकिन आप प्रो संस्करण में अपग्रेड करके इस सीमा को हटा सकते हैं जो 5MB तक की अनुमति देता है।
समान कार्यों वाला एक और बढ़िया प्लगइन EWWW इमेज ऑप्टिमाइज़र है जो आपकी छवियों को उस प्रारूप में बदलने में मदद कर सकता है जो सबसे कम संभव फ़ाइल आकार उत्पन्न करता है।
वर्डप्रेस रिपॉजिटरी पर अन्य भी उपलब्ध हैं, इसलिए बेझिझक एक्सप्लोर करें। ये दो हैं जिनका मैंने पहले उपयोग किया है, और वे दोनों ठीक काम करते हैं, इसलिए वे आपके लिए भी काफी अच्छे होने चाहिए।
अपनी छवियों को ठीक से टैग करें
अपनी छवियों का आकार बदलने के अलावा, अपनी वेबसाइट पर अच्छा अनुभव प्रदान करने का एक शानदार तरीका है अपनी छवियों को ठीक से टैग करना। इसका मतलब हमेशा "alt" विशेषता का उपयोग करना है ताकि यदि आपकी छवि लोड नहीं हो सकी या स्क्रीन रीडर्स के लिए तो आपके विज़िटर्स को छवि का टेक्स्ट-आधारित विवरण मिले। यह खोज इंजन को आपकी वेबसाइट पर छवियों को बेहतर ढंग से इंडेक्स करने में भी मदद करता है और आपको खोज ट्रैफ़िक की एक महत्वपूर्ण राशि प्राप्त करा सकता है।
जहां आवश्यक हो कैप्शन जोड़ना आपकी वेबसाइट विज़िटर्स को छवि को बेहतर ढंग से समझने में मदद करने का एक और शानदार तरीका है। उचित वर्णनात्मक टाइटल टैग और छवि फ़ाइल नाम सेट करना उसी तरह मदद करता है। इसलिए अपनी छवियों को "FXSCSUYE.jpg" के रूप में सहेजने के बजाय, अपने विषय और वेबसाइट के लिए प्रासंगिक कीवर्ड के साथ एक वर्णनात्मक शीर्षक और नाम का उपयोग करें। यह SEO दृष्टिकोण से भी अच्छा है।
लेज़ी-लोडिंग
लेज़ी लोडिंग एक तकनीक है जिसका उपयोग कई वेबसाइट्स द्वारा बैंडविड्थ बचाने के लिए किया जाता है, केवल छवियों को लोड करके जब उपयोगकर्ता छवि के व्यू-फ्रेम पर स्क्रॉल करता है। पहले कुछ छवियां तुरंत लोड होंगी, लेकिन अन्य तब तक इंतजार करेंगे जब तक उपयोगकर्ता छवि के आसपास के क्षेत्र में नहीं आ जाता। इस सुविधा को अपनी वेबसाइट पर जोड़ने से आपके और आपके उपयोगकर्ता के लिए बैंडविड्थ बचेगी और आपके वेबपेज की गति में सुधार होगा। BJ Lazy Load आपकी वर्डप्रेस वेबसाइट पर लेज़ी लोडिंग जोड़ने के लिए एक बढ़िया प्लगइन है।
कंटेंट डिलीवरी नेटवर्क का उपयोग करें
कंटेंट डिलीवरी नेटवर्क (CDN) का उपयोग करने से आपके सर्वर पर लोड काफी कम हो जाएगा और आपकी वेबसाइट के प्रदर्शन में वृद्धि होगी। एक CDN बस उस सर्वर से संसाधनों की सेवा करेगा जो उस उपयोगकर्ता के स्थान के निकटतम है जो इसका अनुरोध करता है। उदाहरण के लिए, यदि बीजिंग से एक विज़िटर एक छवि का अनुरोध करता है, और आप जिस CDN का उपयोग कर रहे हैं उसका सियोल और सिडनी में एक सर्वर है, तो छवि को सियोल में सर्वर से परोसा जाएगा।
MaxCDN एक अत्यधिक रेटेड CDN है जिसे आप आज़मा सकते हैं, और अन्य जैसे CloudFlare, CDN.net और अधिक हैं।
निष्कर्ष
वेब पर उपयोग के लिए छवियों को ऑप्टिमाइज़ करना आपकी वेबसाइट के पेज लोड समय और समग्र उपयोगकर्ता अनुभव को बेहतर बनाने के सबसे बड़े तरीकों में से एक है। यदि आपके पास कोई अन्य ऑप्टिमाइज़ेशन तकनीक है जिसे आप साझा करना चाहते हैं, तो कृपया नीचे टिप्पणियों में करें।
