تخيل هذا: أفضل تنسيق صورة للويب في عام 2019

JPEG ، WEBP ، HEIC ، AVIF؟ سيساعدك هذا الدليل في الاختيار.

بعد عقود من الهيمنة التي لا مثيل لها لـ JPEG ، شهدت السنوات الأخيرة ظهور تنسيقات جديدة - WebP و HEIC - تتحدى هذا الموقف. لديهم دعم جزئي فقط ، ولكن مهم ، من قبل اللاعبين الرئيسيين بين متصفحات الويب وأنظمة تشغيل الأجهزة المحمولة. من المتوقع أن يدخل تنسيق جديد آخر للصورة - AVIF - إلى المشهد في عام 2019 مع وعد بالانتشار عبر الويب بالكامل.

في هذه المقالة ، سنبدأ بمراجعة قصيرة للتنسيقات الكلاسيكية ، متبوعة بوصف WebP و HEIC / HEIF. سننتقل بعد ذلك إلى استكشاف AVIF ، وننتهي بملخص يجمع جميع النقاط الرئيسية معًا.

تعتمد التعليقات على المزايا والعيوب على كل من مراجعة التقارير الموثوقة المتاحة والملاحظات المباشرة أثناء تطوير ونشر الأدوات لخطوط أنابيب تحسين الصورة في تدفقات عمل التجارة الإلكترونية.

تنسيقات الصور الكلاسيكية للويب مع دعم عالمي

دعونا نذكر أنفسنا ، بترتيب زمني ، بأهم ثلاثة تنسيقات كلاسيكية لصور الويب.

GIF

يدعم GIF ضغط LZW بدون فقدان وإطارات متعددة تسمح لنا بإنتاج رسوم متحركة بسيطة.

القيد الرئيسي لهذا التنسيق هو أنه مقيد بـ 256 لونًا. كان هذا منطقيًا عندما تم إنشاؤه في أواخر الثمانينيات ، حيث تم تطبيق نفس القيد على شاشات العرض الحالية. ومع ذلك ، مع تحسين تقنية العرض ، أصبح من الواضح أنه لم يكن من المناسب إعادة إنتاج أي تدرجات لونية ناعمة ، مثل تلك الموجودة في الصور الفوتوغرافية. يمكننا بسهولة تحديد النطاق اللوني الذي ينتجه.

ومع ذلك ، يسمح GIF للرسوم المتحركة خفيفة الوزن بدعم عالمي. أبقت هذه الميزة التنسيق على قيد الحياة حتى اليوم في حالات الاستخدام غير الحساسة لقضايا الجودة ، وأكثرها شيوعًا هي الصور المتحركة الصغيرة ذات الألوان القليلة أو بدون ألوان.

JPEG

تم تطوير ملك تنسيقات الصور للويب لدعم سير عمل التصوير الرقمي.

مع عمق 24 بت المعتاد ، فإنه يوفر دقة ألوان أكثر بكثير (يجب عدم الخلط بينه وبين النطاق أو التدرج اللوني) مما يمكن للعين البشرية تمييزه. يدعم الضغط المفقود من خلال استغلال الآليات المعروفة للرؤية البشرية.

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

لذلك ، يقوم JPEG بإعادة ترميز صور RGB (الأحمر والأخضر والأزرق) داخليًا بإضاءة واحدة وقناتين من الكروما. يتيح لنا ذلك استخدام أخذ عينات صفاء فرعية لتجاهل المزيد من التفاصيل فقط في قنوات اللون. تجدر الإشارة إلى أن JPEG يقوم بترميز الصور في كتل من 8 × 8 بكسل.

نظرًا لتقليل عامل الجودة و / أو تطبيق عينات فرعية أكثر شدة من الصفاء ، نبدأ في الحصول على مزيد من القطع الأثرية للرنين أو الهالات أو الحجب أو التمويه. هناك مشكلة في JPEG وهي أنه بناءً على محتوى الصورة ، قد تظهر القطع الأثرية بقيم عامل جودة مختلفة. يظهر الاختلاف الأشد عند مقارنة التأثيرات على التصوير الطبيعي بالتأثيرات على العمل الفني. نظرًا لأن العمل الفني (الأشكال والخطوط) يعتمد عادةً على الحواف الحادة ، فإنها تبدأ في إنتاج القطع الأثرية حتى بالنسبة للكميات الصغيرة من التفاصيل التي يتم تجاهلها.

بالنسبة للصور ، يوفر JPEG بسهولة تقليل وزن الملف بعامل 10 مع وجود عيوب بالكاد ملحوظة ، مقارنةً بالضغط بدون فقد.

بي إن جي

تم تطوير تنسيق الرسومات غير المفقود هذا ليحل محل GIF ، ومعالجة مشكلات النطاق اللوني (والترخيص). كان ضروريًا للصور التي تحتوي على قدر كبير من الأعمال الفنية ، والتي أنتج JPEG من أجلها قطع أثرية كبيرة حتى مع أدنى معدلات ضغط.

