पहले इस्तेमाल सोचो, फिर फ़ॉर्मैट
माता-पिता को छुट्टियों की फ़ोटो भेज रहे हो जो पुराने टैबलेट पर मेल खोलते हैं? JPG ही रखो। सरकारी फ़ॉर्म, बैंक अपलोड और प्रिंट शॉप जो सिर्फ़ JPEG लेते हैं — वहाँ नया फ़ॉर्मैट आज़माना जोखिम है।
अपनी साइट, ब्लॉग या प्रोडक्ट कैटलॉग चला रहे हो जहाँ लोग नए ब्राउज़र इस्तेमाल करते हैं? WebP अक्सर फ़ाइल साइज़ साफ़-साफ़ घटाता है, दिखने में JPG के करीब रहता है, और JPEG के मुकाबले ट्रांसपेरेंसी भी रख सकता है।
हाई-ट्रैफ़िक पेज पर हर KB बचाना है और `<picture>` से कई सोर्स दे सकते हो? तब AVIF टेस्ट के लायक है — लेकिन जो डिवाइस AVIF नहीं खोलते, उनके लिए JPG या WebP बैकअप के बिना सिर्फ़ AVIF मत भेजो।
JPG: वो फ़ोटो फ़ॉर्मैट जो लगभग सब खोलते हैं
JPEG लॉसी कंप्रेशन है, खासकर फ़ोटो के लिए — पोर्ट्रेट, लैंडस्केप, इवेंट शॉट। फ़ोन, लैपटॉप, CMS और सोशल ऐप इसे बिना झंझट खोल लेते हैं।
ट्रांसपेरेंट बैकग्राउंड, फ्लैट-कलर लोगो, या UI स्क्रीनशॉट जहाँ टेक्स्ट साफ़ दिखना चाहिए — इनके लिए JPG कमज़ोर है। वहाँ PNG या WebP बेहतर।
हर बार «Save as JPG» करने से क्वालिटी थोड़ी और घटती है। साफ़ ओरिजिनल से एक बार एक्सपोर्ट करो; फ़ॉर्मैट के बीच बार-बार मत कूदो।
WebP: मॉडर्न वेब के लिए रोजमर्रा का विकल्प
फ़ोटो पर लगभग वही क्वालिटी रखते हुए WebP आमतौर पर JPG से छोटी फ़ाइल देता है — कभी-कभी काफ़ी अंतर से। अल्फा चैनल भी सपोर्ट करता है, जो JPEG में नहीं होता।
स्टैटिक होस्ट, CDN और ज़्यादातर साइट फ़्रेमवर्क WebP सर्व करना जानते हैं। ईमेल क्लाइंट अपवाद हैं: कई अभी भी अटैच इमेज को सादा JPEG ही दिखाते हैं, इसलिए न्यूज़लेटर की इनलाइन ग्राफ़िक्स अक्सर JPG ही रहती हैं।
PNG स्क्रीनशॉट बहुत भारी लगे तो WebP में बदलना आमतौर पर PNG दोबारा सेव करने से ज़्यादा सिकोड़ता है। इसलिए हमारा PNG कंप्रेस फ्लो डिफ़ॉल्ट WebP आउटपुट रखता है।
AVIF: और छोटी फ़ाइल, थोड़ा ज़्यादा सेटअप
व्यस्त फ़ोटो सीन पर AVIF अक्सर WebP से भी छोटा निकलता है — लेकिन एन्कोड धीमा हो सकता है, और पुराने डिवाइस या ऐप के अंदर WebView में कभी-कभी सपोर्ट नहीं मिलता।
प्रोडक्शन में आमतौर पर `<picture>` के अंदर पहले AVIF देते हैं, साथ में WebP या JPG फ़ॉलबैक — ब्राउज़र जो समझता है वही चुन लेता है।
अगर बिल्ड पहले से AVIF एन्कोड टाइम से जूझ रही है, या टीम ने अभी फ़ॉलबैक नहीं जोड़े, तो पहले WebP ठीक से लगाना अक्सर कम मेहनत में ज़्यादा फ़ायदा देता है।
चीट शीट — जल्दी याद रखने वाले नियम
जिन डिवाइस पर तुम्हारा कंट्रोल नहीं → JPG।
मॉडर्न साइट हीरो या लिस्टिंग इमेज, फ़ॉलबैक के साथ → WebP, या AVIF प्लस WebP/JPG बैकअप।
वेब पर ट्रांसपेरेंसी → WebP या PNG; पुराने सिस्टम पर अल्फा सुरक्षित चाहिए तो PNG।
ईमेल बॉडी के अंदर इमेज → ज़्यादातर मामलों में अभी भी JPG।
उलझन हो → WebP और JPG दोनों एक्सपोर्ट करो, इमेज कंप्रेस खोलो, और साइज़ के साथ आँख से क्वालिटी मिलाओ।
फ़ॉर्मैट आधी कहानी है — साइज़ और क्वालिटी भी मायने रखते हैं
4000 px चौड़ी फ़ोटो WebP में भी भारी रहेगी अगर कभी रीसाइज़ नहीं की। पहले डिस्प्ले चौड़ाई तक छोटा करो, फिर फ़ॉर्मैट चुनो।
फ़ॉर्मैट और डाइमेंशन ठीक लगने के बाद कंप्रेस से आखिरी कुछ प्रतिशत कट सकता है। लॉसी आउटपुट पर काम करते समय ओरिजिनल मास्टर रखो, ताकि बार-बार कंप्रेस न हो।
पब्लिश से पहले कंप्रेस करो
फ़ॉर्मैट तय हो जाए तो CDN पर भेजने या पब्लिश करने से पहले साइज़ और प्रीव्यू मिलाने के लिए [[image-compressor|इमेज कंप्रेस]] चलाओ।
इमेज कंप्रेस खोलें