صور المركبات هي فئة غير مريحة من الصور للضغط: تدرجات تصويرية عبر طلاء منحني، حواف مقطعة حادة، وقناة ألفا يجب أن تبقى سليمة حيثما يتم تركيب السيارة على خلفية مخصصة. معظم نصائح الصور على الويب تنطبق، ولكن الحالات الاستثنائية هي بالضبط حيث توجد صور المركبات. هذا هو قرار التنسيق، الذي يتم اتخاذه بشكل صحيح مرة واحدة.
الثلاثة تنسيقات في الممارسة.
| PNG | WebP | AVIF | |
|---|---|---|---|
| شفافية | شفافية خالية من الخسائر | ألفا، خسارة أو بدون خسارة | الدعم ألفا متاح |
| حجم الملف (قطع النموذجي) | أكبر بكثير | صغير | أصغر |
| دقة الحافة | كاملاً | جيد جدًا في جودة معقولة | جيد جدًا، ولكن بطيء في الترميز |
| الدعم | عمومي | عمومي في الممارسة | المتصفحات الحديثة |
| أفضل لـ | خطوط أنابيب الطباعة، التركيب | كل شيء على الويب | حاسم للطاقم، إذا تم تقديمه |
أين يفوز كل واحد
PNG: تنسيق الأرشفة والتركيب
PNG يكسب بايتاته بالضبط مرتين: عندما تدخل الصورة خط أنابوب الطباعة أو التصميم الذي سيضغطها مرة أخرى، وعندما يتطلب التركيب اللاحق قناة ألفا رياضية نظيفة. كتنسيق توصيل للصفحات الويب، فهو عادة وليس قرارًا. غالبًا ما يكون خمسة أضعاف حجم النقل دون فرق مرئي.
WebP: الافتراضي
WebP مع قناة ألفا بجودة معقولة هو المحرك الرئيسي: قطع شفافة بنسبة جزء من وزن PNG، ودعم متصفح عالمي، وجودة قابلة للتحكم لكل طلب. بالنسبة لشبكة قوائم أو معرض VDP، format=webp مع عرض محدد width هو السياسة الكاملة.
AVIF: قلم أكثر حدة، نفس الرسم
AVIF يضغط أكثر من WebP بنفس الجودة، وقصته دعم جيدة الآن. السؤال الصريح هو المكسب الهامشي: على قطع السيارات المحجوبة بشكل صحيح، الخطوة من PNG إلى WebP دراماتيكي، والخطوة من WebP إلى AVIF هي تعديل. تحقق من /api/options للحصول على التنسيقات التي يتم تقديمها حاليًا قبل بناء خط أنابيب حول واحد.
الأخطاء التي تتجاوز اختيار التنسيق
- تقديم صور ذات دقة كاملة في فتحات صغيرة. توجد معلمات العرض، استخدمها
- إرسال شفافية PNG إلى صفحة تضع السيارة على خلفية بيضاء على أي حال
- إعادة ضغط صورة مضغوطة بالفعل في خط أنابوبك الخاص، وتراكم العيوب على الحواف المقطعة
- تجاهل معلمات الجودة: تتحمل صور المركبات ضغطًا جيدًا، وترك كل شيء بجودة افتراضية يترك بايتات سهلة على الطاولة.
اختيار التنسيق يستحق اجتماعًا. الانضباط في الحجم يستحق اجتماعًا كل ربع سنة، إلى الأبد.
مثال عملي
خذ شبكة قوائم تعرض 48 بطاقة سيارة. كصور PNG بحجم كامل، يتم إرسال الصفحة عشرات الميجابايت من الصور، والتي لا يكمل المستخدمون المحمولون على اتصالات الخلوية تحميلها. نفس الشبكة بعرض 600 بكسل في WebP عادةً ما تكون أصغر بكثير لكل صورة. لم يتغير أي شيء في التصميم، وأصبحت الشبكة من غير قابلة للاستخدام إلى فورية على الاتصال الذي يستخدمه معظم المشترين فعليًا.
قم بتزويج اختيار التنسيق مع srcset ويقوم المتصفح بالباقي من العمل: الشاشات الصغيرة تستخرج النسخة الصغيرة، الشاشات عالية الدقة تستخرج النسخة الحادة، ولا يقوم أحد بتنزيل بكسلات لا يمكن رؤيتها. نظرًا لأن الأبعاد هي معلمات الطلب، فإن الإعداد الاستجابة بالكامل هو ثلاث روابط تختلف في رقم واحد.
ما الذي يستخدمه التظليل والشفافية، وكيفية دمجهما، يتم تغطيته في التظليل، الانعكاسات، والشفافية؛ تعيش معلمات التوصيل في وثائق API.