يدعم الشفافية والضغط المحسن مقارنة بـ GIF. نظرًا لأنه لا يتجاهل المعلومات ، لا ينتج عن PNG عناصر أثرية. بالطبع ، هذا على حساب وزن الصورة الأثقل في وجود العديد من التدرجات اللونية المختلفة ، مقارنة بالضغط الضائع.

ينجح في استغلال خاصية متكررة للعمل الفني: على عكس التصوير الفوتوغرافي - الذي يتميز بسلسلة متصلة من الألوان مع اختلافات دقيقة - عادةً ما تتميز الصور الفنية بألوان قليلة محددة جيدًا.

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

القادمون الجدد مع دعم جزئي: WEBP و HEIC على أساس HEVC

يمكن تصنيف الآليات التي تستخدمها برامج ترميز الفيديو لضغط التدفقات إلى نوعين رئيسيين: بين الرتل وداخل الإطار. في حين أن الأول يستغل التكرار على مدار الوقت ، تركز الآليات داخل الإطار على تقليل التكرار داخل إطار معين ، دون أي اعتماد على الباقي. يمكن تطبيق آلية الضغط هذه على الصور الثابتة.

أدى انفجار مشاركة الفيديو - مع وجود شبكات المحمول في قلبها - والزيادة المطردة في دقة العرض إلى دفع الجهود المبذولة على معايير الترميز الجديدة لتحقيق أعلى كفاءة ممكنة في الضغط.

لذلك ، تظهر تنسيقات الصور الجديدة كمشتقات لمعايير ترميز الفيديو الجديدة. توفر تنسيقات الصور الجديدة هذه مجموعات ميزات أكبر من JPEG وتعد بتوفيرات ذات صلة في وزن الملف مع جودة مرئية محسنة.

ويب

طورت Google هذا التنسيق بهدف توفير تنسيق صورة واحد قادر على الويب للتعامل مع جميع حالات الاستخدام النموذجية.

الأهم من ذلك ، أنها تسعى إلى الحصول على صور أفتح من JPEG ، دون عقوبات على الجودة المرئية. يستخدم عمليات أكثر تعقيدًا - مثل توقع الكتلة - وهو مشتق من برنامج ترميز الفيديو VP8. وهو يدعم الضغط بدون فقدان البيانات ، وعلى عكس JPEG ، فإنه يسمح بالشفافية والرسوم المتحركة التي قد تدمج الصور المشفرة مع كل من الضغط بدون فقدان البيانات وفقدان البيانات.

من حيث المبدأ ، يجب أن يعمل كبديل لملفات JPEG و PNG و GIF. وكان من العوائق الهامة عدم وجود دعم عالمي. حتى وقت قريب ، كان WebP مقيدًا بالبرامج المدعومة من Google مثل متصفح Chrome وتطبيقات Android الأصلية.

ومع ذلك ، مع الإعلان عن أن Edge و Firefox (باستثناء iOS Firefox) ستقدمان دعم WebP في عام 2019 ، من الواضح أنها تكتسب قوة جذب. تجدر الإشارة أيضًا إلى أن Apple - Safari و iOS - لا يدعمان WebP حتى الآن.

HEIC / HEIF

يجلب هذا الشكل تطورًا كبيرًا في ناحيتين مختلفتين.

أولاً ، تدعم حاوية الملف أكبر مجموعة ميزات بين تنسيقات الصور المتاحة. وهو يدعم ، على سبيل المثال ، الصور متعددة الإطارات مع ضغط متعدد الإطارات - وهي ميزة رئيسية لصور HDR فعالة أو صور متعددة التركيز أو متعددة العرض.

ثانيًا ، يدعم العديد من أنواع البيانات غير المتعلقة بالصور بمرونة ملحوظة. حاليًا ، يتم ضغط معظم الصور التي تستخدم هذه الحاوية بمشتق للصور من برنامج ترميز الفيديو H265 / HEVC ، الذي تم تطويره للتعامل بكفاءة مع دقة 4K و 8 k التي تتميز بها أحدث شاشات الجيل. يتضمن ترميز HEVC عمليات أكثر تعقيدًا مع قيود أقل من JPEG. إنها تحقق كفاءة ضغط أعلى بكثير على حساب أوقات تشفير أعلى قليلاً - وليست مشكلة على الإطلاق في سير عمل الويب.

مثل H265 ، تدعم Apple HEIC المستند إلى HEVC. يتمتع بدعم أصلي في iOS و macOS ، ولكن - في الغالب بسبب مشكلات براءات الاختراع والترخيص - لا يدعمه باقي الأنظمة الأساسية (Android و Windows). حتى في macOS ، لا يدعم Safari ذلك. يبدو أن تطبيقات iOS هي قاعدة الاستخدام الوحيدة القابلة للتطبيق لـ HEIC على الويب.

لذلك يطرح سؤال كبير: هل يجب أن نقدم بدائل WEBP / HEIC و JPEG ، مع إصدارات PNG كبديل؟

دعونا نلقي نظرة على كل حالة ...

هل يجب أن أخدم مشتقات WEBP؟

