حوّل صور موقعك إلى WebP تلقائياً ووفّر 70% من حجمها

المستوى المطلوب: مبتدئ. لو بتعرف تفتح الطرفية (Terminal) وتنسخ أمر، تقدر تطبّق كل حاجة هنا.

لو صور موقعك بتتحمّل ببطء، غالباً السبب إنها JPEG أو PNG تقيلة. في نهاية المقال هيبقى عندك سكربت واحد بيحوّل أي صورة جديدة إلى WebP لوحده، ويوفّر حوالي 70% من الحجم من غير ما تفتح برنامج ولا تضغط زر.

المشكلة باختصار

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

يعني إيه WebP؟ نبدأ بمثال

تخيّل إنك بتبعت هدية في علبة. الـ JPEG علبة كبيرة بحشو كتير جوّاها. الـ WebP نفس الهدية بالظبط، بس في علبة أصغر ومترتبة كويس. الهدية (الصورة اللي بيشوفها الزائر) هي هي، لكن اللي بتشحنه على النت أخف بكتير.

علمياً: WebP صيغة صور طوّرتها جوجل، بتضغط الصورة بخوارزمية أذكى من JPEG وPNG. بتشيل تفاصيل مالهاش تأثير واضح على العين، فيقل حجم الملف بنسبة كبيرة مع الحفاظ على جودة مقبولة. بتدعم الضغط مع خسارة بسيطة (lossy) وبدون خسارة (lossless)، وكمان الشفافية زي PNG.

الحل: سكربت يحوّل تلقائياً

الأداة الرسمية للتحويل اسمها cwebp من جوجل. أول حاجة ثبّتها:

# على Ubuntu/Debian
sudo apt install webp

# على macOS
brew install webp

جرّب تحوّل صورة واحدة عشان تشوف الفرق بنفسك:

cwebp -q 80 photo.jpg -o photo.webp
ls -lh photo.jpg photo.webp

الرقم -q 80 معناه جودة 80 من 100. ده الرقم المتوازن: تقريباً محدش بيفرّق بصرياً، والحجم بينزل كتير.

نخلّيه تلقائي: يشتغل لوحده كل 5 دقائق

مش هنفضل نحوّل بإيدنا. هنحط سكربت بيمشي على مجلد الصور، ويحوّل أي حاجة لسه ماتحوّلتش. احفظ الملف ده باسم to-webp.sh:

#!/usr/bin/env bash
# يحوّل كل صورة جديدة في مجلد images إلى WebP
IMG_DIR="/var/www/site/images"

for file in "$IMG_DIR"/*.jpg "$IMG_DIR"/*.jpeg "$IMG_DIR"/*.png; do
  [ -e "$file" ] || continue
  out="${file%.*}.webp"
  # حوّل بس لو نسخة الـ webp مش موجودة
  if [ ! -f "$out" ]; then
    cwebp -q 80 "$file" -o "$out"
    echo "converted: $out"
  fi
done

خلّيه قابل للتنفيذ، ثم حطّه في cron يشتغل كل 5 دقائق:

chmod +x /var/www/site/to-webp.sh

# افتح جدول cron
crontab -e

# ضيف السطر ده
*/5 * * * * /var/www/site/to-webp.sh

كده أي صورة بترفعها على المجلد، هيتولّد لها نسخة WebP خلال 5 دقائق من غير أي تدخّل منك.

هل الرقم 70% حقيقي؟

سيناريو واقعي: متجر إلكتروني عنده 500 صورة منتج، متوسط حجم الصورة الواحدة 480 كيلوبايت بصيغة JPEG. بعد التحويل بجودة 80، متوسط الحجم بقى حوالي 140 كيلوبايت. يعني وفّرنا حوالي 71% لكل صورة، وحوالي 165 ميجابايت إجمالاً. لصفحة فيها 20 صورة، ده بيعني نزول حجم الصفحة من حوالي 9.6 ميجا لحوالي 2.8 ميجا. النسبة الفعلية بتفرق حسب نوع الصورة: صور فيها تفاصيل وألوان كتير بتوفّر أقل، والصور البسيطة بتوفّر أكتر.

الـ trade-off: بتكسب إيه وبتخسر إيه

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

متى لا تستخدم هذه الطريقة

لو موقعك كله على شبكة توزيع محتوى (CDN) زي Cloudflare بميزة Polish، الـ CDN بيحوّل الصور لـ WebP تلقائياً وانت في غنى عن السكربت. كمان لو صورك أيقونات بسيطة أو رسومات خطية، استخدم SVG، هيبقى أخف من WebP نفسه. وأخيراً لو الموقع صغير جداً وصوره قليلة وخفيفة أصلاً، التعب ده مش هيفرق معاك.

الخطوة التالية

حوّل صورة واحدة دلوقتي بالأمر cwebp -q 80 photo.jpg -o photo.webp وقارن الحجمين بـ ls -lh. لو الفرق عجبك، حط السكربت في cron على مجلد صور حقيقي وسيبه يشتغل. وخلّي بالك: عشان المتصفح يستخدم النسخة الجديدة، لازم تشير لها في كود الصفحة عبر وسم picture اللي بيقدّم WebP وبيرجع للـ JPEG للمتصفحات القديمة.

المصادر

• توثيق WebP الرسمي من جوجل: developers.google.com/speed/webp
• أداة cwebp ومعاملاتها: developers.google.com/speed/webp/docs/cwebp
• دعم المتصفحات لـ WebP (حوالي 97% عالمياً): caniuse.com/webp
• مقياس LCP وتأثير حجم الصور: web.dev/articles/optimize-lcp
• Cloudflare Polish لتحويل الصور تلقائياً: developers.cloudflare.com/images/polish