Vehicle Imagery एक ऐसी image class है जो compression के लिए awkward है: curved paint पर photographic gradients, razor-sharp cut-out edges, और एक alpha channel जो car को custom background पर composited करने पर intact रहना चाहिए. General web-image advice mostly transfer होती है, लेकिन edge cases exactly वहीं हैं जहाँ car images live करती हैं. Here is the format decision, made properly once.
प्रैक्टिस में तीन फॉर्मेट
| PNG | WebP | AVIF | |
|---|---|---|---|
| पारदर्शिता | नुकसानरहित अल्फा | अल्फा, लॉसी या लॉसलेस | अल्फा समर्थन |
| फ़ाइल साइज़ (टाइपिकल कटआउट) | बहुत बड़ा | छोटा | सबसे छोटा |
| एज फिडेलिटी | पूर्ण | संतुलित गुणवत्ता में बहुत अच्छा | बहुत अच्छा, एन्कोड करने में धीमा |
| सहायता | सार्वभौमिक | प्रैक्टिस में सार्वभौमिक | आधुनिक ब्राउज़र |
| सबसे अच्छा | प्रिंट, कम्पोजिटिंग पाइपलाइन | वेब पर सब कुछ | बैंडविड्थ-आधारित, अगर सर्व किया जाए |
जहाँ हर एक जीतता है
PNG: आर्काइविंग और कॉम्पोजिटिंग फॉर्मेट
PNG अपनी बाइट्स को दो बार सही तरीके से कमाता है: जब छवि एक प्रिंट या डिजाइन पाइपलाइन में प्रवेश करती है जो इसे फिर से कम्प्रेस करेगी, और जब डाउनस्ट्रीम कॉम्पोजिटिंग एक गणितीय रूप से साफ अल्फा चैनल की आवश्यकता होती है। एक वेब पेज के लिए डिलीवरी फॉर्मेट के रूप में यह एक आदत है, नहीं एक निर्णय। यह अक्सर कोई दृश्य अंतर के बिना ट्रांसफर को पांच गुना कर देता है।
डिफ़ॉल्ट WebP
अल्फा चैनल के साथ मध्यम गुणवत्ता वाला WebP काम का घोड़ा है: पारदर्शी कटआउट्स PNG वजन का एक छोटा हिस्सा, सार्वभौमिक ब्राउज़र समर्थन, और प्रति अनुरोध गुणवत्ता नियंत्रण योग्य। एक लिस्टिंग ग्रिड या एक VDP गैलरी के लिए, एक स्पष्ट width के साथ format=webp ही पूरा नीति है।
AVIF: तेज़ पेंसिल, वही ड्राइंग
AVIF WebP के बराबर गुणवत्ता पर अधिक कंप्रेस करता है और इसका सपोर्ट स्टोरी अब अच्छा है। सच्चा सवाल मार्जिनल गेन है: उचित आकार के वाहन कटआउट्स पर PNG से WebP तक का कदम ड्रामैटिक है, WebP से AVIF तक का कदम एक ट्रिम है। एक पाइपलाइन बनाने से पहले /api/options पर जाकर वर्तमान में सर्व किए जाने वाले फॉर्मेट्स देखें।
फ़ॉर्मैट चॉइस से ज़्यादा भारी गलतियाँ
- छोटे स्लॉट में फुल-रिज़ॉल्यूशन छवियाँ सेवा करें। चौड़ाई पैरामीटर मौजूद हैं, उन्हें उपयोग करें
- एक पृष्ठ पर PNG ट्रांसपेरेंसी भेजें जो कार को किसी भी तरह से सफेद बैकग्राउंड पर रखता है
- अपने पाइपलाइन में एक पहले से लॉसी छवि को पुनः दबाना, कट एज पर आर्टिफैक्ट्स को स्टैक करना
- गुणवत्ता पैरामीटर को नज़रअंदाज़ करें: वाहन रेंडर कम्प्रेशन को अच्छी तरह से सहन करते हैं, और डिफ़ॉल्ट-गुणवत्ता-सबकुछ आसानी से बाइट्स को बचाता है
फॉर्मेट चॉइस एक मीटिंग की कीमत है। साइजिंग डिसिप्लिन एक मीटिंग की कीमत है, हर तिमाही, हमेशा के लिए।
एक काम किया गया उदाहरण।
48 वाहन कार्ड्स वाली एक लिस्टिंग्स ग्रिड लें। पूर्ण आकार के PNG के रूप में पेज कई मेगाबाइट्स की इमेजरी भेजता है, जिसे मोबाइल उपयोगकर्ता सेलुलर कनेक्शन पर पूरा लोड नहीं कर पाते। वही ग्रिड 600 पिक्सेल की चौड़ाई पर WebP में आमतौर पर प्रति इमेज दो ऑर्डर ऑफ मैग्निट्यूड छोटा होता है। डिजाइन में कोई बदलाव नहीं हुआ, और ग्रिड कनेक्शन पर जो अधिकांश खरीदार वास्तव में रखते हैं, वह अनुपयोगी से तुरंत हो गया।
फॉर्मेट चॉइस को srcset के साथ जोड़ें और ब्राउज़र शेष काम करता है: छोटे स्क्रीन छोटे वेरिएंट को खींचते हैं, रेटिना स्क्रीन शार्प एक को खींचते हैं, और कोई भी उन पिक्सेल्स को डाउनलोड नहीं करता जो वे देख नहीं सकते। चूंकि आयाम रिक्वेस्ट पैरामीटर हैं, तो पूरा रिस्पॉन्सिव सेटअप तीन URL हैं जो एक नंबर से अलग होते हैं।
ट्रांसपेरेंसी और शैडो वेरिएंट्स का उपयोग किसलिए है, और वे कैसे मिलते हैं, यह shadows, reflections and transparency पर कवर किया गया है; डिलीवरी पैरामीटर्स API documentation में रहते हैं।
