اي صيغة صورة افضل لووردبريس؟ تجربة PNG وJPEG وWebP على نفس الصورة

اختيار صيغة الصورة في ووردبريس مش مسابقة بين اسماء الملفات. الصورة الصح هي اللي تعطي شكل مقبول بحجم مناسب، وتوصل للمتصفح بدون ما تكسر الشفافية او التوافق. عشان نشوف الفرق على ارض الواقع، اخذنا نفس الرسم الاصلي وحفظناه ثلاث مرات: PNG، وJPEG بجودة 82، وWebP بجودة 82. ما غيرنا الابعاد ولا الالوان بين النسخ.

هذه التجربة لا تقول ان WebP يفوز دائما. نوع الصورة يغير النتيجة كثيرا: صورة فوتوغرافية فيها تفاصيل وضوضاء ممكن تضغط بشكل مختلف عن رسم واجهة بخلفية ثابتة. لذلك قسنا الملفات الثلاثة فعليا، وفحصنا ان كل نسخة تفتح بنفس ابعاد 1600 في 900، ثم شاهدناها بالحجم نفسه قبل اختيار التوصية.

طريقة القياس

وحدة الحجم المستخدمة هنا هي كيبيبايت (KiB)، وكل 1 KiB يساوي 1024 بايت. حسبنا الفروق والنسب من أحجام الملفات بالبايت، ثم قربنا النتائج إلى منزلتين عشريتين.

مصدر المقارنة كان رسما اصليا من تجربة سابقة، وليس صورة حملناها من موقع ثاني. فتحناه عبر محرر الصور في PHP، ثم صدرناه بصيغة PNG بجودة حفظ متوسطة، وبصيغة JPEG وWebP على جودة 82. استخدمنا نفس الجهاز ونفس الابعاد، وقرأنا حجم كل ملف بالبايت. بعدها فككنا الملفات الثلاثة مرة ثانية للتأكد ان القراءة نجحت وما في ملف تالف.

النتائج كانت واضحة: PNG حجمه 57,399 بايت، يعني 56.05 KiB. JPEG حجمه 96,763 بايت، يعني 94.50 KiB. WebP حجمه 42,082 بايت، يعني 41.10 KiB. كل النسخ رجعت بأبعاد 1600 في 900، وكلها نجحت في الفتح. في هذا الرسم بالذات كان JPEG اكبر من PNG بنسبة 68.58 بالمئة، بينما WebP اصغر من PNG بنسبة 26.69 بالمئة واصغر من JPEG بنسبة 56.51 بالمئة.

فيديو توثيق التجربة الفعلية

هذا تسجيل شاشة صامت ومتواصل للاختبار وهو يحدث داخل بيئة محلية معزولة. تظهر الخطوات والنتائج الفعلية لحظة التنفيذ، من غير تركيب صور ثابتة.

نسخة PNG

PNG حافظ على الحواف والنصوص بشكل نظيف، وحجمه طلع اقل من JPEG في تجربتنا. هذا مش غريب عندما تكون الصورة فيها مساحات ثابتة او شفافية او عناصر واجهة. لو عندك لقطة شاشة لخطا ووردبريس، او شعار، او رسم فيه نص صغير، لا تحولها تلقائيا الى JPEG قبل ما تشوف الحجم والجودة.

نسخة JPEG

JPEG ممتاز غالبا للصور الفوتوغرافية، خصوصا لما تكون فيها تدرجات كثيرة وما تحتاج شفافية. لكن تحويل كل صورة الى JPEG مش قاعدة. في مصدرنا المسطح، خوارزمية JPEG انتجت ملفا اكبر، وقد تظهر حول النصوص حواف او تشويش اذا نزلت الجودة كثيرا. لو كان الملف اكبر من PNG بعد التحويل، ما في مكسب من التحويل لمجرد ان الاسم اشهر.

نسخة WebP

WebP فاز بالحجم في هذا الملف: وفر 14.96 KiB مقارنة بـ PNG، و53.40 KiB مقارنة بـ JPEG. عند عرض الصورة في مقال، هذا يقلل البايتات التي يحتاجها المتصفح، لكن المكسب الحقيقي يعتمد كمان على الابعاد التي تعرضها. صورة WebP ضخمة بعرض 4000 بكسل تظل ثقيلة حتى لو كانت الصيغة فعالة.

