WebP، AVIF أو PNG لصور المركبات

صور المركبات هي فئة غير مريحة من الصور للضغط: تدرجات تصويرية على ألوان منحنية، حواف مقطوعة حادة، وقناة ألفا يجب أن تبقى سليمة حيثما يتم تركيب السيارة على خلفية مخصصة. معظم نصائح الصور على الويب تنطبق، ولكن الحالات الاستثنائية هي بالضبط حيث تعيش صور السيارات. هذا هو قرار التنسيق، الذي تم اتخاذه بشكل صحيح مرة واحدة.

الثلاثة تنسيقات في الممارسة

حيث يفوز كل واحد

PNG: تنسيق الأرشفة والتجميع

PNG يكسب بايتاته بالضبط مرتين: عندما تدخل الصورة خط أنابيب الطباعة أو التصميم الذي سيضغطها مرة أخرى، و عندما تحتاج تركيبات التسلسل إلى قناة ألفا رياضية نظيفة. كتنسيق توصيل للصفحات الويب، فهو عادة، لا قرار. غالبًا ما يكون خمس مرات النقل دون فرق مرئي

WebP: الافتراضي

WebP مع قناة ألفا بجودة معقولة هو المحرك الرئيسي: قطع شفافة بوزن جزء من PNG، ودعم متصفح عالمي، وجودة قابلة للتحكم لكل طلب. بالنسبة لشبكة قوائم أو معرض VDP، format=webp مع عرض صريح width هو السياسة الكاملة.

AVIF: قلم حاد، نفس الرسم

AVIF يضغط أكثر من WebP عند نفس الجودة، وقصته دعم جيدة الآن. السؤال الصريح هو المكسب الهامشي: على قطع السيارات المقاسة بشكل صحيح، الخطوة من PNG إلى WebP دراماتيكي، والخطوة من WebP إلى AVIF هي تعديل. تحقق من /api/options للحصول على التنسيقات التي يتم تقديمها حالياً قبل بناء خط أنابيب حول واحد.

الأخطاء التي تتجاوز اختيار التنسيق

• عرض الصور عالية الدقة في فتحات صغيرة. توجد معلمات العرض، استخدمها.
• إرسال شفافية PNG إلى صفحة تضع السيارة على خلفية بيضاء على أي حال
• إعادة ضغط صورة مضغوطة بالفعل في خط أنابيبك، وتراكم العيوب على الحواف المقطوعة
• تجاهل معلمات الجودة: تتحمل صور المركبات الضغط جيدًا، وترك المعلمات الجودة الافتراضية كل شيء على الطاولة.

اختيار التنسيق يستحق اجتماعًا. الانضباط في الأحجام يستحق اجتماعًا كل ربع سنة، إلى الأبد.

مثال عملي

خذ شبكة قوائم تعرض 48 بطاقة مركبة. كصور PNG بحجم كامل، تشحن الصفحة عشرات الميجابايت من الصور، والتي لا يكمل المستخدمون المحمولون على اتصالات الخلوية تحميلها. نفس الشبكة بعرض 600 بكسل في WebP عادةً ما تكون أصغر بكثير لكل صورة. لم يتغير شيء في التصميم، وأصبحت الشبكة من غير قابلة للاستخدام إلى فورية على الاتصال الذي يستخدمه معظم المشترين فعليًا.

قم بمزج اختيار التنسيق مع srcset، ويقوم المتصفح بالباقي من العمل: تقوم الشاشات الصغيرة بسحب المتغير الصغير، وتقوم الشاشات عالية الدقة بسحب المتغير الحاد، ولا يقوم أحد بتنزيل البكسلات التي لا يمكن رؤيتها. نظرًا لأن الأبعاد هي معلمات الطلب، فإن الإعداد الاستجابة بالكامل هو ثلاث URLs تختلف في رقم واحد.

ما هو الغرض من الشفافية ومتغيرات الظل، وكيفية دمجها، يتم تغطيته في الظلال، الانعكاسات والشفافية؛ تعيش معلمات التوصيل في وثائق الواجهة.