आपके स्क्रीनशॉट 2 MB के क्यों होते हैं, और उन्हें 60–90% कैसे छोटा करें
Dov Azencot
@DovAzencotएक बार मैंने एक ही डिज़ाइन-रिव्यू ईमेल थ्रेड के स्क्रीनशॉट गिने। ग्यारह, सब PNG, हर एक औसतन 2 MB से ज़रा कम। बीस-इक्कीस मेगाबाइट के ज़्यादातर सफ़ेद डैशबोर्ड, छह लोगों के बीच इधर-उधर उड़ते हुए, जिन सबके किसी दूसरे टैब में वही ऐप खुला हुआ था। किसी ने इस पर सोचा नहीं, क्योंकि यह "काम कर रहा था"। यही जाल है। स्क्रीनशॉट चुपचाप विशाल होते हैं, और वजह इसी बात में पकी हुई है कि आपका कंप्यूटर उन्हें कैसे लेता है।
एक स्क्रीनशॉट 2 MB की फ़ाइल क्यों होता है
जब आप स्क्रीनशॉट वाला शॉर्टकट दबाते हैं, तो आपका ऑपरेटिंग सिस्टम एक PNG सेव करता है। यह एक समझदार डिफ़ॉल्ट है — PNG लॉसलेस है, इसलिए कैप्चर पिक्सल-परफ़ेक्ट रहता है, और तीखे टेक्स्ट से भरे स्क्रीनशॉट के लिए यह सचमुच सही अंदाज़ा है। दिक़्क़त वह है जो PNG साइज़ के साथ करता है।
PNG हर पिक्सल को हूबहू रखता है। आधुनिक स्क्रीन घनी होती है — किसी Retina या 4K डिस्प्ले पर पूरी-विंडो का शॉट 2,000+ पिक्सल चौड़ा हो सकता है, और PNG उन लाखों पिक्सल में से हर एक को पूरी वफ़ादारी से दर्ज कर लेता है। उसे इससे कोई मतलब नहीं कि फ़्रेम का 60% हिस्सा एक ही तक़रीबन-सफ़ेद रंगत का है। यह कुछ भी नहीं फेंकता, क्योंकि चीज़ें फेंकना उसका काम है ही नहीं। तो लगभग ख़ाली किसी सेटिंग पेज का स्क्रीनशॉट — देखने में क़रीब-क़रीब कुछ भी नहीं — फिर भी 1.5 से 2.5 MB का वज़न रखता है, क्योंकि कैनवस विशाल है, चाहे कंटेंट बहुत कम हो।
दाँव: WebP में कन्वर्ट करें
WebP एक ऐसा काम कर सकता है जो PNG नहीं कर सकता — तीखे किनारे और ट्रांसपेरेंसी बनाए रखते हुए लॉसी तरीक़े से कंप्रेस करना। ख़ासकर स्क्रीनशॉट पर वह मेल क़रीब-क़रीब जादू जैसा है, क्योंकि स्क्रीनशॉट ज़्यादातर सपाट इलाक़े (कंप्रेस करने में सस्ते) और थोड़े-से टेक्स्ट (जिसे WebP तेज़ रखता है) से बना होता है। लॉसी पास अगोचर खरखराहट फेंक देता है; आपकी आँख कभी शिकायत दर्ज नहीं कराती।
मेरी अपनी डिस्क के स्क्रीनशॉट से असली आँकड़े:
| स्क्रीनशॉट | PNG के रूप में | WebP के रूप में |
|---|---|---|
| एक सेटिंग पेज, ज़्यादातर सफ़ेद | 1.6 MB | ~180 KB |
| एक पूरा एनालिटिक्स डैशबोर्ड | 2.4 MB | ~310 KB |
| एक डार्क-मोड कोड एडिटर | 1.9 MB | ~240 KB |
यह क़रीब 85–90% की कटौती है, और अगल-बगल रखकर भी मैं नहीं बता पाता कौन-सा कौन है। टेक्स्ट पिक्सल तक पढ़ने लायक बना रहता है। यह मेरे किए हुए सबसे ज़्यादा रिटर्न वाला कन्वर्ज़न है, ठीक इसलिए क्योंकि स्क्रीनशॉट शुरू से ही इतने बेहिसाब मोटे होते हैं — निचोड़ने के लिए बेइंतहा 'कुछ नहीं' भरा पड़ा होता है।
"क्या टेक्स्ट धुँधला नहीं हो जाएगा?"
यही डर है, और यह वाजिब है, क्योंकि आपने शायद फ़ज़ी हैलो वाले टेक्स्ट वाला कोई JPG स्क्रीनशॉट देखा होगा और मान लिया होगा कि सारे लॉसी फ़ॉर्मैट ऐसा ही करते हैं। WebP किनारों पर JPG से बेहतर है — मायने रखने भर बेहतर। समझदारी भरी क्वालिटी सेटिंग पर, WebP स्क्रीनशॉट का टेक्स्ट तीखा बना रहता है। मैंने अक्षरों के इर्द-गिर्द आर्टिफ़ैक्ट ढूँढने के लिए 400% तक ज़ूम किया है और सामान्य UI कैप्चर पर हाथ ख़ाली लौटा है।
ईमानदार अपवाद: अगर आप छोटी-सी फ़ाइल के पीछे भागते हुए क्वालिटी को ज़ोर से नीचे खींच दें, तो आख़िरकार आपको टेक्स्ट नरम होता दिखेगा। इसका इलाज है — वैसा मत कीजिए। एक बीच वाली क्वालिटी सेटिंग टेक्स्ट सही-सलामत रखते हुए ही आपको 60–90% की जीत दे देती है। उस रेंज तक धकेलने की कोई वजह ही नहीं जहाँ यह टूटता है।
जब छोटा करना काम नहीं आता
दो मामले जहाँ मैं PNG को छेड़ता नहीं।
अगर स्क्रीनशॉट किसी डिज़ाइन टूल में वापस जा रहा है ताकि उस पर निशान लगें, नोट लिखे जाएँ या कुछ जोड़ा जाए, तो मैं उसे लॉसलेस रखता हूँ। WebP का लॉसी पास एकतरफ़ा दरवाज़ा है, और जिस चीज़ को मैं अभी एडिट करके दोबारा एक्सपोर्ट करने वाला हूँ उसमें कंप्रेशन पकाना मैं नहीं चाहता। WebP शिप करें, PNG मास्टर संभालकर रखें — वही हमेशा वाला नियम।
और अगर स्क्रीनशॉट पहले ही छोटा है — कोई नन्हा कटा हुआ हिस्सा, एक अकेला बटन, कुछ जो पहले ही क़रीब 100 KB से कम है — तो कन्वर्ज़न सुई को बमुश्किल हिलाता है। 60–90% की जीत उन फ़ाइलों से आती है जो इसलिए विशाल हैं क्योंकि कैनवस विशाल है। एक छोटे क्रॉप ने वह समस्या पहले ही हल कर ली है। बेवजह एक क़दम मत जोड़िए।
मैं इसे असल में कैसे करता हूँ
मैं स्क्रीनशॉट को किसी ईमेल या डॉक के पास पहुँचने से पहले इसी साइट के PNG-से-WebP कन्वर्टर से गुज़ार देता हूँ। यह आपके ब्राउज़र में होता है, इसलिए कैप्चर — जो, सच कहें तो, अक्सर आपकी आधी स्क्रीन और बैकग्राउंड में जो भी था उसे दिखाता है — आपके डिवाइस से बाहर जाता ही नहीं। PNG अंदर छोड़ें, साइज़ वाले कॉलम को ढहते देखें, WebP डाउनलोड करें, और उसी को अटैच करें।
बड़ी बात टूल नहीं है, आदत है। एक बार "स्क्रीनशॉट, फिर छोटा करो" अपने-आप होने लगे, तो आप उन लोगों पर 2 MB की इमेज दागना बंद कर देते हैं जिनके पास पहले से ऐप खुला है, आपके ईमेल तेज़ी से जाते हैं, और थ्रेड दसियों मेगाबाइट में फूलना बंद कर देते हैं। वह ग्यारह-स्क्रीनशॉट वाला ईमेल बीस-इक्कीस के बजाय कुल क़रीब 2 MB का होता। वही तस्वीरें। वही सब कुछ। बस उस मरे हुए बोझ के बिना।
संबंधित लेख
PNG को WebP में क्यों बदलता हूँ (और वो एक मौका जब नहीं बदलता)
PNG में एडिट करना बढ़िया है, पर उसे वेब पर भेजना फ़िज़ूलख़र्ची है। WebP असल में कितना बचाता है, कहाँ कुछ नहीं बचाता, और वो एक नियम जो मैं कभी नहीं तोड़ता।
AVIF बनाम WebP — छोटी फ़ाइल हमेशा सही फ़ाइल नहीं होती
AVIF आमतौर पर साइज़ में WebP को हरा देता है, कभी-कभी 20% या उससे ज़्यादा से। वह अतिरिक्त कंप्रेशन एनकोड समय और किनारे के मामलों में क्या क़ीमत लेता है, और मैं कब आज भी WebP उठाता हूँ।
SVG से PNG — जब आपको सचमुच पिक्सल चाहिए (और जब नहीं चाहिए)
SVG हमेशा के लिए स्केल होती है और नन्ही बनी रहती है, इसलिए उसे रास्टराइज़ करना घाटे जैसा लगता है। कभी-कभी है भी। किसी वेक्टर से PNG पिक्सल आपको असल में कब चाहिए, और SVG को कब छोड़ देना बेहतर है।
सभी लेख