PNG to WebP: دليل تحويل وضغط صور PNG

آخر تحديث: June 27, 2026

يُعد PNG التنسيق الأمثل للرسومات الحادة والشفافية، لكن ملفاته كبيرة جدًا — خاصةً لأي شيء فوتوغرافي. تحويل PNG إلى WebP يحافظ على الحدة وقناة ألفا (alpha channel) مع تقليل البايتات بشكل كبير. يكمن التحدي في اختيار ما إذا كان الـ WebP غير فاقد للبيانات (lossless) أو فاقد لها (lossy)، لأن الوضع الصحيح يعتمد على محتوى الصورة. يغطي هذا الدليل كليهما، مع أحجام مقاسة فعلية.

إجابة سريعة: هل يجب عليك تحويل PNG إلى WebP؟

نعم لصور الويب — يحافظ WebP على شفافية ووضوح PNG بجزء بسيط من الحجم. اختر الوضع بناءً على المحتوى:

لصورة واحدة، استخدم Image Converter؛ وللمجموعات (batches)، استخدم cwebp. القرار المتعلق بالتنسيق وراء هذا الأمر موجود في image formats explained.

كم يوفر تحويل PNG إلى WebP؟

يعتمد ذلك بالكامل على وضع WebP الذي تختاره، لأن PNG غير فاقد للبيانات والمقارنة ليست بين تفاح وتفاح.

هناك استنتاجان صادقان من هذه الأرقام. أولاً، WebP غير فاقد للبيانات للصورة الفوتوغرافية لا يزال كبيرًا (568 KB) — لأن الترميز غير الفاقد للبيانات لا يمكنه التخلص من الضوضاء في الصورة. إذا كان المحتوى صورة فوتوغرافية، فيجب أن يكون WebP فاقداً للبيانات، وليس غير فاقد له. ثانيًا، يتألق WebP غير فاقد للبيانات على الرسوم البيانية المسطحة: بالنسبة لقطات الشاشة وفن واجهة المستخدم (UI)، عادةً ما يكون أصغر بنسبة 20–30% من PNG بنفس البكسلات. طابق الوضع مع المحتوى.

يُظهر نفس المصدر عبر التنسيقات الأربعة أين يقع PNG نسبة إلى البدائل:

ما هي الصور التي يجب أن تبقى بصيغة PNG؟

بعض الصور لا ينبغي تحويلها على الإطلاق. احتفظ بـ PNG عندما يكون التصميم عبارة عن شعار أو أيقونة يمكن أن تكون SVG بدلاً منه (الناقل أقصر وأكثر حدة)، أو عندما تقوم بالتسليم إلى نظام يتطلب PNG تحديدًا — بعض مسارات الطباعة، وبعض المحررات القديمة، ومعظم تبادلات أدوات التصميم تتوقع PNG. بالنسبة لأيقونة صغيرة واحدة (أقل من ~3 KB)، فإن التحويل لا يستحق تعقيد المسار؛ اتركه كـ PNG. قاعدة القرار هي نفسها الموجودة في image formats explained: حول PNG إلى WebP عندما تهم البايتات ويكون الوجهة متصفح ويب، واحتفظ بـ PNG عندما تكون التوافقية أو البديل المتجه أكثر أهمية.

الطريقة 1: محول المتصفح (Browser converter)

لصورة واحدة، استخدم Imagic AI Image Converter: قم بتحميل PNG، واختر WebP، وحدد "غير فاقد للبيانات" للرسومات أو الجودة ~80 للصور الفوتوغرافية، ثم قم بالتنزيل. يعتبر Squoosh جيدًا لمقارنة الوضع غير الفاقد مقابل الفاقد جنبًا إلى جنب قبل الالتزام.

الطريقة 2: سطر أوامر cwebp (cwebp command line)

## WebP غير فاقد للبيانات (الأفضل للرسومات، لقطات الشاشة، النصوص الحادة، واجهة المستخدم الشفافة)
cwebp -lossless input.png -o output.webp

## WebP فاقد للبيانات (الأفضل إذا كانت PNG في الواقع صورة فوتوغرافية)
cwebp -q 80 input.png -o output.webp

