كيفية تحويل الصور إلى WebP ولماذا يستحق الأمر

إن سبق أن اختبرت موقعك في Google PageSpeed Insights وظهر لك التنبيه «قدّم الصور بصيغ الجيل الأحدث»، فهذا بالضبط ما تطلبه Google: تحويل صور JPG وPNG لديك إلى WebP. وهو من أشد التدخلات أثرًا في أداء الموقع، ومن أسهلها تنفيذًا في الوقت نفسه.

لماذا تحوّل إلى WebP؟

WebP صيغة طوّرتها Google وأطلقتها عام 2010، مصمّمة للويب تحديدًا. تعتمد خوارزميات ضغط أحدث من JPG وPNG، وتقدّم عند الجودة المرئية نفسها:

• وزنًا أقل من JPG بنسبة 25 إلى 35% في وضع الضغط مع الفقدان (lossy)
• وزنًا أقل من PNG بنسبة 20 إلى 30% في وضع الضغط بلا فقدان (lossless)
• دعم الشفافية (قناة ألفا) — بخلاف JPG التي لا تدعمها
• دعم الصور المتحركة — بخلاف PNG التي لا تدعمها أصلًا

والأثر ملموس عمليًا: معرض منتجات في متجر إلكتروني فيه 20 صورة بحجم 300 كيلوبايت لكل منها بصيغة JPG (6 ميغابايت إجمالًا) قد ينزل إلى 4 ميغابايت بصيغة WebP بالجودة المرئية نفسها، أي انخفاض 33% في وزن الصفحة. وهذا يعني لدى Google مؤشر LCP أسرع، ودرجة أعلى في PageSpeed، وفرصة لتحسّن الترتيب.

متى لا تستخدم WebP

رغم أنها أفضل صيغة للويب الحديث، ثمة حالات لا تكون فيها WebP الخيار الصحيح:

• التسويق عبر البريد الإلكتروني: دعم WebP متذبذب في برامج البريد مثل Outlook وApple Mail. وفي رسائل HTML تبقى JPG وPNG الخيار الأأمن.
• الطباعة: لا تتعامل المطابع وبرامج الطباعة التقليدية مع WebP. وللملفات المعدّة للطباعة استخدم JPG عالية الجودة أو PNG.
• منصات تفرض قيودًا على الصيغة: لا يقبل YouTube صيغة WebP في رفع الصور المصغّرة (بل JPG وPNG). وبعض نماذج الأنظمة القديمة تشترط JPG. تحقّق من الصيغة المقبولة قبل التحويل.
• ملفات يفتحها أي شخص على حاسوبه: من ينقر على رابط تنزيل ويحاول فتح الملف بعارض Windows الافتراضي قد يواجه مشكلة مع WebP في الإصدارات القديمة من النظام.

الطريقة 1 — التحويل أونلاين (الأسرع وبلا تثبيت)

لتحويل صور متفرقة، أو حين تريد نتيجة سريعة بلا إعدادات، يبقى المحوّل على الإنترنت أقصر طريق. فـ محوّل الصور من ImageTools يحوّل JPG وPNG وصيغًا أخرى إلى WebP داخل المتصفح مباشرة، من دون إرسال الملفات إلى خوادم خارجية.

1. افتح محوّل الصور.
2. اختر الصور أو اسحبها إلى منطقة الرفع.
3. اختر WebP صيغةً للإخراج.
4. نزّل الصور المحوّلة واحدةً واحدة، أو في ملف ZIP إن كانت متعددة.

الطريقة 2 — WordPress (تلقائيًا لكامل الموقع)

في مواقع WordPress، الأسلوب الأكفأ هو إضافة تحوّل الصور وتقدّم WebP تلقائيًا، من دون إعادة معالجة كل صورة يدويًا.

WordPress 6.1 فما فوق (تحويل أصلي)

منذ الإصدار 6.1 يحوّل WordPress الصور إلى WebP تلقائيًا أثناء الرفع، بشرط أن يدعم الخادم مكتبة libwebp (وهو متوافر في أغلب الخوادم الحديثة التي تعمل بـ PHP 8 فأحدث). لا يلزمك فعل شيء: ينشئ WordPress نسخ WebP ويقدّم الصيغة المناسبة لكل متصفح تلقائيًا.

وللتأكد من أنه مفعّل، اذهب إلى الإعدادات → الوسائط وابحث عن خيار التحويل إلى WebP. فإن لم يكن متاحًا فالخادم لا يدعمه، وعندها فكّر في إضافة.

بالإضافات (للإصدارات الأقدم أو لتحكم أوسع)

أكثر الإضافات استخدامًا للتحويل إلى WebP في WordPress:

• ShortPixel Image Optimizer — يحوّل الصور الجديدة عند الرفع، ويتيح إعادة معالجة المكتبة القائمة كلها. مجاني حتى 100 صورة شهريًا.
• Imagify — واجهة بسيطة، وتحويل تلقائي، وخيار للتحسين على دفعات. مع خطة مجانية.
• WebP Express — إضافة مخصصة لـ WebP وحدها، تحوّل الصور وتضبط قواعد الخادم تلقائيًا.

الطريقة 3 — سطر الأوامر مع cwebp (للمطوّرين)

