تحويل PNG إلى AVIF — شفافية محفوظة ووزن أقل

تحويل PNG إلى AVIF: شفافية محفوظة دون إبطاء الموقع

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

ولم تكن JPG حلاً لأنها لا تدعم الشفافية. وهكذا كان المطور محاصراً.

صيغة AVIF تحل هذا التعارض بالضبط

تدعم AVIF قناة شفافية كاملة، وتضغط في الوقت نفسه بأسلوب يفقد جزءاً من البيانات. وبذلك يتحول ملف PNG بحجم ٢ ميغابايت غالباً إلى ملف AVIF بحجم ١٥٠ إلى ٣٠٠ كيلوبايت. أي توفير بنسبة ٨٥ إلى ٩٢ بالمئة مع بقاء الشفافية.

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

متى ينبغي أن تبقى على PNG

ليست كل صورة PNG تستفيد. في الرسم البسيط ذي الألوان القليلة — أيقونة، شعار بسيط، مخطط — تعمل PNG بكفاءة عالية أصلاً. وهناك قد يكون ملف AVIF أكبر حجماً، وقد يُحدث الضغط بفقدان بعض التشوش عند الحواف الحادة.

وابقَ على PNG أيضاً إن كان هذا ملف عملك. فصيغة AVIF صيغة تسليم للويب، وليست صيغة للتحرير والحفظ المتكرر.

القاعدة العملية

الصور المفرّغة والرسوم ذات التدرجات والمساحات الكبيرة الشفافة: حوّلها إلى AVIF. أما الأيقونات والرسوم الخطية ولقطات الشاشة التي تحوي نصاً وملفات العمل: ابقَ على PNG.

لا تنسَ الطبقة الاحتياطية

الأجهزة القديمة جداً لا تعرف AVIF. في الاستخدام الفعلي ضع AVIF كمصدر أول في عنصر picture وملف PNG الأصلي كمصدر ثانٍ، فتأخذ المتصفحات الحديثة الملف الصغير وتعود الأجهزة الأقدم إلى الأصل.

معالجة دون رفع

صور المنتجات المفرّغة غالباً أثمن ما تملكه العلامة التجارية، خصوصاً قبل النشر. لا ينقل ImageXpo أي شيء؛ الترميز يجري عبر WebAssembly داخل متصفحك حتى مع مئات الملفات.