## مجلد من ملفات PNG، غير فاقدة البيانات، بالتوازي
mkdir -p out
ls *.png | xargs -P 4 -I {} cwebp -lossless {} -o out/{}.webp

يُعد -lossless العلامة الأساسية — بدونه، يضبط cwebp افتراضيًا على الوضع الفاقد للبيانات، مما يؤدي إلى ضبابية الحواف الرفيعة. مرر دائمًا -lossless للرسومات ولقطات الشاشة.

الطريقة 3: Python (Pillow)

from PIL import Image
from pathlib import Path

def png_to_webp(src: Path, dest: Path, lossless: bool = True, quality: int = 80):
    with Image.open(src) as img:
        img.save(dest, "WebP", lossless=lossless, quality=0 if lossless else quality, method=6)

for f in Path("assets").glob("*.png"):
    # غير فاقد للبيانات للرسومات الحادة؛ قم بالتبديل إلى lossless=False للصور الفوتوغرافية PNG
    png_to_webp(f, Path("out") / f"{f.stem}.webp", lossless=True)

عندما تكون lossless=True، يتم تجاهل قيمة quality؛ وعندما يكون فاقدًا للبيانات (lossy)، اضبطها على ~80 للصور الفوتوغرافية.

هل يحافظ WebP على شفافية PNG؟

نعم. يدعم WebP قناة ألفا كاملة في كل من الوضعين الفاقد وغير الفاقد للبيانات، لذا تصبح صورة PNG الشفافة إلى WebP شفاف دون أي عمل إضافي. هذا هو السبب الرئيسي لتحويل أصول واجهة المستخدم (UI) وقصّات المنتجات: أنت تحتفظ بالشفافية وتفقد معظم البايتات. لمزيد من التفاصيل حول الشفافية، راجع how to make transparent images.

كيف تقدم WebP مع احتياطي PNG؟

دعم WebP يبلغ حوالي 98%، ولكن احتفظ باحتياطي PNG للعملاء القدامى والبريد الإلكتروني:

<picture>
  <source srcset="/img/icon.webp" type="image/webp">
  <img src="/img/icon.png" alt="Description" width="200" height="200" loading="lazy">
</picture>

يختار المتصفح أول نوع يدعمه؛ ويكون <img بصيغة PNG هو الاحتياطي النهائي. بالنسبة للرسومات الحادة، احجز width/height حتى لا يتغير التخطيط. راجع WebP converter guide للحصول على نمط الاحتياطي الكامل بما في ذلك AVIF.

متى يكون تحويل PNG إلى WebP خطأ؟

• البريد الإلكتروني. تتجاهل العديد من عملاء البريد الإلكتروني WebP. احتفظ بـ PNG (أو JPEG) للبريد الإلكتروني.
• عندما تحتاج إلى JPEG بدلاً من ذلك. إذا كانت PNG صورة فوتوغرافية لسوق إلكتروني يقبل JPEG فقط، قم بالتحويل إلى JPEG، وليس WebP. راجع WebP to JPG.
• المتصفحات المضمنة القديمة التي لا تدعم WebP — على الرغم من أن احتياطي <picture> يغطي ذلك.
• عندما تكون PNG صغيرة بالفعل. أيقونة بحجم 2 KB تكسب القليل من التحويل؛ التكلفة التشغيلية ليست تستحق العناء.

الأخطاء الشائعة

• استخدام WebP فاقد للبيانات للرسومات الحادة. يسبب الوضع الفاقد ضبابية للحواف والنصوص الرفيعة. استخدم -lossless لقطات الشاشة وواجهات المستخدم (UI).
• استخدام WebP غير فاقد للبيانات للصور الفوتوغرافية. يبقى كبيرًا لأنه لا يمكن أن يتخلص من الضوضاء الفوتوغرافية. استخدم الوضع الفاقد للبيانات.
• تجاهل احتياطي PNG. يحتاج المتصفحات القديمة والبريد الإلكتروني إلى <img بصيغة PNG.
• نسيان تغيير الحجم أولاً. WebP بحجم 4000px لا يزال تنزيلاً بحجم 4000px، بغض النظر عن التنسيق.
• التعامل مع PNG كتنسيق للصور الفوتوغرافية. إذا كانت الصورة فوتوغرافية، فمن المحتمل أنها كانت JPEG/RAW في البداية — قم بالتحويل من المصدر الصحيح.

