الدليل الشامل لصيغ الصور: PNG وJPG وWebP وAVIF وSVG

JPG / JPEG  Joint Photographic Experts Group

ابتكرت مجموعة Joint Photographic Experts Group صيغة JPG عام 1992 لضغط الصور الفوتوغرافية بكفاءة تحديداً. وتقسّم خوارزميتها الصورة إلى كتل قياس 8×8 بكسل، ثم تطبّق تحويل الجيب تمام المتقطّع (DCT) لتمثيل كل كتلة كتركيبة من الترددات، مع إسقاط الترددات عالية التغيّر التي تلتقطها العين البشرية بدرجة أقلّ. والنتيجة ضغط مع فقدان: جزء من البيانات الأصلية يُحذف نهائياً.

لماذا تنجح مع الصور الفوتوغرافية: لأن تدرّج الألوان في الصور الفوتوغرافية ناعم ومتّصل، وهو تحديداً نوع المعلومات التي تضغطها JPG بأعلى كفاءة. فصورة منظر طبيعي بصيغة JPG وجودة 80% قد تكون أصغر بعشر مرات من الملف نفسه دون ضغط، بفارق بصري لا يُلحظ على الشاشة.

أين تخفق: خوارزمية الكتل 8×8 تخلّف تشوّهات ظاهرة عند الحواف الحادّة والنصوص ومساحات اللون الموحّد. فشعار أسود على خلفية بيضاء بصيغة JPG سيُظهر بقعاً رمادية حول الحروف، وهي «تشوّهات JPEG» المعروفة. كما أن JPG لا تدعم قناة ألفا (الشفافية).

متى تستخدمها: الصور الفوتوغرافية للويب والطباعة والبريد، وصور المنتجات والبانرات وصور المدوّنات، وكل صورة كثيرة التدرّجات اللونية ولا تحتاج إلى شفافية.

متى تتجنّبها: الشعارات والأيقونات ولقطات الشاشة ذات النصوص والصور ذات الخلفية الشفافة والرسوم ذات الحواف الحادّة والصور التي ستُعاد تحريرها وحفظها مرات عدّة.

PNG  Portable Network Graphics

وُضعت صيغة PNG عام 1996 بديلاً عن GIF (التي كانت مقيّدة ببراءات اختراع)، وهي تعتمد ضغطاً دون فقدان، فلا تُسقط أي بيانات. وتعيد خوارزمية DEFLATE (وهي مزيج من LZ77 وترميز هوفمان) تنظيم بيانات البكسلات بكفاءة أعلى دون التخلّص من شيء، ما يضمن أن تكون الصورة بعد فكّ الضغط مطابقة للأصل بكسلاً بكسل مهما تكرّر حفظ الملف.

قناة ألفا: تدعم PNG قناة رابعة لكل بكسل إلى جانب RGB، هي قناة ألفا التي تتحكّم في العتامة من 0 (شفاف تماماً) إلى 255 (معتم تماماً). ويتيح ذلك شفافية كاملة وشفافية جزئية وحوافّ ناعمة التنعيم فوق أي خلفية.

PNG-8 وPNG-24 وPNG-32: تستخدم PNG-8 لوحة بحدّ أقصى 256 لوناً (مثل GIF)، وهي مثالية للأيقونات البسيطة والصور قليلة الألوان. وتستخدم PNG-24 الألوان الكاملة (16 مليوناً) دون شفافية. أما PNG-32 فتجمع الألوان الكاملة مع قناة ألفا، وهي المقصودة عادة حين يُقال «PNG شفاف».

أين تخفق: مع الصور الفوتوغرافية تكون PNG غير مجدية، إذ قد تصبح ملفات الصور بها أكبر بثلاث إلى عشر مرات من مثيلتها بصيغة JPG. فالضغط دون فقدان لا ينجح في اختزال تدرّجات الألوان الفوتوغرافية بكفاءة.

