छवि का काम देखकर फॉर्मेट चुनें
एक्सटेंशन से शुरू न करें; एसेट से शुरू करें। एक फ़ोटोग्राफ़ सतत‑टोन वाली सामग्री होती है, इसलिए प्रदर्शित आकार पर कुछ लॉस स्वीकार्य हो सकता है। स्क्रीनशॉट, चार्ट, लोगो या लाइन ड्रॉइंग में तेज किनारे और टेक्स्ट होते हैं, जहाँ आर्टिफैक्ट्स स्पष्ट दिखते हैं। इन्हें लॉसलेस आउटपुट से संरक्षित करें या सावधानीपूर्वक अनुमोदन के बाद ही लॉसी विकल्प अपनाएँ। जब उपलब्ध हो तो वेक्टर लोगो या आरेख के लिए SVG का उपयोग करें।
फिर क्षमताओं की पहचान करें। alpha का मतलब प्रति‑पिक्सेल पारदर्शिता है। animation फ्रेम्स का अनुक्रम है। आवश्यक ब्राउज़र कवरेज, प्रकाशन मात्रा, और बिल्ड समय ऐसे डिलीवरी सीमाएँ हैं जो आकार में छोटे फॉर्मैट को प्राथमिकता देने से रोक सकती हैं।
पहले लॉसी AVIF और WebP का परीक्षण करें। जब व्यापक संगत ओपैक फॉलबैक चाहिए हो तो JPEG उपलब्ध रखें।
लॉसलेस स्रोत रखें। चुनने से पहले वास्तविक प्रदर्शन स्केल पर PNG की तुलना लॉसलेस WebP या AVIF से करें।
AVIF, WebP, या PNG का उपयोग करें; JPEG न चुनें क्योंकि इसमें alpha चैनल नहीं होता।
प्रत्येक फ़ॉर्मेट का क्या योगदान है — समझें
AVIF में AV1‑कोडेड इमेजेज़ को HEIF‑आधारित कंटेनर में संग्रहीत किया जाता है। इसकी विनिर्देशिका स्थिर चित्र, इमेज‑सीक्वेंस और alpha इमेज आइटम शामिल करती है। यह लॉसी और लॉसलेस एन्कोडिंग, पारदर्शिता, और एनीमेशन का समर्थन करता है। बचत निश्चित नहीं होती: स्रोत सामग्री, एन्कोडर, स्पीड, लक्षित गुणवत्ता और मेटाडेटा परिणाम बदल देते हैं।
WebP लॉसी और लॉसलेस मोड, पारदर्शिता और एनीमेशन का समर्थन करता है। JPEG एक लॉसी स्टिल‑इमेज फॉर्मेट है जिसका व्यापक ऐतिहासिक समर्थन है; यह ओपैक‑फोटो फॉलबैक के रूप में उपयोगी है। PNG लॉसलेस और alpha के साथ आता है, इसलिए सटीक ग्राफ़िक्स के लिए यह एक ठोस फॉलबैक है, हालाँकि फोटोग्राफिक PNG अक्सर कुशल नहीं होते। सामान्य PNG स्थिर होते हैं; मोशन चाहिए तो अलग एनीमेशन फॉर्मेट का परीक्षण करें।
जहाँ छोटा ट्रांसफ़र‑साइज़ एन्कोडिंग और फॉलबैक के काम को उचित ठहरा सके, उच्च‑मूल्य रास्टर इमेजेस के लिए सबसे उपयुक्त।
पारदर्शिता और एनीमेटेड अनुक्रमों सहित समकालीन सामान्य‑उद्देश्य रास्टर विकल्प के रूप में उपयोगी।
ओपैक फोटोग्राफिक फॉलबैक के लिए प्रयोग करें; पारदर्शी लोगो या कटआउट के लिए नहीं।
लॉसलेस, पारदर्शी रास्टर फॉलबैक और उन एसेट्स के लिए उपयोग करें जहाँ पिक्सेल सटीकता (pixel fidelity) न्यूनतम बाइट्स से अधिक महत्वपूर्ण है।
एक ही फॉर्मेट पर दांव लगाने के बजाय फॉलबैक पाथ बनाएं
picture एलिमेंट (picture element) ब्राउज़र को विकल्पों का मूल्यांकन करने देता है। AVIF को पहले रखें, फिर WebP, और फिर JPEG या PNG में img फॉलबैक, सही MIME टाइप के साथ। ब्राउज़र असमर्थ स्रोत को स्किप कर देता है और जब कोई स्रोत उपयोग योग्य नहीं होता तो फॉलबैक इस्तेमाल करता है। जब तक आप जानबूझकर क्रॉप नहीं बदलते, तब तक वही अर्थपूर्ण वैकल्पिक पाठ (alternative text / alt text) रखें।
फॉर्मेट फॉलबैक रिस्पॉन्सिव साइजिंग (responsive sizing) की जगह नहीं लेता। स्लॉट बदलने पर चौड़ाई‑आधारित उम्मीदवार और एक सही sizes मान दें। ब्राउज़र को जगह आरक्षित करने के लिए width और height शामिल करें। एक छोटे फॉर्मेट की फाइल यदि बड़े पिक्सेल आयाम पर उपयोग की जाए तो तब भी बाइट्स बर्बाद होते हैं।
पहले AVIF, दूसरे WebP, फिर ओपैक फ़ोटो के लिए JPEG या जब फॉलबैक को पारदर्शिता या लॉसलेस किनारे चाहिए तो PNG।
यदि सर्वर अनुरोध क्षमताओं के आधार पर फॉर्मैट चुनता है न कि picture मार्कअप से, तो कैश वैरिएशन (cache variation) सही तरह से कॉन्फ़िगर करें और परीक्षण करें कि प्रत्येक क्लाइंट को डिकोडेबल प्रतिनिधित्व मिलता है।
एक क्लाइंट का उपयोग करें जिसमें पसंदीदा डिकोडर न हो या स्टेजिंग में जानबूझकर कोई स्रोत अक्षम करें; पुष्टि करें कि इमेज, डायमेंशन्स और वैकल्पिक पाठ सही रहते हैं।
एन्कोडिंग समय का बजट रखें और दृश्य गुणवत्ता की रक्षा करें
आधुनिक कंप्रेशन एन्कोडिंग में अधिक काम डालता है। AVIF के रेफरेंस एन्कोडर में 0 (सबसे धीमा) से 10 (सबसे तेज़) तक की स्पीड रेंज होती है; WebP भी एन्कोडर कार्य को समय, आउटपुट साइज और गुणवत्ता के बीच ट्रेड‑ऑफ करता है। बैच री‑एन्कोड या ऑन‑डिमांड ट्रांसफॉर्मेशन को एक ऑपरेशनल निर्णय के रूप में मानें, किसी मुफ्त सेटिंग बदलाव के रूप में नहीं।
एसेट क्लास के हिसाब से पुनरावृत्त नीति निर्धारित करें और सामान्य प्रदर्शन आकारों पर मूल फ़ाइलों की समीक्षा करें। चेहरों, ग्रेडियेंट्स, टेक्स्ट, किनारों और पारदर्शी सीमाओं का निरीक्षण करें। मास्टर रखें और एन्कोडर संस्करण तथा सेटिंग्स रिकॉर्ड करें ताकि कोई दोष दोहराया जा सके और वापस रोल‑बैक किया जा सके।
तेज़ एन्कोडिंग बिल्ड दबाव घटा सकती है लेकिन फाइल बड़ी या कम दक्ष संपीड़न दे सकती है; अपने स्रोत सेट पर बेंचमार्क करें।
कोई एक स्कोर या प्रीसेट विज़ुअल समीक्षा की जगह नहीं ले सकता—उन इमेज क्षेत्रों का दृश्य परीक्षण आवश्यक है जो विज़िटर्स के लिए मायने रखते हैं।
छवि‑फ़ॉर्मेट परिवर्तन को सक्रिय विश्वसनीयता अभ्यास बनाइए
For Status Is UP, इमेज ऑप्टिमाइज़ेशन वह सक्रिय अपटाइम कार्य है जब यह किसी रिलीज़ से किसी महत्वपूर्ण पेज के बिगड़ने को रोकता है। महत्वपूर्ण इमेज URL सूचीबद्ध करें, प्रतिनिधि कन्वर्शन स्टेज करें, और साइट‑वाइड माइग्रेशन से पहले content‑type, CDN व्यवहार और कैश इनवैलिडेशन की पुष्टि करें।
रिवर्सिबल बैच के रूप में डिप्लॉय करें। रिलीज़ कैंडिडेट पर रेंडरिंग और ट्रांसफर व्यवहार की तुलना करें, फिर नई पथ सिद्ध होने तक पुरानी प्रतिनिधित्व रखें। यदि कोई ट्रांसफॉर्मेशन या कैश नियम विफल होता है तो ज्ञात‑सही स्रोत पुनर्स्थापित करें। यह एक लचीला डिलीवरी रास्ता है, न कि AVIF या कई फॉर्मैट्स के लिए सार्वभौमिक आदेश।
लीड इमेज और पहले उपयोगी व्यू को प्रभावित करने वाली कंटेंट इमेज को प्राथमिकता दें, हर आर्काइव इमेज को एक साथ नहीं।
निश्चित‑निर्धारित एसेट नाम या वर्शन‑मैपिंग रखें ताकि पहले का JPEG, PNG, या WebP पथ तेज़ी से पुनर्स्थापित किया जा सके।