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

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

इस लेख में मैं आपको वेब पर उपयोग के लिए छवियों को अनुकूलित करने और विशेष रूप से वर्डप्रेस वेबसाइटों पर अनुकूलित करने के कई तरीके दिखाऊंगा।

सही फ़ाइल प्रारूप चुनें

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

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

सही आकार और संकल्प का प्रयोग करें

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

अपलोड करने से पहले अपनी छवियों को संपीड़ित करें

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

ऑनलाइन संपीड़न उपकरण भी मौजूद हैं, जैसे कि Picresize, Kraken.io और TinyPNG, जहां आप अपनी उच्च रिज़ॉल्यूशन छवियां अपलोड कर सकते हैं, उन्हें अनुकूलित कर सकते हैं और वेब पर उपयोग के लिए संपीड़ित प्रारूप डाउनलोड कर सकते हैं।

अपलोड करने के बाद छवियों को संपीड़ित करें

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

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

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

अपनी छवियों को ठीक से टैग करें

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

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

धीरे लोड हो रहा है

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

एक सामग्री डिलीवरी नेटवर्क का प्रयोग करें

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

मैक्ससीडीएन एक उच्च श्रेणी निर्धारण सीडीएन है जिसे आप आजमा सकते हैं, और क्लाउडफ्लारे, सीडीएननेट और अन्य जैसे अन्य भी हैं।

जमीनी स्तर

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