المستوى: مبتدئ — ما تحتاجش تعرف غير إنك بتتعامل مع صور على موقعك وعندك صلاحية تعدّل ملف NGINX أو إعدادات السيرفر.
WebP للمبتدئ: وفّر 60% من حجم صور موقعك في 5 دقائق
لو الصفحة الرئيسية فيها 12 صورة JPEG بمتوسط 400KB للصورة، الزائر بيحمّل 4.8MB كل زيارة. تحويل نفس الصور لـ WebP بينزّل المجموع لـ 1.9MB، يعني وفّرت 60% bandwidth بسطرين أمر و 3 سطور NGINX، من غير ما القارئ يحس فرق في الجودة.
المشكلة باختصار
الصور بتمثّل في المتوسط 50% من حجم أي صفحة ويب حديثة، حسب تقرير HTTP Archive Web Almanac 2024. لو لسه بتخدم JPEG و PNG بس، إنت بتحمّل الزائر بيانات أكثر بـ 25 إلى 35% من اللي محتاجه فعلاً، وده بيظهر مباشرة في زمن التحميل على شبكات 3G و 4G، وفي فاتورة الـ CDN آخر الشهر.
الفكرة بمثال بسيط: شنطة السفر
تخيل إنك بتسافر ومعاك 10 قمصان. لو حطيت كل قميص متفرد في الشنطة هيشغّل مساحة كبيرة. لو طويتهم بطريقة منظّمة هتاخد نص المساحة من غير ما تتخلّى عن أي قميص. WebP هو الطريقة المنظّمة دي للصور: نفس الصورة، نفس البيكسلات اللي عينك بتشوفها، بس متخزّنة بشكل أذكى.
الفرق إن JPEG بيتبع طريقة طي قديمة من 1992، و WebP بيستخدم خوارزميات حديثة من 2010 طوّرتها Google بناءً على ضغط الفيديو في codec اسمه VP8.
التعريف العلمي
WebP هو صيغة صور طوّرتها Google في 2010 ونشرتها كمعيار مفتوح. بتعتمد على نفس تقنيات ضغط الـ keyframes في codec VP8، وبتدعم نوعين من الضغط:
- Lossy: ضغط مع فقدان بسيط للبيانات. بيوفّر 25–34% أصغر من JPEG على نفس مستوى الجودة المرئية، حسب القياسات الرسمية لـ Google على عيّنة 1 مليون صورة.
- Lossless: ضغط بدون فقدان. بيوفّر 26% أصغر من PNG في المتوسط.
- Animation: بيدعم صور متحركة بحجم أصغر من GIF بنسبة 64% في معظم الحالات.
كل المتصفحات الحديثة بتدعمه: Chrome من 2014، Firefox من 2019، Safari من iOS 14 (سبتمبر 2020). نسبة الدعم العالمية الآن أكثر من 96% حسب Can I Use.
الخطوة 1: تحويل صورة واحدة
أداة cwebp هي الأداة الرسمية من Google. ثبّتها على Ubuntu بأمر واحد:
sudo apt install webp
cwebp -q 80 photo.jpg -o photo.webpالرقم 80 هو مستوى الجودة من 0 لـ 100. القيمة 80 هي التوصية الرسمية لـ Google للصور على الويب: فرق الجودة عن الأصل غير محسوس بالعين، والحجم أصغر بـ 30% في المتوسط مقارنة بـ JPEG عند نفس مستوى الجودة المرئية.
الخطوة 2: تحويل مجلد كامل دفعة واحدة
لو عندك 200 صورة في مجلد ، السطر ده بيحوّلهم كلهم:
