वाहन छवियाँ एक असुविधाजनक छवि वर्ग हैं सिकुड़न के लिए: फोटोग्राफिक ग्रेडिएंट्स कर्व्ड पेंट पर, रेज़र-शार्प कट-आउट एजेस, और एक अल्फा चैनल जो हर जगह जीवित रहना चाहिए जहां कार को एक कस्टम बैकग्राउंड पर कॉम्पोजिट किया जाता है। सामान्य वेब-इमेज सलाह ज्यादातर ट्रांसफर होती है, लेकिन एज केसेज वही हैं जहां कार छवियाँ रहती हैं। यहाँ है फॉर्मेट निर्णय, जो सही ढंग से एक बार किया गया है।
प्रैक्टिस में तीन फॉर्मेट्स
| PNG | WebP | AVIF | |
|---|---|---|---|
| पारदर्शिता | नुकसानरहित अल्फा | अल्फा, लॉसी या लॉसलेस | अल्फा समर्थित |
| फाइल साइज़ (टाइपिकल कटआउट) | बहुत बड़ा | छोटा | सबसे छोटा |
| एज फ़िडेलिटी | पूर्ण रूप से | सामान्य गुणवत्ता पर बहुत अच्छा | बहुत अच्छा, एन्कोड करने में धीमा |
| सहायता | सार्वभौमिक | प्रैक्टिस में सार्वभौमिक | आधुनिक ब्राउज़र |
| सबसे अच्छा | प्रिंट, कंपोजिटिंग पाइपलाइन | वेब पर सब कुछ | बैंडविड्थ-क्रिटिकल, अगर सर्व किया जाता है |
जहाँ हर एक जीतता है
PNG: आर्काइव और कंपोजिटिंग फॉर्मेट
PNG अपने बाइट्स को दो बार सही तरह से कमाता है: जब छवि एक प्रिंट या डिजाइन पाइपलाइन में प्रवेश करती है जो इसे फिर से कम्प्रेस करेगी, और जब डाउनस्ट्रीम कंपोजिटिंग एक गणितीय रूप से साफ अल्फा चैनल की आवश्यकता होती है। एक वेब पेज के लिए डिलीवरी फॉर्मेट के रूप में यह एक आदत है, एक निर्णय नहीं। यह अक्सर कोई दृश्य अंतर के बिना ट्रांसफर का पांच गुना होता है
डिफ़ॉल्ट WebP
एक अल्फा चैनल के साथ WebP मध्यम गुणवत्ता पर काम का घोड़ा है: पारदर्शी कटआउट्स PNG वजन का एक छोटा हिस्सा, यूनिवर्सल ब्राउज़र सपोर्ट, और हर रिक्वेस्ट पर गुणवत्ता को नियंत्रित किया जा सकता है। एक लिस्टिंग ग्रिड या एक VDP गैलरी के लिए, format=webp एक स्पष्ट width के साथ ही पूरी नीति है।
AVIF: तेज़ पेंसिल, वही ड्राइंग
AVIF समान गुणवत्ता पर WebP से अधिक संपीड़ित होता है और इसका सपोर्ट स्टोरी अब अच्छा है। सच्चा सवाल है सीमांत लाभ: उचित आकार की वाहन कटआउट्स पर PNG से WebP तक का कदम ड्रामैटिक है, WebP से AVIF तक का कदम एक ट्रिम है। एक पाइपलाइन बनाने से पहले /api/options पर जाकर वर्तमान में सर्व की जाने वाली फॉर्मेट्स की जांच करें।
जिन गलतियों का फॉर्मैट चॉइस से ज़्यादा वज़न है।
- छोटे स्लॉट्स में फुल-रिज़ॉल्यूशन इमेजेस सर्व करें। वIDTH पैरामीटर्स मौजूद हैं, उन्हें उपयोग करें।
- एक पेज पर PNG ट्रांसपेरेंसी शिपिंग जो कार को किसी भी तरह से व्हाइट बैकग्राउंड पर रखता है
- अपने पाइपलाइन में एक पहले से लॉसी इमेज को पुनः संपीड़ित करना, कट एज पर आर्टिफैक्ट्स को स्टैक करना
- गुणवत्ता पैरामीटरों को नज़रअंदाज़ करें: वाहन रेंडर कम्प्रेशन को अच्छी तरह से सहन करते हैं, और डिफ़ॉल्ट-क्वालिटी-एवरीथिंग आसानी से बाइट्स छोड़ती है।
फॉर्मेट चयन एक मीटिंग का लायक है। साइजिंग डिसिप्लिन एक मीटिंग का लायक है, हर तिमाही, हमेशा के लिए।
एक वर्क्ड एक्साम्पल
48 वाहन कार्ड्स को रेंडर करने वाली एक लिस्टिंग ग्रिड लें। पूर्ण आकार के PNGs के रूप में पेज इमेजरी के टेंस मेगाबाइट्स शिप करता है, जो सेलुलर कनेक्शन पर मोबाइल यूज़र्स द्वारा पूरी तरह से लोड नहीं होता। उसी ग्रिड को 600 पिक्सेल की चौड़ाई में WebP में आम तौर पर प्रति इमेज दो ऑर्डर ऑफ मैग्निट्यूड छोटा होता है। डिजाइन में कोई बदलाव नहीं हुआ, और ग्रिड कनेक्शन पर जो अधिकांश शॉपर्स वास्तव में रखते हैं, वह अनुपयोगी से तुरंत हो गया।
फॉर्मेट चॉइस को srcset के साथ जोड़ें और ब्राउज़र शेष काम करता है: छोटे स्क्रीन छोटे वेरिएंट को खींचते हैं, रेटिना स्क्रीन शार्प एक को खींचते हैं, और कोई भी उन पिक्सेल्स को डाउनलोड नहीं करता जो वे देख नहीं सकते। क्योंकि आयाम अनुरोध पैरामीटर हैं, तो पूरा रिस्पॉन्सिव सेटअप तीन URL हैं जो एक नंबर से अलग होते हैं।
शैडो वेरिएंट्स और ट्रांसपेरेंसी का उपयोग और उनका संयोजन शैडो, रिफ्लेक्शन और ट्रांसपेरेंसी पर कवर किया गया है; डिलीवरी पैरामीटर API documentation में रहते हैं