متى تستخدمها: الشعارات والأيقونات ذات الخلفية الشفافة، ولقطات الشاشة ذات النصوص، والرسوم المعلوماتية، والصور ذات مساحات اللون الموحّد، والفن الرقمي حادّ الحواف، والصور التي تحتاج إلى إعادة تحرير دون فقد متراكم.

متى تتجنّبها: الصور الفوتوغرافية للويب (استخدم JPG أو WebP)، والصور التي يجب أن تكون ملفاتها صغيرة، والتسويق عبر البريد حيث تتفوّق JPG في التوافق.

WebP  Web Picture format

طوّرت Google صيغة WebP انطلاقاً من مرمّاز الفيديو VP8 وأطلقتها عام 2010 لتكون الخليفة الشاملة لـ JPG وPNG على الويب. وهي تدعم النمطين معاً: الضغط مع فقدان (المبني على VP8، للصور الفوتوغرافية) والضغط دون فقدان (بخوارزمية خاصة، للرسوم). وفي النمط الأول تستخدم WebP تنبّؤ الكتل والتحويل المتكيّف، وهي تقنيات أرقى من DCT في JPG، فتنتج ملفات أصغر بنسبة 25–35% بجودة بصرية مكافئة.

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

التوافق في 2026: مدعومة في Chrome وFirefox وSafari (منذ الإصدار 14) وEdge وOpera، أي ما يغطّي أكثر من 97% من مستخدمي الويب. والاستثناء الأبرز برامج البريد القديمة (وخاصة Outlook) والأنظمة المؤسسية القديمة العاملة بـ IE11.

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

متى تتجنّبها: التسويق عبر البريد (توافق متذبذب)، والطباعة الاحترافية، والصور المصغّرة في يوتيوب (لا يقبل WebP)، والملفات المعدّة للتنزيل التي سيفتحها المستخدمون على أنظمة قديمة.

AVIF  AV1 Image File Format

صيغة AVIF مشتقّة من مرمّاز الفيديو AV1 الذي طوّره تحالف Alliance for Open Media (ويضمّ Google وMozilla وNetflix وAmazon وغيرها). وهي الأحدث والأكثر تقدّماً تقنياً بين صيغ صور الويب، إذ تنتج ملفات أصغر من WebP بنسبة 20–50% بجودة بصرية مكافئة في حالات كثيرة، خصوصاً عند الجودات المنخفضة حيث تبدأ تشوّهات WebP بالظهور.

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

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

التوافق في 2026: Chrome 85 فما فوق، وFirefox 93 فما فوق، وSafari 16 فما فوق. وهي غير مدعومة في IE11 ولا في معظم برامج البريد. ولأن دعمها ما زال أضيق من WebP، فالموصى به تقديمها مع بديل احتياطي بصيغتي WebP وJPG عبر وسم <picture>.

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

متى تتجنّبها: حين يكون زمن الترميز عاملاً حاسماً، وفي أداة التحويل لدى ImageTools (فمرمّاز AVIF عبر Canvas API في المتصفحات غير محسّن وقد ينتج ملفات أكبر من الأصل — استخدم أدوات على الخادم مثل sharp للحصول على AVIF بجودة جيدة).

SVG  Scalable Vector Graphics

تختلف SVG اختلافاً جذرياً عن بقية الصيغ في هذه القائمة. فبدل تخزين البكسلات، تخزّن تعليمات رياضية بلغة XML: «ارسم مستطيلاً عرضه 200 عند الموضع X,Y بلون ‎#3ecf8e». ويحسب المتصفح أو البرنامج البكسلات لحظياً بالدقة المطلوبة. فملف SVG بحجم 5 كيلوبايت يظهر بإتقان في أيقونة موقع بمقاس 16 بكسل وعلى لوحة إعلانية بطول 20 متراً.

