في Google، نبحث باستمرار عن طرق لزيادة سرعة تحميل صفحات الويب. ويتم ذلك من خلال تصغير حجم صور الويب. تشكّل الصور ما يصل إلى %60 و% 65 من وحدات البايت على معظم صفحات الويب وحجم الصفحة هو عامل رئيسي في إجمالي وقت العرض. يُعتبر حجم الصفحة مهمًا بشكل خاص للأجهزة الجوّالة، حيث توفّر الصور الأصغر حجمًا كل من معدّل نقل البيانات وعمر البطارية.
تنسيق WebP هو تنسيق جديد للصور طوّرته Google ومتوافق مع متصفّح Chrome وOpera وAndroid، وتم تحسينه لتوفير صور أسرع وأصغر على الويب. يكون حجم صور WebP أصغر بنسبة 30% تقريبًا مقارنةً بصور PNG وJPEG بجودة مرئية مماثلة. بالإضافة إلى ذلك، يتميز تنسيق صور WebP بتكافؤ مع التنسيقات الأخرى أيضًا. وتتيح هذه الميزة ما يلي:
الضغط مع فقدان البيانات: يعتمد الضغط مع فقدان البيانات على ترميز الإطار الرئيسي VP8. إنّ VP8 هو تنسيق لضغط الفيديو أنشأته شركة On2 Technologies ليحل محل تنسيقَي VP6 وVP7.
الضغط بدون فقدان البيانات: تم تطوير تنسيق الضغط بدون فقدان البيانات على يد فريق WebP.
الشفافية: تكون قناة ألفا 8 بت مفيدة للصور الرسومية. يمكن استخدام قناة الإصدار الأولي مع ميزة "نموذج أحمر أخضر أزرق" مع فقدان الألوان، وهي ميزة غير متوفرة حاليًا مع أي تنسيق آخر.
الصور المتحركة: تتوافق مع الصور المتحركة ذات الألوان الحقيقية.
البيانات الوصفية: قد تتضمّن بيانات وصفية حول EXIF وXMP (التي تستخدمها الكاميرات على سبيل المثال).
ملفّ تعريف الألوان: قد يحتوي الملف على ملف شخصي مضمّن في ICC.
نظرًا لضغط الصور بشكل أفضل وإتاحة جميع هذه الميزات، يمكن أن يكون تنسيق WebP بديلاً رائعًا لمعظم تنسيقات الصور: PNG أو JPEG أو GIF. والأفضل من ذلك، هل تعلم أنّ تنسيق WebP يتيح فرصًا جديدة لتحسين الصور، مثل دعم الصور المفقودة من خلال الشفافية؟ إجابة صحيحة. تنسيق WebP هو سكين الجيش السويسري لتنسيقات الصور.
إذًا، كيف يتم ذلك؟ دعونا نشمر عن سواعدنا ونلقي نظرة على المحرك.
تنسيق WebP مع فقدان البيانات
إنّ تقنية الضغط مع فقدان البيانات في WebP تستخدم المنهجية نفسها التي يستخدمها VP8 للتنبؤ بالإطارات (الفيديوهات). يستند VP8 إلى توقع الحظر، وكما هو الحال مع أي برنامج ترميز مستند إلى الكتل، يقسّم VP8 الإطار إلى أجزاء أصغر تسمى وحدات الماكرو.
ضمن كل كتلة ماكرو، يمكن لبرنامج التشفير التنبؤ بالحركة المتكررة ومعلومات الألوان بناءً على الكتل التي تمت معالجتها سابقًا. يعد إطار الصورة "مفتاحًا"، بمعنى أنه لا يستخدم سوى وحدات البكسل التي تم فك ترميزها في الحي المكاني المباشر لكل من الكتل البرمجية الكبيرة، ويحاول ملء الجزء غير المعروف منها. وهذا ما يسمى بالترميز التنبؤي (راجع الترميز داخل الإطار لفيديو VP8).
ويمكن بعد ذلك طرح البيانات المكررة من الكتلة، ما يؤدي إلى ضغط أكثر كفاءة. يتبقى لدينا فقط فارق بسيط يسمى القيم المتبقية، لنقل في شكل مضغوط.
وبعد خضوعها لتحويل غير قابل للانعكاس رياضيًا (رمز DCT الشهير الذي يرمز إلى تحويل جيب التمام المنفصل)، تحتوي البقايا عادةً على العديد من القيم الصفرية، والتي يمكن ضغطها بفعالية أكبر. وبعد ذلك يتم تحديد النتيجة كميًا وترميز القصور. ومما يثير التعجب، أن خطوة التحليل الكمي هي الخطوة الوحيدة التي يتم فيها تجاهل وحدات البت مع فقدان البيانات (ابحث عن القسمة على QPj في الرسم التخطيطي أدناه). ويمكن عكس جميع الخطوات الأخرى بدون فقدان البيانات.
يوضِّح الرسم البياني التالي الخطوات المتّبعة في عملية الضغط مع فقدان البيانات بتنسيق WebP. يتم وضع دائرة للميزات المختلفة مقارنة بـ JPEG باللون الأحمر.
يستخدم تنسيق WebP طريقة قياس كميّات الكتل ويوزّع وحدات بت بشكل تكيّفي على أجزاء مختلفة من الصور: وحدات بت أقل للأجزاء ذات الإنتروبيا المنخفضة وعدد وحدات بت أعلى لأجزاء الإنتروبيا الأعلى. يستخدم تنسيق WebP ترميز الإنتروبيا الحسابي، لتحقيق ضغط أفضل مقارنةً بترميز Huffman المستخدَم في JPEG.
أوضاع التوقع المتبادل VP8
يتم استخدام أوضاع التوقع داخل برنامج VP8 مع ثلاثة أنواع من الكتل البرمجية الكبيرة:
- 4×4 لوما
- 16×16 لوما
- كروما 8x8
تتم مشاركة أربعة أوضاع شائعة للتنبؤ بين عناصر الكتل البرمجية التالية من خلال وحدات الماكرو:
H_PRED (توقّع أفقي). يملأ كل عمود من الكتلة بنسخة من العمود الأيسر، L.
V_PRED (التوقّع العمودي). يملأ كل صف من الكتلة بنسخة من الصف أعلاه، A.
DC_PRED (توقع DC). يملأ الكتلة بقيمة واحدة باستخدام متوسط وحدات البكسل في الصف أعلى A والعمود على يسار L.
TM_PRED (توقّع TrueMotion). وضع اشتق اسمه من أحد أساليب الضغط التي طوّرتها شركة On2 Technologies. بالإضافة إلى الصف A والعمود L، يستخدم TM_PRED وحدة البكسل P أعلى الكتلة وعلى يسارها. يتم نشر الاختلافات الأفقية بين وحدات البكسل في A (بدءًا من P) باستخدام وحدات البكسل من L لبدء كل صف.
ويوضح الرسم البياني التالي أوضاع التوقع المختلفة المستخدمة في الضغط اللامع في WebP.
بالنسبة إلى قوالب لوما بحجم 4×4، توجد ستة أوضاع إضافية داخلية مشابهة لـ V_PRED وH_PRED، ولكنها تتوافق مع التنبؤ بوحدات البكسل في اتجاهات مختلفة. يمكن الاطّلاع على مزيد من التفاصيل حول هذه الأوضاع في دليل مصدر بيانات VP8.
تحديد كمية الحظر التكيُّفي
لتحسين جودة الصورة، يتم تقسيمها إلى مناطق تضم ميزات متشابهة بشكل واضح. لكل من هذه الشرائح، يتم ضبط معاملات الضغط (خطوات تحديد الكمية وقوة التصفية وما إلى ذلك) بشكل مستقل. ينتج عن ذلك ضغط فعال من خلال إعادة توزيع وحدات البت إلى المكان الأكثر فائدة منها. يتيح برنامج VP8 نشر أربع شرائح كحدّ أقصى (بحد أقصى مصدر بيانات VP8).
لماذا تنسيق WebP (فقدان) أفضل من JPEG
ترميز التوقع هو السبب الرئيسي لانتصار WebP على JPEG. يُحدث الحظر التكيُّفي فرقًا كبيرًا أيضًا. تساعد الفلترة في معدلات نقل البيانات المتوسطة/المنخفضة. يوفر الترميز الحسابي المنطقي مكاسب ضغط من 5% إلى 10% مقارنة بترميز هوفمان.
تنسيق WebP بدون فقدان البيانات
ويعتمد الترميز بدون فقدان البيانات بتنسيق WebP على تحويل الصورة باستخدام عدة أساليب مختلفة. بعد ذلك، يتم تطبيق ترميز القصور على معلمات التحويل وبيانات الصورة التي تم تحويلها. تتضمن التحويلات المطبقة على الصورة التنبؤ المكاني بالبكسل وتحويل مساحة اللون واستخدام لوحات ألوان صاعدة محليًا وتجميع وحدات بكسل متعددة في بكسل واحد واستبدال ألفا. بالنسبة إلى ترميز القصور، نستخدم صيغة أخرى من ترميز LZ77-Huffman، الذي يستخدم الترميز الثنائي الأبعاد لقيم المسافة والقيم المتفرقة المدمجة.
تحويل المتنبئ (مكاني)
ويتم استخدام التنبؤ المكاني لتقليل القصور من خلال استغلال حقيقة أن وحدات البكسل المجاورة ترتبط غالبًا. في تحويل المتنبئ، يتم توقع قيمة البكسل الحالية من وحدات البكسل التي تم فك ترميزها بالفعل (بترتيب سطر المسح)، ولا يتم تشفير سوى القيمة المتبقية (الفعلية - المتوقعة). يحدد وضع التوقع نوع التوقع الذي سيتم استخدامه. وقد تم تقسيم الصورة إلى عدة مناطق مربّعة، وتستخدم جميع وحدات البكسل في مربّع واحد وضع التوقّع نفسه.
هناك 13 وضعًا مختلفًا للتوقع. الوحدات السائدة هي وحدات البكسل اليسرى والعلوية والأعلى اليسرى واليمنى. المجموعات المتبقية هي مجموعات (متوسطات) من اليسار والجزء العلوي والجزء العلوي الأيسر وأعلى اليمين.
تحويل اللون (إلغاء الارتباط)
الهدف من تحويل اللون هو تزيين قيم R وG وB لكل بكسل. يحافظ تحويل اللون على القيمة الخضراء كما هي، ويحول اللون الأحمر (R) بناءً على اللون الأخضر، ويحول اللون الأزرق (B) بناءً على الأخضر ثم يعتمد على الأحمر.
كما هو الحال مع تحويل المتنبئ، يتم أولاً تقسيم الصورة إلى كتل واستخدام وضع التحويل نفسه لجميع وحدات البكسل في كتلة واحدة. لكل كتلة هناك ثلاثة أنواع من عناصر تحويل الألوان: green_to_red وgreen_to_blue وred_to_blue.
طرح التحويل الأخضر
يعمل "طرح التحويل الأخضر" على طرح القيم الخضراء من القيم الحمراء والزرقاء لكل بكسل. عند إجراء هذا التحويل، يحتاج برنامج فك الترميز إلى إضافة القيمة الخضراء لكل من الأحمر والأزرق. هذه حالة خاصة لتحويل علاقة ديكور اللون العامة أعلاه، متكررة بما يكفي لضمان القطع.
تحويل فهرسة الألوان (لوحات الألوان)
إذا لم يكن هناك العديد من قيم البكسل الفريدة، فقد يكون من الأفضل إنشاء مصفوفة فهرس الألوان واستبدال قيم البكسل بفهارس الصفيفة. ويحقق تحويل فهرسة الألوان ذلك. تتحقّق "فهرسة الألوان" من عدد قيم ARGB الفريدة في الصورة. إذا كان هذا الرقم أقل من الحد الأدنى (256)، يتم إنشاء مصفوفة من قيم ARGB هذه، والتي يتم استخدامها بعد ذلك لاستبدال قيم البكسل بالفهرس المتجاوب.
ترميز ذاكرة التخزين المؤقت بالألوان
يستخدم ضغط WebP بدون فقدان البيانات أجزاءً سبق رؤيتها من الصور لإعادة إنشاء وحدات بكسل جديدة. يمكنها أيضًا استخدام لوحة ألوان محلية إذا لم يتم العثور على تطابق مثير للاهتمام. ويتم تحديث هذه اللوحة باستمرار لإعادة استخدام الألوان الحديثة. في الصورة أدناه، يمكنك رؤية ذاكرة التخزين المؤقت المحلية للألوان وهي قيد التحديث أثناء تحديثها تدريجيًا باستخدام 32 لونًا مستخدَمًا مؤخرًا مع هبوط عملية الفحص.
LZ77 مرجع سابق
المراجع السابقة عبارة عن صفوف من رمز الطول والمسافة. يشير الطول إلى عدد وحدات البكسل في ترتيب سطر المسح التي سيتم نسخها. رمز المسافة هو رقم يشير إلى موضع وحدات البكسل المعروضة سابقًا، والتي سيتم نسخ وحدات البكسل منها. يتم تخزين قيم الطول والمسافة باستخدام ترميز بادئة LZ77.
يُقسِّم ترميز بادئة LZ77 قيم الأعداد الصحيحة الكبيرة إلى جزأين: رمز البادئة والبت الإضافي. يتم تخزين رمز البادئة باستخدام رمز القصور، بينما يتم تخزين وحدات البت الإضافية كما هي (بدون رمز قصور).
يوضِّح الرسم البياني التالي LZ77 (الصيغة الثنائية الأبعاد) باستخدام ميزة مطابقة الكلمات (بدلاً من وحدات البكسل).
تنسيق WebP مع فقدان البيانات مع الإصدار الأولي
بالإضافة إلى تنسيق WebP مع فقدان البيانات (ألوان RGB) وWebP بدون فقدان البيانات (نموذج أحمر أخضر أزرق بدون فقدان البيانات مع ألفا)، هناك وضع WebP آخر يسمح بالترميز مع فقدان البيانات لقنوات RGB والترميز بدون فقدان البيانات لقناة ألفا. وهذا الاحتمال غير متوفّر حاليًا (نموذج أحمر أخضر أزرق (RGB) مفقود وألفا بدون فقدان البيانات) حاليًا مع أي من تنسيقات الصور الحالية. اليوم، يجب على مشرفي المواقع الذين يحتاجون إلى الشفافية ترميز الصور بدون فقدان البيانات بتنسيق PNG، مما يؤدي إلى زيادة حجم الصور بشكل كبير. يعمل تنسيق WebP alpha على ترميز الصور بعدد وحدات بت منخفضة لكل بكسل وتوفير طريقة فعّالة لتقليل حجم هذه الصور. يؤدي الضغط بدون فقدان بيانات قناة ألفا إلى إضافة 22% من وحدات بايت عبر ترميز WebP الذي يؤدي إلى فقدان البيانات (الجودة 90).
بشكل عام، يؤدي استبدال ملف PNG الشفاف بتنسيق WebP إلى الويب الذي لا يظهر فيه الفاقد+ألفا إلى توفير في المتوسط بنسبة تتراوح بين %60 و%70. لقد تأكدنا من أن هذه الميزة تجذب المستخدمين بشكل كبير للمواقع الإلكترونية المتوافقة مع الأجهزة الجوّالة الغنية بالرموز (everything.me، على سبيل المثال).
