छवि अनुकूलन

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

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

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

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

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

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

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

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

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