إن سبق أن اختبرت أداء موقعك على Google PageSpeed Insights وظهر لك تنبيه «اعرض الصور بصيغ الجيل الجديد»، فالمقصود كان تحويل صورك إلى WebP. إنها الصيغة التي تعتبرها Google المعيار الحديث لصور الويب، ولذلك أسباب وجيهة.
ماذا يعني اسم WebP؟
WebP صيغة صور طوّرتها Google وأطلقتها في 2010. والاسم مركّب من Web + P اختصارًا لكلمة Picture أي صورة. وقد وُلدت الصيغة بهدف واضح: ضغط أقوى من ضغط JPG وPNG لتخفيف وزن صفحات الويب دون التنازل عن الجودة البصرية.
وخلافًا لـ JPG التي لا تدعم إلا الضغط مع فقدان، وPNG التي لا تدعم إلا الضغط بلا فقدان، تدعم WebP نمطَي الضغط معًا — مع فقدان وبلا فقدان — إضافةً إلى الشفافية بقناة ألفا والصور المتحركة. فهي عمليًّا صيغة واحدة تقوم بدور JPG وPNG وGIF في ملف واحد.
كيف تعمل صيغة WebP؟
يعتمد نمط WebP مع الفقدان على مرمّز الفيديو VP8 الذي طوّرته Google أيضًا، ويستخدم تقنية تُسمّى التنبؤ بالمربّعات: فبدل تخزين كل بكسل على حدة، تتنبّأ الخوارزمية بقيمة كل مربّع من البكسلات اعتمادًا على المربّعات المجاورة، ثم تخزّن الفرق بين التنبؤ والقيمة الحقيقية فقط. وكلما صغر هذا الفرق صغر حجم الملف.
أما نمط WebP بلا فقدان فيستخدم مجموعة تقنيات خاصة به، منها التنبؤ المكاني وتحويل الألوان وضغط الإنتروبيا بخوارزمية LZ77 مع ترميز هوفمان. والنتيجة ملف بلا فقدان أصغر بفارق واضح من نظيره بصيغة PNG: أصغر بنحو 26% في المتوسط للمحتوى نفسه.
هل ملفات WebP أصغر فعلًا من JPG وPNG؟
نعم، والفارق معتبر. وفق بيانات Google نفسها:
| المقارنة | متوسط انخفاض الحجم |
|---|---|
| WebP مع فقدان مقابل JPG (بالجودة البصرية نفسها) | أصغر بنسبة 25–35% |
| WebP بلا فقدان مقابل PNG (بالجودة نفسها) | أصغر بنحو 26% |
| WebP الشفافة مقابل PNG | أصغر بنحو 22% |
عمليًّا يعني هذا أن متجرًا إلكترونيًّا فيه 500 صورة منتج بصيغة JPG يمكنه تقليص الحجم الكلي لصوره بمقدار الثلث بمجرّد التحويل إلى WebP، دون أي فقدان بصري يمكن ملاحظته.
💡 الأثر على السيو: تعتمد Google سرعة التحميل عاملًا من عوامل الترتيب. وصور WebP تخفّض مؤشر LCP (أكبر عنصر مرئي يُرسم) — وهو أحد أهم مؤشرات Core Web Vitals — وتساهم مباشرةً في مراتب أفضل في نتائج البحث.
ما مزايا صيغة WebP؟
- ملفات أصغر بالجودة نفسها: في نمط الفقدان وفي نمط بلا فقدان على حدّ سواء، تتفوّق WebP على JPG وPNG في كفاءة الضغط.
- دعم الشفافية: مثل PNG تمامًا، تدعم WebP قناة ألفا كاملة بـ 256 مستوى من العتامة، لكن بحجم ملف أصغر.
- دعم الحركة: تحلّ WebP المتحركة مكان صور GIF بملفات أصغر بكثير وجودة لون أعلى، إذ تقتصر GIF على 256 لونًا بينما تدعم WebP ملايين الألوان.
- نمطان في صيغة واحدة: صيغة واحدة تكفي لكل الحالات — الصور الفوتوغرافية والشعارات والأيقونات والصور المتحركة.
- دعم البيانات الوصفية: تدعم WebP بيانات EXIF وXMP، فتحفظ معلومات الكاميرا والموقع وحقوق النشر.
- دعم أصلي في كل المتصفحات الحديثة: تدعم WebP متصفحات Chrome وFirefox وSafari وEdge وOpera منذ 2020.
ما حدود صيغة WebP؟
- توافق محدود خارج الويب: كثير من برامج تحرير الصور القديمة وتطبيقات العرض والأنظمة القديمة لا تتعرّف على الصيغة أصلًا. ويحتاج Windows 10 وما قبله إلى مرمّز إضافي لعرض ملفات WebP في مستكشف الملفات.
- غير مقبولة في بعض المنصات: تطبيقات مثل واتساب وبعض أدوات التسويق بالبريد الإلكتروني لا تقبل رفع ملفات WebP بعد، وفي هذه الحالات تبقى JPG أو PNG ضرورية.
- تحرير أضيق: قليل من البرامج الاحترافية يدعم WebP دعمًا كاملًا في التحرير. والأفضل في سياق العمل التحريري أن تحفظ الأصول بصيغة RAW أو TIFF أو PSD، ولا تصدّر إلى WebP إلا في النسخة النهائية.
- لا دعم في البريد الإلكتروني: برامج مثل Outlook وApple Mail لا تعرض ملفات WebP. لصور البريد الإلكتروني استخدم JPG أو PNG.
WebP وJPG وPNG وSVG — مقارنة كاملة
| الخصائص | WebP | JPG | PNG | SVG |
|---|---|---|---|---|
| الضغط | مع فقدان وبلا فقدان | مع فقدان | بلا فقدان | متجهية |
| الشفافية | نعم | لا | نعم | نعم |
| الحركة | نعم | لا | لا* | نعم |
| الأنسب للصور الفوتوغرافية | نعم | نعم | لا | لا |
| الأنسب للشعارات والأيقونات | نعم | لا | نعم | نعم |
| قابلة للتكبير بلا فقدان | لا | لا | لا | نعم |
| حجم الملف | صغير جدًّا | صغير | متوسط إلى كبير | صغير جدًّا |
| الدعم الشامل | المتصفحات الحديثة | شامل | شامل | المتصفحات الحديثة |
* صيغة PNG المتحركة (APNG) موجودة، لكن دعمها محدود.
متى تستخدم WebP؟
WebP هي الخيار الأفضل للغالبية العظمى من الصور التي تُعرض في المواقع وتطبيقات الويب الحديثة:
- صور المنتجات في المتاجر الإلكترونية: الجودة نفسها التي تحصل عليها من JPG، لكن بوزن أقل بنسبة 25–35% — تحميل أسرع دون تنازل عن الجودة.
- صور البانرات والواجهات: حيث يؤثّر وزن الصورة تأثيرًا مباشرًا في مؤشر LCP وفي تجربة المستخدم.
- الشعارات والأيقونات الشفافة: تحلّ مكان PNG بحجم أصغر ودعم كامل لقناة الألفا.
- صور المدونات ومعارض الأعمال: وزن أقل وجودة بصرية مماثلة وأداء أفضل في PageSpeed.
- بديل لصور GIF المتحركة: ملفات WebP المتحركة أصغر بكثير وجودة ألوانها أعلى بكثير من GIF.
تجنّب WebP في الصور المرسلة بالبريد الإلكتروني، وفي الرفع إلى المنصات التي لا تقبل الصيغة، وفي ملفات العمل التي ستُحرَّر لاحقًا — احتفظ في هذه الحالات بـ JPG أو PNG.
حوّل صورك إلى WebP الآن
خفّض وزن صورك بنسبة تصل إلى 35% دون فقدان بصري. حوّل ملفات JPG وPNG إلى WebP مجانًا، مباشرةً داخل المتصفح.
حوّل إلى WebPكيف تستخدم WebP مع بديل احتياطي للمتصفحات القديمة؟
مع أن كل المتصفحات الحديثة تدعم WebP، فمن الممارسات الجيدة أن توفّر بديلًا احتياطيًّا بصيغة JPG أو PNG لضمان التوافق. وفي HTML يتحقّق ذلك بوسم <picture>:
بهذه الطريقة تحمّل المتصفحات التي تدعم WebP الملف الأصغر، وتحمّل البقية ملف JPG أو PNG تلقائيًّا كبديل. وهذه هي الاستراتيجية التي توصي بها Google للمواقع التي تحتاج توافقًا واسعًا.