Chrome で小さな JPEG が異なって見える理由
मूल शीर्षक: Why tiny JPEGs look different in Chrome
यह क्यों महत्वपूर्ण है
यह ऑप्टिमाइज़ेशन दिखाता है कि ब्राउज़र रेंडरिंग में JPEG डिकोडिंग कैसे performance और visual accuracy के बीच trade-off करती है।
Guillaume Técher के एक ब्लॉग पोस्ट के अनुसार, Chrome ब्राउज़र JPEG इमेज को छोटे आकार में रेंडर करते समय एक विशेष DCT-आधारित ऑप्टिमाइज़ेशन तकनीक का उपयोग करता है, जिसके कारण Firefox और Chrome में एक ही JPEG इमेज अलग दिखती है।
Guillaume Técher ने अपने ब्लॉग में बताया कि एक बार उन्होंने देखा कि एक ही लोगो Chrome और Firefox में अलग दिख रहा था — Chrome में वह थोड़ा मोटा नज़र आ रहा था। इमेज को 15px पर रेंडर किया जा रहा था।
जाँच करने पर पता चला कि यह कोई बग नहीं, बल्कि Chrome का एक चतुर JPEG डिकोडिंग ऑप्टिमाइज़ेशन है।
साधारण तरीके में किसी JPEG को छोटे साइज़ में दिखाने के लिए पहले उसे पूरी तरह मेमोरी में डीकम्प्रेस किया जाता है, फिर स्केल किया जाता है। उदाहरण के लिए, 2000×2000 JPEG को 20×20 पर दिखाने के लिए पूरी इमेज लगभग 12 MB मेमोरी लेती है, जबकि अंतिम परिणाम मात्र 1.2 KB होता है।
JPEG इमेज को 8×8 ब्लॉक में विभाजित करके DCT (Discrete Cosine Transform) के माध्यम से frequency domain में बदला जाता है। इन ब्लॉक्स में low-frequency (सपाट रंग) से लेकर high-frequency (checkerboard पैटर्न) तक की जानकारी coefficients के रूप में संग्रहित होती है।
जब इमेज को 1/8 स्केल पर रेंडर करना हो, तो प्रत्येक 8×8 ब्लॉक एक pixel बन जाता है। उस स्थिति में high-frequency जानकारी अधिकांशतः नष्ट हो जाती है। Chrome इसी सिद्धांत का उपयोग करते हुए पूरी इमेज डीकम्प्रेस करने की बजाय केवल low-frequency DCT coefficients का उपयोग करके इमेज रेंडर करता है, जिससे मेमोरी और प्रोसेसिंग की बचत होती है — लेकिन परिणाम थोड़ा भिन्न दिखता है।