الأسئلة المتكررة

كم يوفر تحويل PNG إلى WebP؟

للمحتوى الفوتوغرافي، أصغر بنسبة 25 إلى 35 بالمائة بنفس الجودة؛ وللرسومات المسطحة ذات الشفافية، غالبًا ما يكون أكثر. يدعم WebP كلًا من الوضعين الفاقد وغير الفاقد للبيانات بالإضافة إلى قناة ألفا، لذا يغطي ما يفعله PNG بحجم أصغر.

هل يجب أن تصبح كل PNG بصيغة WebP؟

لتسليم الويب، نعم، مع احتياطي PNG للمتصفحات القديمة جدًا. احتفظ بنسخة Master من PNG إذا كنت قد تعيد التحرير، لأن WebP فاقد للبيانات هو جيل ضغط. قم بتقديم WebP عبر عنصر <picture> مع احتياطي PNG.

هل يدعم WebP الشفافية؟

نعم — يدعم WebP قناة ألفا كاملة، لذا يتم تحويل صور PNG الشفافة بشكل نظيف. هذا هو السبب الرئيسي لتفضيل WebP على JPEG للرسومات ذات الشفافية. راجع transparent images guide.

ما هو التحويل عبر سطر الأوامر؟

cwebp -q 80 input.png -o output.webp. تحدد العلامة -q الجودة (80 هي القيمة الافتراضية للويب). لغير فاقد البيانات، استخدم -lossless. قم بالدفعة باستخدام حلقة shell أو ImageMagick. راجع WebP converter guide.

هل يدعم WebP الرسوم المتحركة؟

نعم — يدعم WebP الصور المتحركة، وهي أصغر من ملفات GIF المتحركة المكافئة. للحلقات القصيرة، يعد WebP المتحرك بديلاً عصريًا لـ GIF. للرسوم المتحركة الأطول، لا يزال الفيديو (MP4) أصغر وأفضل.

هل يجب أن أحوّل PNG إلى WebP فاقد البيانات أم غير فاقد للبيانات؟

فاقد للبيانات للصور الفوتوغرافية (أصغر بكثير، فقدان غير مرئي عند جودة 80)؛ وغير فاقد للبيانات للرسومات والنصوص والنسخ الرئيسية حيث يجب أن يكون كل بكسل دقيقًا. يدعم WebP كليهما. الخطأ الشائع هو تحويل شعار بصيغة فاقدة للبيانات، مما يضيف تشوهات إلى الحواف الحادة — احتفظ بالرسومات غير فاقدة للبيانات، وحوّل الصور الفوتوغرافية بوضع فقدان البيانات.

ما هي علامة جودة cwebp؟

تحدد العلامة -q الجودة الفاقدة للبيانات على مقياس من 0 إلى 100 — و80 هو الافتراضي للويب (فقدان غير مرئي، يقارب ربع بايتات الجودة 100). استخدم -lossless بدلاً من -q للرسومات حيث يجب أن يكون كل بكسل دقيقًا. تعني الجودة الأعلى ملفًا أكبر مع عوائد مرئية متناقصة؛ و80 هي النقطة المثالية العملية لتسليم الصور الفوتوغرافية عبر الويب.

هل يسرّع تحويل PNG إلى WebP موقعي؟

نعم، بشكل قابل للقياس — WebP أصغر بنسبة 25 إلى 35 بالمائة من PNG لنفس المحتوى، لذا فإن الصفحات التي تحتوي على العديد من الرسوم البيانية يتم تحميلها بشكل أسرع ويتحسن LCP. يتراكم التوفير عبر صفحة بها عشرات الأيقونات أو الرسوم البيانية. قم بتقديم WebP مع احتياطي PNG حتى تعرض المتصفحات القديمة الصور، وتحصل على السرعة دون فقدان التوافقية.

حقوق صور (Image credits)

• مقارنة PNG إلى WebP ومخطط أشرطة الحجم — تم إنشاؤه بواسطة المؤلف من صورة فوتوغرافية بأسلوب التجارة الإلكترونية (Pexels #16675632، صورة بواسطة Mikael Blomkvist) لإظهار التوفير المقاس الفعلي لـ PNG إلى WebP.