محوّل WebP إلى Base64

ما هي صيغة WebP؟

WebP صيغة صور أطلقتها Google عام 2010. وهي تجمع في صيغة واحدة ضغطًا مع فقدان قائمًا على برنامج ترميز الفيديو VP8، ووضعًا مستقلًا بلا فقدان، وقناة ألفا، ودعمًا للحركة. نوع MIME الخاص بها هو image/webp، ولأن الملف حاوية RIFF، تبدأ مخرجات Base64 بـ UklGR. وتفيد Google بأن ملفات WebP بلا فقدان أصغر من PNG بنحو 26%، وأن الملفات مع فقدان أصغر من JPEG بنسبة 25 إلى 34% عند جودة مماثلة.

لماذا تناسب WebP عناوين data URI

يضيف Base64 الثلث نفسه إلى كل ملف، لذا يعطي أصغر ملف مصدر أقصر سلسلة. وهذا يجعل WebP خيارًا طبيعيًا: فأيقونة PNG الشفافة المحوّلة إلى WebP تحتفظ بشفافيتها وتصغر عادةً، والصورة الفوتوغرافية بصيغة JPEG يصغر حجمها بجودة بصرية مماثلة. لكن إعدادات الجودة العالية جدًا قد تنتج ملفًا أكبر من أصل محسَّن، لذا تحقّق من الحجم بعد الترميز قبل النسخ.

تحتفظ ملفات WebP المتحركة بجميع إطاراتها عند ترميزها دون تغيير. أما التحويل أو تغيير الحجم فيعيد رسم إطار واحد فقط.

الدعم في المتصفحات وبرامج البريد

تعرض جميع المتصفحات الرئيسية الحالية صيغة WebP: Chrome وEdge وFirefox وOpera وSafari 14 أو أحدث. ولا يفتقر إلى الدعم إلا المتصفحات القديمة جدًا مثل Internet Explorer. أما البريد الإلكتروني فمختلف: إذ لا تعرض عدة برامج بريد مكتبية، منها Outlook لنظام Windows، صيغة WebP، لذا استخدم PNG أو JPEG في قوالب البريد الإلكتروني.

إنشاء data URI بصيغة WebP في JavaScript

// قراءة ملف اختاره المستخدم
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/webp;base64,UklGR..."
reader.readAsDataURL(file);

// إعادة ترميز canvas بصيغة WebP بجودة 80%
const uri = canvas.toDataURL('image/webp', 0.8);

إذا لم يستطع المتصفح الترميز بصيغة WebP، فإن toDataURL يعود بصمت إلى PNG، لذا تحقّق من أن النتيجة تبدأ بـ data:image/webp.