छवियों को अनुकूलित करने से वेबसाइट क्यों बेहतर होती है
चित्र अक्सर एक पृष्ठ द्वारा डाउनलोड किए गए डेटा का महत्वपूर्ण हिस्सा होते हैं। एक बड़ी फ़ाइल सामग्री के प्रदर्शित होने में देरी करती है, अधिक मोबाइल डेटा खपत करती है और विज़िटर के अनुभव को खराब कर सकती है। अनुकूलन तीन निर्णयों का संयोजन है: आयाम, फ़ॉर्मेट और संपीड़न स्तर।
सभी चित्रों के लिए कोई परफेक्ट सीमा नहीं है। एक थंबनेल की मात्रा स्क्रीन भरने वाली फ़ोटोग्राफ़ से बहुत कम होनी चाहिए। उद्देश्य वास्तविक स्थान के लिए पर्याप्त पिक्सेल और गुणवत्ता प्रदान करना है, बिना यह मजबूर किए कि ब्राउज़र उस जानकारी को डाउनलोड करे जिसका वह उपयोग नहीं करेगा।
अनुशंसित चरण-दर-चरण प्रवाह
- अधिकतम चौड़ाई पहचानें जिसमें छवि डिज़ाइन में दिखाई देगी।
- संपीड़ित करने से पहले फ्रेम को क्रॉप करें ताकि आप उन क्षेत्रों को न रखें जिन्हें हटा दिया जाएगा।
- सामग्री और पारदर्शिता की आवश्यकता के अनुसार फॉर्मेट चुनें।
- फ़ाइल को छवि कंप्रेसर और मध्यम-उच्च गुणवत्ता का परीक्षण करता है।
- वजन की तुलना करें और पाठ, किनारों, चेहरे और ग्रेडिएंट की जांच करें।
- परिणाम प्रकाशित करें और मोबाइल और डेस्कटॉप पर पृष्ठ जांचें।
आयाम: आवश्यक से अधिक पिक्सल अपलोड करने से बचें
अगर कोई कार्ड 600 पिक्सेल चौड़ा चित्र दिखाता है, तो 5000 पिक्सेल का फोटो लोड करना आम तौर पर व्यर्थ होता है। ब्राउज़र इसे दृश्य रूप से छोटा कर देगा, लेकिन पहले उसे पूरी फ़ाइल डाउनलोड करनी पड़ेगी। डिजाइन द्वारा आवश्यक अधिकतम आकार के करीब एक संस्करण तैयार करें।
उच्च घनत्व वाली स्क्रीन के लिए लगभग दो गुना बड़ा संस्करण प्रदान करना उपयोगी हो सकता है, लेकिन आदर्श यह है कि साइट उत्तरदायी (रेस्पॉन्सिव) छवियों का उपयोग करे। SRCSET y आकारइस प्रकार प्रत्येक डिवाइस एक उपयुक्त संस्करण डाउनलोड करता है बजाय उसी विशाल फ़ाइल के।
कौन सा प्रारूप चुनना है
- JPG: पारदर्शिता के बिना फ़ोटोग्राफ़ के लिए अच्छी संगतता और तार्किक आकार।
- WebP: फोटो और वेब ग्राफ़िक्स के लिए उपयोगी; यह पारदर्शिता बनाए रख सकता है और कॉम्पैक्ट फ़ाइलें प्रदान कर सकता है।
- PNG: पारदर्शिता, स्पष्ट टेक्स्ट के साथ कैप्चर और सरल ग्राफ़िक्स के लिए उपयुक्त; फ़ोटो में भारी हो सकता है।
- एसवीजी: लोगो और वेक्टर आइकन के लिए आदर्श जब फ़ाइल सुरक्षित होती है और डिज़ाइन को वेक्टर के रूप में बनाया गया था।
फ़ॉर्मेट बदलने से फ़ाइल का आकार छोटा होने की गारंटी नहीं होती। हमेशा परिणाम की तुलना करें और जब मौलिक फ़ॉर्मेट सबसे प्रभावी विकल्प हो, उसे बनाए रखें। परामर्श करें। JPG, PNG, और WebP के बीच तुलना यदि आप नहीं जानते कि किसे चुनना है।
संपीड़न गुणवत्ता कैसे चुनें
एक सेटिंग से शुरुआत करें जो दिखावट को प्राथमिकता दे और धीरे-धीरे कम करें। फ़ोटो इंटरफेस कैप्चर, चित्र और छोटे टेक्स्ट की तुलना में संपीड़न को बेहतर सहन करते हैं। यदि हेलो, ब्लॉक या धुंधली किनारियाँ दिखाई दें तो गुणवत्ता बढ़ाएँ या कोई अन्य फॉर्मेट आज़माएँ।
फ़ाइल का मूल्यांकन पेज के भीतर करें, केवल ज़ूम किए हुए दृश्य में नहीं। 300% पर दिखाई देने वाले छोटे अंतर को सामान्य आकार में महसूस नहीं किया जा सकता; वहीं, एक कार्ड में असमर्थनीय अक्षर वास्तविक समस्या है।
संपीड़न एक अच्छे कार्यान्वयन का विकल्प नहीं है
फ़ाइल को अनुकूलित करने के अलावा, विशेषताओं के साथ जगह सुरक्षित करें चौड़ाई y ऊंचाई . उन छवियों पर आलसी लोडिंग का उपयोग करें जो पहले दृश्यमान ब्लॉक के बाहर हैं, लेकिन यदि पृष्ठ को समझना आवश्यक है तो मुख्य छवि में देरी न करें।
उन फ़ाइलों के लिए जिनके नाम में संस्करण शामिल है, लंबी कैशिंग निर्धारित करना और CSS के माध्यम से एक ही इमेज को कई रिज़ॉल्यूशन में लोड करने से बचना उपयोगी होता है। ये निर्णय साइट में बदलाव की मांग करते हैं, लेकिन कम्प्रेशन के दौरान प्राप्त बचत को पूरा करते हैं।
साधारण त्रुटियां
आकार पर निर्णय लेने से पहले संपीड़ित करें
बाद में आकार बदलना फ़ाइल को दो बार प्रोसेस करने के लिए मजबूर करता है और ह्रास जोड़ सकता है। पहले फ्रेम और आयाम तय करें; अंत में संकुचित करें।
स्क्रीनशॉट को कम गुणवत्ता के साथ JPG में बदलें
पतले अक्षर और लाइनों से दाग हो सकते हैं। उच्च गुणवत्ता के साथ PNG या WebP का प्रयास करें और वजन की तुलना करें।
शीर्षक के रूप में एक छोटी छवि का उपयोग करें
इसे बड़ा करने से विवरण वापस नहीं आता। पर्याप्त रूप से बड़े स्रोत से शुरू करें और उस संस्करण से छोटे वेरिएंट बनाएं।
अक्सर पूछे जाने वाले प्रश्न
वेब छवि का वजन कितना होना चाहिए?
यह इसके आकार, महत्व और जटिलता पर निर्भर करता है। एक मानदंड के रूप में सबसे कम वजन का उपयोग करें जो एक सार्वभौमिक आकृति का पीछा करने के बजाय अपने अंतिम आकार में स्वीकार्य गुणवत्ता बनाए रखता है।
क्या मुझे सभी चित्रों को WebP में बदलना चाहिए?
यह आवश्यक नहीं है। WebP उपयोगी है, लेकिन एक साधारण PNG या पहले से अनुकूलित फ़ाइल में सुधार नहीं हो सकता। एक नमूना परिवर्तित करें, मापें और मूल फ़ाइलें रखें।
क्या छवियों को संपीड़ित करने से केवल रैंकिंग में सुधार होता है?
अनुभव और प्रदर्शन में मदद करता है, लेकिन पोजिशनिंग भी उपयोगी सामग्री, क्रॉलिंग, लिंक, खोज इरादे और कई अन्य संकेतों पर निर्भर करती है। संपीड़न एक अच्छी तरह से तैयार की गई वेबसाइट का हिस्सा है।
एक हल्की छवि तैयार करें
गुणवत्ता समायोजित करें या लक्ष्य आकार निर्धारित करें, परिणाम की तुलना करें और वह संस्करण डाउनलोड करें जो आपके पृष्ठ के लिए सबसे उपयुक्त हो।
वेब के लिए छवि को संपीड़ित करें