وثائق ووردبريس الرسمية عن الصور تذكر دعم WebP وفكرة انه قد يكون اصغر من صيغ اقدم، بينما توصي صفحة تحسين الاداء باختيار الصيغة والضغط المناسبين للمحتوى. لاحظ كلمة المناسبين: لا يوجد رقم جودة يصلح لكل صورة.

هل صارت الجودة متساوية؟

بالنظر الى النسخ الثلاث بالحجم نفسه، بقي النص في الرسم مقروءا ولم تظهر بقع واضحة في WebP عند جودة 82. هذا حكم بصري على هذه الصورة، وليس اختبارا مخبريا لكل تفاصيل اللون. الصور الفوتوغرافية قد تحتاج جودة مختلفة، والشفافية تحتاج صيغة تتعامل معها، وبعض الصور التي فيها نص دقيق جدا تستفيد من PNG او WebP lossless.

لا تقارن الحجم فقط. افتح النسخة الناتجة عند حجمها الفعلي، كبر منطقة فيها نص او وجه او خط رفيع، وشوف اذا ظهرت هالات او تكسير. بعد ذلك قارن الملف الذي سيرسله موقعك فعليا، لان ووردبريس قد ينشئ مقاسات متعددة ويدرج srcset حسب القالب. وثائق الصور المتجاوبة في ووردبريس تشرح ان المتصفح يقدر يختار المقاس المناسب بدلا من تحميل الاصل الكبير دائما.

اختيار عملي للموقع

1. احتفظ بنسخة اصلية غير مضغوطة خارج مجلد الرفع حتى تقدر تعيد التصدير بجودة ثانية.
2. اضبط الابعاد على اقصى عرض تحتاجه الصفحة. لا ترفع صورة 3000 بكسل لمكان يعرضها بعرض 800.
3. جرب WebP اولا للصور العامة اذا كان سير العمل والقالب يدعمانه، وتحقق من ظهورها فعليا على المتصفح.
4. استخدم PNG عندما تحتاج شفافية او نصا ورسما حادا، وقارن حجمه مع WebP قبل القرار.
5. استخدم JPEG للصور الفوتوغرافية غالبا، واضبط الجودة بعد تكبير منطقة التفاصيل وليس من رقم محفوظ.
6. افحص الصورة من جهاز هاتف حقيقي او محاكي متصفح، لان المشكلة قد تكون في الابعاد او التحميل الكسول لا في الصيغة وحدها.

ظهر سؤال قريب من هذا في نقاش حديث في مجتمع ووردبريس، وكانت الاجابات مختلفة بين WebP وAVIF والاحتفاظ بنسخ بديلة. اختلافهم منطقي: القرار يتغير حسب نوع الصورة، دعم الاستضافة، وطريقة النشر. نحن استخدمنا النقاش لاختيار المشكلة، اما الارقام هنا فمن تحويلاتنا وقياساتنا المحلية على نفس المصدر.

الخلاصة

في تجربتنا كان WebP الاصغر بحجم 41.10 KiB، ثم PNG بحجم 56.05، بينما JPEG بجودة 82 وصل الى 94.50. النتيجة لا تعني ان JPEG سيئ او ان PNG دائما اثقل. معناها انك لازم تقيس نفس الصورة، بنفس الابعاد، وتشوف الجودة قبل ما تعمم. للموقع، اجمع بين صيغة مناسبة، مقاس مناسب، وsrcset مضبوط، وبعدها راقب الصفحة الفعلية بدل الاكتفاء بامتداد الملف.

تصحيح بتاريخ 6 سبتمبر 2026: صححنا فرق الحجم إلى 14.96 KiB مقابل PNG و53.40 KiB مقابل JPEG، ونسبة التوفير مقابل JPEG إلى 56.51%، ووحدنا تسمية وحدة القياس. أحجام الملفات الأصلية والنتيجة العامة للمقارنة لم تتغير.