لماذا هي الصيغة المثالية للشعارات والأيقونات: لأن الشعارات والأيقونات تتألّف من أشكال هندسية: مستطيلات ودوائر ومنحنيات بيزييه ونصوص. وSVG تصف هذه الأشكال بالضبط دون أي فقد للمعلومات. فشعار بصيغة PNG بمقاس 200 بكسل يتبكسل عند 2000 بكسل، بينما يبقى الشعار نفسه بصيغة SVG مثالياً في أي مقاس.

قابلة للتعديل بـ CSS وJavaScript: عناصر SVG المضمّنة داخل HTML يمكن التعامل معها كأي عنصر آخر في الـ DOM: تغيير اللون بـ CSS، وإضافة الحركة بانتقالات CSS أو بـ JavaScript، وإضافة تفاعل بأحداث الفأرة. إنها أشبه بـ HTML للصور.

أين تخفق: الصور الفوتوغرافية والصور كثيرة الألوان والتدرّجات المعقّدة تنتج ملفات SVG ضخمة وغير عملية، بل تكون جودتها مع ذلك أدنى من JPG، لأن SVG لم تُصمّم لتمثيل البيانات الفوتوغرافية.

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

متى تتجنّبها: الصور الفوتوغرافية والصور كثيرة الألوان والملامس، ومواقع التواصل (فمعظمها لا يقبل رفع SVG)، والتسويق عبر البريد.

GIF  Graphics Interchange Format

أطلقت CompuServe صيغة GIF عام 1987، وهي تستخدم خوارزمية LZW للضغط دون فقدان، لكن بقيد جوهري: لا تدعم سوى 256 لوناً في الإطار الواحد. فكل بكسل ما هو إلا مؤشّر ضمن لوحة لا تتجاوز 256 مدخلاً، ما يجعل الصيغة غير مجدية مع الصور الفوتوغرافية (وفيها ملايين الألوان) ومناسبة للصور البسيطة قليلة الألوان.

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

شفافية جزئية: لا تدعم GIF سوى لون واحد «شفاف» في الإطار، دون شفافية جزئية ولا تنعيم للحواف. والنتيجة حواف «مسنّنة» حول العناصر المنحنية، خصوصاً فوق الخلفيات الملوّنة.

متى تستخدمها: الحركات البسيطة على المنصّات التي لا تدعم WebP المتحرّكة أو MP4، والأيقونات المتحرّكة قليلة الألوان، والمحتوى الطريف على مواقع التواصل حيث تكون GIF هي المتوقّعة ثقافياً.

متى تتجنّبها: الصور الثابتة (استخدم JPG أو WebP)، والشعارات الثابتة (استخدم PNG أو SVG)، والحركات المعقّدة على الويب (استخدم MP4 أو WebP المتحرّكة، فهما أكفأ بكثير).

BMP  Bitmap

BMP هي صيغة الخرائط النقطية في Windows، وقد ابتكرتها Microsoft. وهي في معظم الإعدادات لا تطبّق ضغطاً، إذ يُخزَّن كل بكسل مباشرة بقيمة لونه. والنتيجة ملفات ضخمة جداً: فصورة بمقاس 1920×1080 بصيغة BMP بعمق 24 بت تشغل 5,93 ميغابايت بالضبط، دائماً، أياً كان محتواها.

لماذا ما زالت موجودة: لأن توافقها مضمون في منظومة Microsoft كاملة: Windows وOffice والطابعات وبرامج التحرير القديمة. ولها موضع أيضاً في الاستخدام الداخلي ضمن مسارات معالجة الصور حيث يكون انعدام الضغط ميزة (ضماناً لبيانات بلا تشوّهات في كل مرحلة).

متى تستخدمها: حين يشترطها نظام بعينه (وخاصة القديم)، وكصيغة وسيطة في مسارات المعالجة حيث يُدخل الضغط تشوّهات غير مرغوبة، وفي الطباعة الصناعية على بعض الأنظمة.

متى تتجنّبها: أي استخدام على الويب أو في البريد أو مواقع التواصل، وكل سياق يهمّ فيه حجم الملف.