تدعي Google أن هذا التنسيق ينتج صورًا أخف بكثير من JPEG بجودة مماثلة. ومع ذلك ، أشارت الاختبارات المستقلة إلى أن هذه النتيجة غير متسقة عبر مقاييس الجودة المختلفة ، وأن تقليل الوزن ، في معظم الحالات ، يتم موازنته من خلال زيادة التشويش.

في اختباراتنا الخاصة بصور التجارة الإلكترونية ، رأينا توفيرًا في الملفات لـ WebP ، ولكن بسعر مزيد من التعتيم والتفاصيل الأقل. على الرغم من أننا رأينا أيضًا مخاطر أقل لرنين القطع الأثرية وحجبها ، وهو ما نعتبره مزعجًا بصريًا أكثر من التعتيم.

As WebP lacks support by Apple browsers and operative systems, we do not generally recommend serving WebP derivatives competing with JPEG. Such moves would increase media management complexity with limited benefits.

This situation would change if Apple started supporting WebP.

If this were the case, then the extended feature set of WebP and the lighter images produced may be worth its use, effectively simplifying image management workflows.

To try WebP yourself, a classic tool like ImageMagick is a good option. It makes easy-to-compare image versions with different settings of quality and resolution for both WebP and JPEG. Results can be viewed with Chrome.

# Convert to WEBP quality 60 convert input.jpg -quality 60 output_60.webp # Convert to JPEG quality 60 convert input.jpg -quality 60 output_60.jpg # Convert to WEBP quality 60 and width 450px convert input.jpg -resize 450 -quality 60 output_450_60.webp

Different combinations of quality and resolution will have different effects in each case, as the compression algorithms work differently. So, check your relevant file sizes on several images to get a grasp of the potential savings and the best settings for a given use case.

Should I serve HEIC derivatives?

The advantage of HEIC (over JPEG) is clear. Weight reduction is consistently significant — about 50% — without loss of visual quality. The feature set supported is simply amazing.

The problem again is browser and operative system support.

Given the patent issues of HEVC and the hefty royalties associated, we can expect support to remain restricted to those in the Apple world. Since JPEG is already efficient in compressing images, the 50% of something small might not be worth enough to add complexity to our image processing workflow.

Certain cases using large images, with a major interest in visual quality AND with a large percentage of Apple devices in their user base should consider serving this format.

Performing tests with HEIC is very easy with a Mac. Preview allows us to export an image to HEIC and JPEG with different quality values and different resolutions. You won’t need to run many tests to see the clear and systematic difference between them.

If you want to try something more flexible that may be integrated in a web image processing workflow, GPAC is worth a look.

What about AVIF?

AVIF is the last of our contenders.

Like WebP and HEIC based on HEVC, AVIF is a derivative of the latest efforts in video standards. It also uses HEIF containers and so supports a complete feature set, encompassing all the main formats available. It brings much higher efficiency in compression inherited from the use of AV1 intra-frame coding mechanisms. These advantages make this format compelling.

Another significant advantage comes from the Alliance for Open Media, the large consortium behind its development as a fully open approach, with an open license, free of royalties. Big players like Google, Netflix, Adobe, Mozilla, Microsoft, Facebook and Amazon — major actors in the web graphics and video scene — are backing this new format and making a case for a fast and wide adoption, both in software and hardware. While the stream format was frozen in March 2018 with a reference code available, the first devices with hardware support for AV1 are expected by the end of 2019.

At the time of writing this article, the open source implementation of AV1 available may be still considered experimental and not suitable for production.

Summary

JPEG will remain the king format for general images for web in 2019, and PNG will remain as a default option for images with significant artwork.

The reason? Universal support.

Anything that opens an image will open JPEG or PNG in 2019, just like in previous years and decades! So no doubt that these universal formats will remain in place for some time yet.

The benefits of WebP remain controversial. A clear advantage of WebP is its ability to also replace PNG, potentially simplifying image processing workflows. However, without universal support this advantage vanishes. This may change only if Apple changes their mind and WebP finally gets universal adoption, then it could be used as a replacement for all JPEG, PNG and GIF images.

في المقابل ، تقدم صور HEIC المستندة إلى HEVC مزايا واضحة ، خاصة بالنسبة للدقة الكبيرة. إذا كانت حركة مرور مستخدمي iOS ذات صلة بموقع ويب به صور ثقيلة كبيرة ، فقد يكون من المفيد التفكير في تقديم بدائل HEIC لهم ، مع تحسينات UX المحتملة ، خاصة لاتصالات الهاتف المحمول البطيئة. إلى جانب التسريع ، يضمن HEIC الجودة ، وهو خالي تقريبًا من القطع الأثرية المزعجة التي تصيب سياسات JPEG العدوانية.

على الرغم من توقع AVIF لعام 2019 ، فإن الدعم والاعتماد سيستغرق وقتًا. لكن بالتأكيد ، إنه تنسيق صورة يجب أن تظل تحت رادارك في المستقبل القريب.

بالطبع ، سيظل استخدام الخدمة السحابية - من خلال واجهة برمجة تطبيقات لتحسين الصور أو مكون إضافي لتحسين الصورة - دائمًا بديلاً سهلاً ومباشرًا لإنجاز المهمة.