الدليل الكامل لتنسيقات الصور — متى تستخدم PNG أو WebP أو AVIF أو JPEG

لماذا يهم اختيار تنسيق الصورة

إحدى أسهل الطرق لتحسين أداء الموقع هي تحسين الصور. غالبا ما يشير Google PageSpeed Insights إلى توصية "Serve images in next-gen formats" ولسبب وجيه. فاختيارك لتنسيق الصورة يؤثر مباشرة في أوقات التحميل، ودرجات Core Web Vitals، وفي النهاية ترتيب نتائج البحث.

المقارنة الأساسية: التنسيقات الأربعة الرئيسية

JPEG (Joint Photographic Experts Group)

تاريخ الإصدار: 1992 | الضغط: مع فقدان البيانات | الشفافية: لا

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

استخدم JPEG من أجل: الصور القياسية، صور وسائل التواصل الاجتماعي، والحالات التي تتطلب توافقا عالميا

PNG (Portable Network Graphics)

تاريخ الإصدار: 1996 | الضغط: بلا فقدان للبيانات | الشفافية: نعم

يحافظ ضغط PNG بلا فقدان على كل بكسل — وهو مثالي للصور التي تحتاج إلى حواف حادة أو نصوص أو شفافية. التكلفة هي أحجام ملفات أكبر. فالصورة الفوتوغرافية بصيغة JPEG عند حفظها بصيغة PNG تكون عادة أكبر بمقدار 2-3 مرات.

استخدم PNG من أجل: الشعارات، لقطات واجهة المستخدم، الصور التي تحتوي على نص، والرسومات التي تتطلب خلفيات شفافة

WebP

تاريخ الإصدار: 2010 (Google) | الضغط: مع فقدان + بلا فقدان | الشفافية: نعم

صمم WebP ليحل محل JPEG وPNG معا. فهو يحقق أحجام ملفات أصغر بنسبة 25-35% من JPEG عند جودة بصرية مكافئة، ويدعم الشفافية — جامعا أفضل ما في التنسيقين. كما يتضمن دعما للرسوم المتحركة.

دعم المتصفحات: أكثر من 96% عالميا حتى عام 2025.

استخدم WebP من أجل: كل شيء تقريبا على المواقع الحديثة — الصور الفوتوغرافية، الرسومات، والصور ذات الشفافية

AVIF (AV1 Image File Format)

تاريخ الإصدار: 2019 | الضغط: مع فقدان + بلا فقدان | الشفافية: نعم

يمضي AVIF بالضغط إلى مستوى أبعد من WebP، إذ يحقق عادة ملفات أصغر بنسبة 50% من JPEG عند جودة مكافئة. كما يتعامل مع محتوى HDR (النطاق الديناميكي العالي) بشكل أفضل من أي تنسيق آخر. المقابل هو سرعة ترميز أبطأ وتوافق أقل قليلا مع المتصفحات.

دعم المتصفحات: نحو 92% عالميا حتى عام 2025.

استخدم AVIF من أجل: صور Hero، الصفحات عالية الزيارات حيث يكون أقصى ضغط مهما، والمشاريع التي تستخدم مسارات معالجة الصور وقت البناء

إطار اتخاذ القرار: أي تنسيق تستخدم؟

طرق تحويل مجانية

عبر الإنترنت (بدون تثبيت)

• Squoosh (squoosh.app) — أداة Google الخاصة؛ قارن التنسيقات جنبا إلى جنب
• Convertio — تحويل دفعي لعدة تنسيقات
• remove.bg + download as WebP — إزالة الخلفية مع التصدير إلى WebP في خطوة واحدة

سطر الأوامر

# WebP conversion (requires libwebp / cwebp)
cwebp -q 80 photo.jpg -o photo.webp

# AVIF conversion (requires ImageMagick 7+)
magick photo.jpg -quality 60 photo.avif

Next.js (تلقائي)

يتولى مكون next/image التفاوض تلقائيا على التنسيق الأمثل بناء على دعم المتصفح:

import Image from 'next/image'
<Image src="/photo.jpg" alt="Auto-optimized" width={800} height={600} />

المتصفحات التي تدعم AVIF تتلقى AVIF؛ والمتصفحات القادرة على WebP تتلقى WebP؛ وغيرها تتلقى JPEG — كل ذلك تلقائيا.

الأثر العملي: قبل وبعد

منشور مدونة نموذجي يحتوي على 5 صور مضمّنة، كانت محفوظة أصلا بصيغة JPEG:

• إجمالي وزن الصور: 2.1 MB
• بعد التحويل إلى WebP (جودة 80%): 1.25 MB (−40%)
• بعد التحويل إلى AVIF (جودة 70%): 0.85 MB (−60%)
• تحسن LCP (مقاس): 0.8s → 0.4s

الخلاصة

توقف عن اعتماد JPEG وPNG كخيار افتراضي لكل شيء. في عام 2026، يعد WebP الخيار الافتراضي الآمن لأكثر من 95% من حالات استخدام الويب. أما AVIF فيستحق الخطوة الإضافية للصفحات عالية الزيارات. ابدأ التحويل اليوم — فمكاسب الأداء وSEO فورية.