تنسيقات الصور الجديدة تهدف إلى مكافحة انتفاخ الموقع

تجذب صور موقع الويب الكثير من النقاش ، ولسبب وجيه: وفقا لأرشيف HTTP ، فإن 61 في المائة من وزن صفحة موقع الويب على جهاز كمبيوتر سطح المكتب هو صور ، وترتفع هذه النسبة إلى 65 في المائة على الأجهزة المحمولة. علاوة على ذلك ، زاد عدد وحدات بايت الصور بأكثر من 30 في المائة في متوسط صفحة الويب على أساس سنوي حيث أصبحت الصور أكبر وأكبر.

لم يتم إحراز تقدم كبير في دعم تنسيقات الصور منذ طرح تنسيقات JPEG و GIF و PNG القياسية في السوق منذ أكثر من 15 عاما. السبب بسيط: دعم تنسيقات الصور الجديدة عبر أنواع المتصفحات المختلفة أمر صعب. ومع ذلك ، فقد ظهر تنسيقان جديدان للصور على الساحة في السنوات القليلة الماضية وبدأوا مؤخرا في اكتساب قوة جذب كوسيلة لتحسين الصور: WebP (طرحته Google) و JPEG XR (بدعم من Microsoft).

WebP مقابل JPEG XR

يعتمد كلاهما على التقدم التكنولوجي الكبير من السنوات ال 15 الماضية ولكل منهما نقاط قوته الفريدة. يدعم كل تنسيق الضغط بدون فقدان وفقدان وشفافية كاملة ، ويدعم JPEG XR العرض التدريجي للصور. تشهد مواقع الويب التي تستخدم هذه التنسيقات الجديدة نتائج مهمة ، وغالبا ما توفر 25 في المائة إلى 50 في المائة من وحدات البايت عند مقارنتها بجودة JPEG مماثلة.

أكبر عيب لكليهما – والتبني الأخير الرئيسي أبطأ قليلا – هو دعم المتصفح: WebP ، على سبيل المثال ، مدعوم فقط في Chrome و Opera وبعض أجهزة Android الأحدث. يتم دعم JPEG XR بالكامل في IE 10 + ، مع دعم محدود في IE 9. لا يدعم أي منهما Firefox و Safari. بالنسبة للعديد من المستخدمين الذين لا يستخدمون هذه المتصفحات ، تظهر صور موقع الويب مكسورة.

الفيسبوك يدعم WebP

تنسيق صورة WebPجاء الاختبار العام الكبير الوحيد لهذه التنسيقات الجديدة مع تنفيذ Facebook ل WebP في الربيع الماضي. تمكن Facebook من توصيل الصور إلى المستخدمين باستخدام المتصفحات المدعومة من WebP ، ولكن ظهرت مشكلات عندما حاول المستخدمون إجراء الصور عن طريق حفظها أو تحريرها أو إعادة مشاركتها. سأل أحد المستخدمين المحبطين “كيف يمكنني تعطيل هذا الوحش؟”

تلميحات لتنفيذ تنسيق الصورة

يمكن لمواقع الويب الاستفادة بشكل كبير من تقنيات تحسين الصور الجديدة هذه ، ولكنها تحتاج إلى الاحتفاظ ببعض الأشياء في أذهانهم عند الذهاب في هذا الاتجاه:

  • فهم كيف سيستخدم الأشخاص صور موقع الويب. في حالة Facebook ، من الواضح أن المستخدم لم يؤخذ في الاعتبار لأن تنزيل الصور وحفظها وتحريرها ومشاركتها هي أنشطة تقوم بها نسبة كبيرة من جمهور Facebook.
  • تطبيع الجودة مهم. يجب مراعاة الاختلافات في إعدادات الجودة عند استخدام تنسيقات متعددة مفقودة. يمكن اختيار إعدادات الجودة التي تنتج تدهورا مماثلا للجودة المتصورة باستخدام خوارزمية مثل SSIM (التشابه الهيكلي).
  • استخدم WebP وJPEG XR فقط في الحالات التي يتوفر فيها دعم للمتصفح. مع عدم وجود تقاطع في دعم المتصفح ، قد يكون من المنطقي لمواقع الويب التي تتطلع إلى التحرك في هذا الاتجاه دعم كليهما للحصول على أقصى قدر من التغطية.

هناك العديد من الإيجابيات لاستخدام تنسيقات تحسين الصور الجديدة هذه ، وعندما تؤخذ النقاط المذكورة أعلاه في الاعتبار ، ستشهد مواقع الويب تحسنا كبيرا في الأداء وتوفير البايت. المزيد من دعم المتصفح – لا سيما من Firefox و Safari – سيحلي الوعاء أكثر.

Latest Web Performance Articles​

Start Dotcom-Monitor for free today​

No Credit Card Required