في Google، نبحث باستمرار عن طرق لتسريع تحميل صفحات الويب. وإحدى طرق إجراء ذلك هي تصغير حجم صور الويب. تشكّل الصور ما يصل إلى 60% إلى 65% من عدد البايتات في معظم صفحات الويب، ويشكّل حجم الصفحة عاملاً رئيسيًا في إجمالي وقت العرض. يُعدّ حجم الصفحة مهمًا بشكلٍ خاص على الأجهزة الجوّالة، حيث توفّر الصور الأصغر حجمًا كلاً من معدل نقل البيانات وعمر البطارية.
WebP هو تنسيق صور جديد تم تطويره من قِبل Google وهو متوافق مع Chrome وOpera وAndroid، وتم تحسينه لعرض صور أصغر حجمًا وأسرع على الويب. يقل حجم صور WebP بنحو % 30 مقارنةً بصور PNG وJPEG التي تتمتع بجودة مرئية مماثلة. بالإضافة إلى ذلك، يتضمّن تنسيق ملفّات WebP ميزات متطابقة مع التنسيقات الأخرى أيضًا. تتيح هذه الميزة ما يلي:
الضغط غير القابل للاسترداد: يستند الضغط غير القابل للاسترداد إلى ترميز اللقطات الرئيسية في VP8. VP8 هو تنسيق ضغط للفيديوهات أنشأته شركة On2 Technologies كخليفة لتنسيقَي VP6 وVP7.
الضغط بدون فقدان المعلومات: تم تطوير تنسيق الضغط بدون فقدان المعلومات من قِبل فريق WebP.
الشفافية: تكون قناة ألفا بسعة 8 بت مفيدة للصور الرسومية. يمكن استخدام قناة Alpha مع تنسيق RGB غير القابل للاسترداد، وهي ميزة غير متاحة حاليًا مع أي تنسيق آخر.
الصور المتحركة: تتيح هذه الميزة استخدام الصور المتحركة بالألوان الحقيقية.
البيانات الوصفية: قد تحتوي على بيانات EXIF وXMP الوصفية (التي تستخدمها الكاميرات مثلاً).
ملف تعريف الألوان: قد يحتوي على ملف تعريف ICC مضمّن.
بسبب ضغط الصور بشكل أفضل وتوافقها مع كل هذه الميزات، يمكن أن يكون WebP بديلاً ممتازًا لمعظم تنسيقات الصور: PNG أو JPEG أو GIF. علاوةً على ذلك، هل لديك عِلم بأنّ تنسيق WebP يتيح فرصًا جديدة لتحسين الصور، مثل إتاحة الصور ذات الشفافية التي تم ضغطها بدون فقدان المعلومات؟ إجابة صحيحة. تنسيق WebP هو "سكين الجيش السويسري" لتنسيقات الصور.
كيف يتم إجراء هذا السحر؟ لنشمر عن سواعدنا ونلقي نظرة على المحرك.
WebP بفقدان الجودة
يستخدم ضغط WebP بدون فقدان البيانات المنهجية نفسها المستخدَمة في VP8 لتنبؤ 🖼️(لقطات) الفيديو. يستند VP8 إلى توقّع الكتل ومثل أيّ برنامج ترميز يستند إلى الكتل، يقسم VP8 اللقطة إلى أجزاء أصغر تُعرف باسم الكتل الكبيرة.
ضمن كلّ بلوكة كبرى، يمكن لبرنامج الترميز توقّع معلومات الحركة واللون المتكرّرة استنادًا إلى الكتل التي تمت معالجتها سابقًا. يكون إطار الصورة "مفتاحيًا" بمعنى أنّه لا يستخدم سوى وحدات البكسل التي تم فك ترميزها في المساحة المجاورة الفورية لكلّ من الكتل الكبيرة، ويحاول ملء الجزء المجهول منها. يُعرف هذا باسم الترميز التوقّعي (راجِع ترميز اللقطة الداخلية لفيديو VP8).
ويمكن بعد ذلك طرح البيانات المكرّرة من الكتلة، ما يؤدي إلى زيادة كفاءة الضغط. يتبقى لدينا اختلاف صغير فقط، يُعرف باسم القيمة المتبقية، لإرساله بتنسيق مضغوط.
بعد الخضوع لعملية تحويل قابلة للعكس رياضيًا (DCT المشهور، الذي يرمز إلى Discrete Cosine Transform)، تحتوي عادةً العناصر المتبقية على العديد من قيم الصفر، والتي يمكن ضغطها بفعالية أكبر بكثير. تتم بعد ذلك تجزئة النتيجة وترميزها باستخدام مقياس معلومات. من المثير للاهتمام أنّ خطوة الترميز هي الخطوة الوحيدة التي يتم فيها تجاهل البتات بشكل لا يمكن استرجاعه (ابحث عن القسمة على QPj في المخطط البياني أدناه). يمكن عكس جميع الخطوات الأخرى بدون فقدان البيانات.
يوضّح الرسم البياني التالي الخطوات المُتّبعة في ضغط WebP بدون فقدان البيانات. يتم وضع دائرة حول الميزات التي تميّز تنسيق PNG مقارنةً بتنسيق JPEG باللون الأحمر.
يستخدم WebP أسلوب تحويل الأرقام إلى مجموعات ويوزع الوحدات بشكلٍ تكيُّفي على أقسام الصورة المختلفة: عدد وحدات أقل لمقاطع التشويش المنخفض وعدد وحدات أعلى لمقاطع التشويش المنخفض. يستخدم WebP ترميز المحتوى العشوائي الحسابي، ما يحقّق ضغطًا أفضل مقارنةً بترميز Huffman المستخدَم في JPEG.
أوضاع التوقّع الداخلي في VP8
يتم استخدام أوضاع التوقّع الداخلي في VP8 مع ثلاثة أنواع من الكتل الكبيرة:
- 4x4 luma
- لومينانس بدقة 16×16
- صفاء اللون بدقة 8×8
تشترك هذه الكتل الكبيرة في أربعة أوضاع شائعة للتوقّع الداخلي:
دالة H_PRED (التوقّع الأفقي) تملأ كل عمود من الكتلة بنسخة من العمود الأيسر L.
V_PRED (التوقّع العمودي) تملأ كل صف من الكتلة بنسخة من الصف أعلاه، "أ".
DC_PRED (توقّع مدة الاتصال) تملأ الكتلة بقيمة واحدة باستخدام متوسط البكسلات في الصف أعلى 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 مقارنةً بترميز Huffman.
WebP بدون فقدان الجودة
يستند ترميز WebP بدون فقدان البيانات إلى تحويل الصورة باستخدام عدة تقنيات مختلفة. بعد ذلك، يتمّ ترميز معلومات الالتباس على مَعلمات التحويل وبيانات الصورة المحوَّلة. تشمل عمليات التحويل المطبَّقة على الصورة التوقّع المكاني للّقطات وتحويل مساحة اللون باستخدام تشكيلات ألوان محلية ناشئة وتعبئة عدةّ بكسل في بكسل واحد واستبدال ملف alpha. بالنسبة إلى ترميز التشويش، نستخدم نوعًا من ترميز LZ77-Huffman، الذي يستخدم ترميزًا ثنائي الأبعاد لقيم المسافة والقيم المتفرقة المكثفة.
تحويل التوقّعات (المكانية)
يُستخدَم التنبؤ المكاني لتقليل التشويش من خلال الاستفادة من حقيقة أنّه غالبًا ما تكون هناك علاقة بين بكسلَين متجاورَين. في عملية التحويل باستخدام المتنبّئ، يتم توقّع قيمة بكسل الحالية من وحدات البكسل التي سبق فك ترميزها (بترتيب خطوط المسح الضوئي)، ولا يتم ترميز سوى القيمة المتبقية (القيمة الفعلية - القيمة المتوقّعة). يحدِّد وضع التوقّع نوع التوقّع الذي سيتم استخدامه. تتم مشاركة الصورة إلى مناطق مربّعة متعددة، وتستخدم كل وحدات البكسل في مربّع واحد وضع التوقّع نفسه.
هناك 13 وضعًا مختلفًا للتوقّعات المحتملة. أما العناصر الشائعة، فهي بكسل اليسار، والأعلى، وأعلى اليسار، وأعلى اليمين. أما القيم المتبقية، فهي مجموعات (متوسطات) للقيم على يمين الشاشة وفوقها وفوق يمينها وفوق يسارها.
تحويل الألوان (إزالة الارتباط)
يهدف تحويل الألوان إلى إزالة الارتباط بين قيم R وG وB لكل بكسل. تحافظ عملية تحويل الألوان على قيمة اللون الأخضر (G) كما هي، وتحوّل اللون الأحمر (R) استنادًا إلى اللون الأخضر، وتحوّل اللون الأزرق (B) استنادًا إلى اللون الأخضر ثم استنادًا إلى اللون الأحمر.
كما هو الحال مع عملية التحويل القائمة على التوقّعات، يتم أولاً تقسيم الصورة إلى مجموعات ويتم استخدام وضع التحويل نفسه لجميع وحدات البكسل في مجموعة. لكلّ كتلة، هناك ثلاثة أنواع من عناصر تحويل الألوان: green_to_red و green_to_blue وred_to_blue.
طرح تحويل اللون الأخضر
تطرح عملية "طرح الأخضر" القيم الخضراء من القيم الحمراء والزرقاء لكل بكسل. عند توفّر هذا التحويل، يحتاج برنامج الترميز العميق إلى إضافة القيمة الخضراء إلى كل من الأحمر والأزرق. هذه حالة خاصة من التحويل العام لإزالة الارتباط بين الألوان أعلاه، وهي شائعة بما يكفي لتستدعي القطع.
تحويل "فهرسة الألوان" (لوحات الألوان)
إذا لم تكن هناك قيم بكسل فريدة كثيرة، قد يكون من الأفضل إنشاء صفيف مؤشر ألوان واستبدال قيم البكسل بمؤشرات الصفيف. يحقّق ذلك التحويل الفهرسة حسب اللون. يتحقّق تحويل "فهرسة الألوان" مما يلي: عدد قيم ARGB الفريدة في الصورة. إذا كان هذا العدد أقل من الحدّ الأدنى (256)، يتم إنشاء صفيف من قيم ARGB هذه، والتي يتم استخدامها بعد ذلك لاستبدال قيم البكسل بالفهرس المقابل.
ترميز ذاكرة التخزين المؤقت للألوان
يستخدم ضغط WebP بدون فقدان التفاصيل أجزاء من الصور سبق أن تم عرضها من أجل إعادة إنشاء وحدات بكسل جديدة. ويمكن أن يستخدم أيضًا لوحة ألوان محلية في حال عدم العثور على مطابقة ملفتة للاهتمام. ويتم تعديل هذه اللوحة باستمرار لإعادة استخدام الألوان الأخيرة. في الصورة أدناه، يمكنك الاطّلاع على ذاكرة التخزين المؤقت للألوان المحلية أثناء بدء عملية التحديث التدريجي للألوان الـ 32 المستخدَمة مؤخرًا أثناء بدء عملية المسح من الأعلى إلى الأسفل.
مرجع LZ77 للإصدارات القديمة
الإحالات إلى الوراء هي مجموعات من الطول ورمز المسافة. يشير الطول إلى عدد البكسلات التي يجب نسخها بترتيب خطوط المسح. رمز المسافة هو رقم يشير إلى موضع بكسل تمّت رؤيته من قبل، ومنه يتم نسخ البكسلات. يتم تخزين قيم الطول والمسافة باستخدام ترميز البادئة LZ77.
يقسم ترميز بادئة LZ77 القيم الصحيحة الكبيرة إلى جزأين: البادئة الترميز والبتات الإضافية. يتم تخزين رمز البادئة باستخدام رمز اتّساع معلومات، في حين يتم تخزين الوحدات الإضافية كما هي (بدون رمز اتّساع معلومات).
يوضّح الرسم البياني أدناه تنسيق LZ77 (الصيغة ثنائية الأبعاد) مع مطابقة الكلمات (بدلاً من البكسل).
ملف WebP بترميز ضياع مع شفافية
بالإضافة إلى تنسيق WebP مع فقدان بعض التفاصيل (ألوان RGB) وWebP بدون فقدان أي تفاصيل (ألوان RGB بدون فقدان أي تفاصيل مع قناة ألفا)، يتوفّر وضع آخر من WebP يتيح ترميزًا مع فقدان بعض التفاصيل لقنوات RGB وترميزًا بدون فقدان أي تفاصيل لقناة ألفا. لا يتوفّر هذا الاحتمال (RGB بفقدان البيانات و قناة ألفا بدون فقدان البيانات) حاليًا مع أيّ من تنسيقات الصور الحالية. في الوقت الحالي، على مشرفي المواقع الذين يحتاجون إلى شفافية ترميز الصور بدون فقدان الجودة بتنسيق PNG، مما يؤدي إلى زيادة كبيرة في الحجم. يُشفِّر WebP alpha الصور باستخدام عدد قليل من البتات لكل بكسل، ويقدّم طريقة فعّالة لتقليل حجم هذه الصور. يضيف الضغط بدون فقدان للبيانات في قناة الشفافية 22% من وحدات البايت مقارنةً بترميز WebP بفقدان البيانات (بجودة %90).
بشكل عام، يؤدي استبدال ملفات PNG الشفافة بملفات WebP بترميز ضياع المعلومات ودرجة شفافية متغيرة إلى تقليل حجم الملفات بمتوسط 60-70%. وقد تبيّن أنّ هذه الميزة تجذب المستخدمين بشكل كبير في المواقع الإلكترونية المتوافقة مع الأجهزة الجوّالة والمليئة بالرموز التصويرية (مثل everything.me).
