WebP أم PNG أم JPG: كيف تختار صيغة الصورة المناسبة
JPG للصور الفوتوغرافية التي يجب أن تُفتح في أي مكان، وPNG حين تحتاج إلى البكسلات كما هي تمامًا، وWebP تؤدي المهمتين بملفات أصغر على الويب.
يعود اختيار صيغة الصورة إلى ثلاثة أسئلة: هل يُسمح للمُرمِّز بالتخلي عن بعض التفاصيل؟ وهل تحتاج الصورة إلى مناطق شفافة؟ وأين سيُفتح الملف؟ وتجيب JPG وPNG وWebP عن هذه الأسئلة بطرق مختلفة. فـ WebP هي عادةً الخيار الأفضل لصور المواقع، لكن PNG وJPG ما زالتا تتفوقان في بعض المواضع، ومعرفة هذه المواضع تجنّبك الشعارات الباهتة الحواف، والمربعات البيضاء حول الصور المقصوصة، ونماذج الرفع التي ترفض ملفك.
الصيغ الثلاث جنبًا إلى جنب
| JPG (JPEG) | PNG | WebP | |
|---|---|---|---|
| الضغط | مع فقد | بلا فقد | مع فقد أو بلا فقد |
| الشفافية | لا | نعم، قناة ألفا كاملة | نعم، في الوضعين |
| الحركة | لا | عبر APNG | نعم |
| عمق الألوان | 8 بت لكل قناة عمليًا | حتى 16 بت لكل قناة | 8 بت لكل قناة |
| أقصى أبعاد | 65,535 × 65,535 بكسل | أكثر من 2 مليار بكسل لكل ضلع | 16,383 × 16,383 بكسل |
| تُفتح في | كل البرامج تقريبًا | كل البرامج تقريبًا | كل المتصفحات الرئيسية الحالية؛ لكن ليس في كل تطبيق أو نموذج رفع |
| الأنسب لـ | الصور الفوتوغرافية التي يجب أن تعمل في كل مكان | لقطات الشاشة وواجهات الاستخدام والرسومات ذات الحواف الحادة | معظم الصور على المواقع |
الضغط مع الفقد وبلا فقد: الفرق الحقيقي
الضغط مع الفقد (lossy) يتخلص من تفاصيل يُستبعد أن تلاحظها العين، وإعداد الجودة يحدد مقدار ما يُحذف. وهو يناسب الصور الفوتوغرافية، حيث يخفي التشويش والتدرجات اللونية التغييرات الصغيرة. لكنه يضر بالنصوص والخطوط الرفيعة ومساحات اللون المصمت، إذ تكتسب حوافًا ناعمة وبقعًا باهتة. وكل إعادة حفظ تفقد قليلًا إضافيًا، لذا حوّل دائمًا من الملف الأصلي لا من نسخة JPG سابقة.
أما الضغط بلا فقد (lossless) فيحتفظ بكل بكسل كما هو تمامًا. وهو الخيار الصحيح للقطات الشاشة والمخططات وفن البكسل وكل ما ستعدّله مرة أخرى. لكنه ينتج للصورة الفوتوغرافية ملفًا أكبر بكثير، لأن تخزين تشويش الكاميرا بدقة تامة مكلف.
صيغة JPG مع فقد فقط، وPNG بلا فقد فقط. أما WebP فتجمع الوضعين في صيغة واحدة، وهذه ميزتها العملية الأساسية: يمكن أن تكون الصورة الفوتوغرافية ولقطة الشاشة كلتاهما بصيغة WebP، وتُضغط كل منهما بالطريقة المناسبة لها.
كم تصغر ملفات WebP؟
تنشر Google، التي طوّرت الصيغة، هذه المقارنة: صور WebP بلا فقد أصغر بنسبة 26% من PNG، وصور WebP مع فقد أصغر بنسبة 25–34% من صور JPEG المماثلة عند جودة SSIM مكافئة. وهذه متوسطات محسوبة على صور الاختبار لدى Google، وليست وعدًا ينطبق على كل ملف.
قد تكون نتائجك أفضل أو أسوأ. فصفحة الأسئلة الشائعة عن WebP لدى Google تشير إلى أن ملف WebP قد يخرج أكبر من مصدره، وذلك عادةً حين تُحوَّل صورة PNG قليلة الألوان إلى WebP مع فقد، أو حين تُخزَّن صورة مضغوطة مع فقد أصلًا بصيغة WebP بلا فقد. كذلك تستخدم WebP مع فقد دائمًا الاختزال اللوني 4:2:0 (chroma subsampling)، أي تخزّن الألوان بنصف الدقة الأفقية والعمودية للسطوع، لذا قد تبدو الحواف الحمراء أو الزرقاء المشبعة في الرسومات ملطخة قليلًا بينما تبقى في PNG حادة. والطريقة الموثوقة هي أن تحوّل ثم تقارن: يعرض محوّل الصور الحجم الأصلي والحجم الجديد لكل ملف، فترى التوفير الفعلي قبل أن تحتفظ بالنتيجة.
الشفافية والحركة
لا تملك JPG قناة ألفا. فتحويل شعار شفاف إلى JPG يملأ المنطقة الشفافة بلون مصمت، ومحوّل هذا الموقع يستخدم الأبيض. وتخزّن PNG قناة ألفا كاملة بلا فقد، مما يجعل الصور الفوتوغرافية الشفافة، كصور المنتجات المقصوصة، ثقيلة الحجم. أما WebP فتدعم الشفافية في وضع الضغط مع الفقد أيضًا، فتحتفظ الصورة المقصوصة بحوافها الناعمة بجزء صغير من حجم PNG. وفي هذه الحالة تحديدًا يحقق تحويل PNG إلى WebP أكبر توفير.
وفي الحركة: لا تدعمها JPG إطلاقًا، ولدى PNG امتداد APNG، أما WebP فالحركة مدمجة فيها. وبحسب Google يمكن أن تكون ملفات WebP المتحركة أصغر من الحركة نفسها بصيغة GIF أو APNG. ومع المقاطع الطويلة أو المعقدة، يكون فيديو MP4 أو WebM بلا صوت عادةً أخف من أي صيغة صور.
أي صيغة تستخدم
| الصورة | استخدم | السبب |
|---|---|---|
| صور فوتوغرافية على موقع ويب | WebP مع فقد | أصغر خيار مدعوم على نطاق واسع |
| صور للبريد الإلكتروني أو الطباعة أو نماذج الرفع | JPG | تُفتح في كل برنامج وتقبلها كل النماذج |
| لقطات شاشة فيها نص، ونماذج أولية لواجهات الاستخدام | PNG أو WebP بلا فقد | يبقى النص حادًا ولا يتلطخ شيء |
| الشعارات والأيقونات | SVG إن كانت لديك نسخة متجهية، وإلا PNG أو WebP | تحافظ على الحواف الحادة والشفافية |
| صورة منتج بخلفية شفافة | WebP مع فقد وقناة ألفا | حواف ناعمة بجزء صغير من حجم PNG |
| حركة قصيرة | WebP متحركة، أو MP4/WebM للمقاطع الأطول | أخف بكثير من GIF |
| النسخ الأصلية التي ستعدّلها لاحقًا | PNG، أو ملف الكاميرا الأصلي | لا تتراكم خسارة الجودة مع كل حفظ |
نقل صورك الحالية سريع: JPG إلى WebP للصور الفوتوغرافية، وPNG إلى WebP للرسومات والصور المقصوصة. وحين لا يفتح برنامج قديم ملف WebP، فإن WebP إلى JPG يحل المشكلة، بينما يصغّر PNG إلى JPG الصور الفوتوغرافية التي حُفظت بصيغة PNG عن طريق الخطأ.
دعم المتصفحات وبديل احتياطي بعنصر picture
تعرض الإصدارات الحالية من Chrome وEdge وFirefox وSafari كلها صيغة WebP، لذا يكفي معظم المواقع ملف WebP داخل وسم <img> عادي. وإن كان عليك دعم متصفحات قديمة أيضًا، أو أردت تقديم صيغة أحدث أولًا، فاستخدم العنصر <picture>. يأخذ المتصفح أول <source> يدعم نوعه، وإلا رجع إلى <img>، وهو الوسم الذي يحمل أيضًا النص البديل والأبعاد:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Harbour at sunset" width="1600" height="900">
</picture>ويمكن للخادم أو لشبكة توصيل المحتوى (CDN) أداء المهمة نفسها دون وسوم إضافية، بالنظر إلى ترويسة Accept في طلب الصورة وإرجاع WebP حين تكون مدرجة فيها. وإن فعلت ذلك فأرسل Vary: Accept كي تفصل ذاكرات التخزين المؤقت بين النسخ المختلفة.
أين تقع AVIF
تعتمد صيغة AVIF على ترميز الفيديو AV1، وتدعمها الإصدارات الحالية من Chrome وEdge وFirefox وSafari. وكثيرًا ما تنتج ملفات أصغر من WebP بجودة بصرية مماثلة، لكن ترميزها أبطأ، وعدد الأدوات والمحررات ونماذج الرفع التي تقبلها أقل. والإعداد الشائع هو AVIF أولًا ثم WebP ثم JPG أخيرًا، كما في المثال السابق. ومحوّل هذا الموقع يستطيع قراءة ملفات AVIF حين يستطيع متصفحك فك ترميزها، لكنه يكتب WebP وPNG وJPG وICO، لا AVIF.
التحويل داخل المتصفح: تنبيه بخصوص Safari
ترسم المحوّلات العاملة في المتصفح الصورة على عنصر canvas ثم تطلب من المتصفح ترميزها. ويستطيع Chrome وEdge وFirefox ترميز WebP بهذه الطريقة. أما Safari فيعرض WebP لكنه لا يستطيع ترميزها من canvas، ويعيد بدلًا منها ملف PNG دون أي تنبيه، لذا يتوقف محوّل هذا الموقع برسالة بدل أن يحفظ ملف PNG باسم ينتهي بـ .webp. على أجهزة Mac، نفّذ تحويلات WebP في Chrome أو Edge أو Firefox. وعلى iPhone أو iPad تستخدم المتصفحات الأخرى عمومًا محرك Safari نفسه، فحوّل على حاسوب أو اختر PNG أو JPG.
وهناك أمران آخران يستحقان المعرفة. في Chrome تنتج الجودة 100 ملف WebP بلا فقد، بينما تنتج القيم الأدنى WebP مع فقد؛ وقد تحققنا من ذلك بفحص الملفات المرمَّزة. كما أن الترميز عبر canvas لا ينسخ البيانات الوصفية، فبيانات EXIF مثل طراز الكاميرا وموقع GPS لا تنتقل إلى الملف المحوَّل.