توزّع Google مجانًا أداة cwebp — المرمّز الرسمي لـ WebP — للتحويل من الطرفية. وهي أسرع طريقة لتحويل دفعات كبيرة من الصور على خادم أو داخل مسار بناء.

التثبيت

# Ubuntu / Debian
sudo apt-get install webp

# macOS (Homebrew)
brew install webp

# Windows — download the binary at: https://developers.google.com/speed/webp/download

تحويل أساسي

# Convert a single JPG to WebP at quality 80
cwebp -q 80 photo.jpg -o photo.webp

# Convert PNG to lossless WebP
cwebp -lossless logo.png -o logo.webp

# Convert every JPG in a folder (Bash)
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

يتحكم المعامل -q في الجودة (من 0 إلى 100). وفي الويب تعطي القيم بين 75 و85 أفضل توازن بين الجودة المرئية وحجم الملف. واستخدم -lossless مع الصور التي تحتاج إلى ضغط بلا فقدان (الشعارات ولقطات الشاشة التي فيها نص).

الطريقة 4 — Node.js مع sharp (لمسارات البناء)

في المشاريع القائمة على Node.js — مواقع Next.js أو Gatsby أو Nuxt أو أي بناء آلي — تبقى مكتبة sharp الخيار الأكفأ للتحويل إلى WebP داخل المسار:

// npm install sharp

const sharp = require('sharp');

// Convert JPG to WebP at quality 80
sharp('photo.jpg')
  .webp({ quality: 80 })
  .toFile('photo.webp');

// Convert PNG to lossless WebP
sharp('logo.png')
  .webp({ lossless: true })
  .toFile('logo.webp');

// Convert every file in a folder
const fs = require('fs');
const path = require('path');

fs.readdirSync('./images')
  .filter(f => /\.(jpg|jpeg|png)$/i.test(f))
  .forEach(file => {
    const input = path.join('./images', file);
    const output = path.join('./images', file.replace(/\.[^.]+$/, '.webp'));
    sharp(input).webp({ quality: 80 }).toFile(output);
  });

تستخدم sharp مكتبة libvips الأصلية، وهي أسرع بكثير من الحلول المكتوبة بـ JavaScript وحدها — مثالية لتوليد نسخ WebP أثناء بناء المواقع الساكنة.

كيف تنفّذ WebP مع بديل احتياطي للمتصفحات القديمة

رغم أن توافق WebP في 2026 يتجاوز 97%، تبقى سياقات يلزم فيها بديل احتياطي: أنظمة مؤسسية تعمل بـ IE11، أو أجهزة قديمة جدًا، أو مجرد الرغبة في أقصى ضمان للتوافق.

والحل الصحيح هو وسم HTML <picture>، الذي يتيح إعلان مصادر بديلة للصورة مرتّبةً حسب الأفضلية:

<!-- The browser uses WebP when supported, otherwise JPG -->
<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Photo description" width="800" height="600">
</picture>

<!-- With multiple sizes for Retina screens -->
<picture>
  <source
    srcset="photo-800.webp 800w, photo-1600.webp 1600w"
    type="image/webp">
  <source
    srcset="photo-800.jpg 800w, photo-1600.jpg 1600w"
    type="image/jpeg">
  <img src="photo-800.jpg" alt="Photo description"
    width="800" height="600" loading="lazy">
</picture>

يقيّم المتصفح المصادر بالترتيب المعلن: فإن كان يدعم WebP استخدم <source> ذا type="image/webp". وإن لم يدعمه رجع إلى ملف JPG في <img>. ووسم <img> في النهاية إلزامي، فهو الذي يحدّد altوالأبعاد والسلوك الافتراضي.

ضبط الخادم ليقدّم WebP تلقائيًا (Apache)

وثمة بديل عن <picture> وهو ضبط الخادم ليكتشف قبول المتصفح لـ WebP ويقدّم النسخة الصحيحة تلقائيًا. وفي Apache أضف إلى ملف .htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Serve .webp when it exists and the browser accepts it
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}\.webp -f
  RewriteRule ^ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

بهذا الضبط يكفي أن توجد ملفات .webp إلى جانب الأصول في المجلد نفسه. ويكتشف Apache قبول المتصفح لـ WebP من ترويسة Accept ويقدّم النسخة الصحيحة من دون أي تغيير في HTML.

التحقق من النتيجة في PageSpeed

بعد تنفيذ WebP، شغّل Google PageSpeed Insights (pagespeed.web.dev) على رابط موقعك. والتنبيه «قدّم الصور بصيغ الجيل الأحدث» ينبغي أن يختفي أو يتراجع كثيرًا. وفي لوحة الفرص سترى المكسب المقدَّر بالكيلوبايت لكل صورة لم تُحوَّل بعد.

وثمة طريقة أخرى: افتح أدوات مطوّري Chrome (F12)، وانتقل إلى تبويب Network، ورشّح بـ «Img»، ثم انظر إلى عمود «Type» في الصور المحمّلة. فإن ظهر webpفالتحويل يعمل.

ما مستوى الجودة الذي تختاره عند التحويل؟

تتبع جودة WebP منطق JPG نفسه: القيم الأعلى تحفظ تفاصيل أكثر لكنها تنتج ملفات أكبر. والفرق أن WebP تحتاج عادةً، للجودة المرئية نفسها، إلى قيمة أقل من نظيرتها في JPG بنحو 10 إلى 15 نقطة.

الأسئلة الشائعة