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