صيغ الصور: أيها تستخدم وأين

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

الدرس 3 من 5
مبتدئ
مجاني، دون تسجيل

المهام الأربع التي تختار الصيغة عنك

لا تحمل الخانات تسميات محاور لأنه لا محاور هنا: كل خانة مهمة، وجوابها مكتوب بجوارها.

صورة فوتوغرافية

AVIF أو WebP، مع JPEG بديلاً.
صورة فيها نص

WebP بلا فقد أو PNG. حواف الحروف تتلف أولاً.
شعار وأيقونة ورسم بياني

SVG. ملف واحد للأيقونة المصغرة وللافتة بثلاثة أمتار.
حركة

فيديو لا GIF. أصغر وأنظف.

صورة واحدة

هذه الخانات الأربع تحسم الصيغة لا الحجم. فالصورة بالصيغة الصحيحة والحجم الخاطئ تبقى بطيئة.

آخر مراجعة: ٦ سبتمبر ٢٠٢٦ تُراجع الحقائق وأسماء الأدوات في هذا الدرس مقابل مصادرها في هذا التاريخ.

راستر أم ڤيكتور: السؤال الذي يسبق الصيغة

صيغة الصورة ليست مجرد امتداد ملف. فهي تقرر كيف تُحزَم بيانات الصورة وما الذي يُسمح للملف بالاحتفاظ به: الشفافية والحركة وعمق اللون. وهذا يجعل الاختيار قراراً تقنياً له إجابات صحيحة.

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

ونتيجة هذا الانقسام تلقاها في مكان آخر تماماً. فالشعار الذي تسلّمته بصيغة PNG بخمسمئة بكسل فقط طريق مسدود، لأن كل حجم أكبر بعد ذلك يعني إعادة التصميم من جديد. والعكس صحيح: الڤيكتور بلا معنى للصورة الفوتوغرافية، ولا أحد يصف وجه إنسان ببضع مئات من الأشكال الهندسية. ودليل الصيغ في MDN نفسه يوصي بـ SVG لعناصر واجهة المستخدم والأيقونات والرسوم البيانية، أي في الموضع الذي يجب أن تُرسم فيه الصورة بدقة بأحجام مختلفة.

الراستر والڤيكتور، شيئان مختلفان لهما استعمالان صحيحان

راستر: شبكة من البكسلات

الصور ولقطات الشاشة وكل ما جاء من العالم الحقيقي
التكبير يعني اختراع بكسلات لم تكن في الملف
كل حجم يحتاج تصديره الخاص
JPEG وPNG وWebP وAVIF وGIF

ڤيكتور: تعليمات لرسم أشكال

الشعارات والأيقونات والرسوم البيانية وكل ما رُسم
حاد بأي حجم، بلا تصدير جديد
يبقى قابلاً للتحرير في العام المقبل
SVG للويب، وAI وEPS كملفات مصدر

لا أحدهما أفضل من الآخر. والخطأ أن تسلّم مهمة أحدهما للآخر.

الصيغ الست التي تؤدي العمل فعلاً

ست صيغ تؤدي عملياً كل عمل الويب. والأعمدة أدناه مقروءة من دليل صيغ الصور في MDN، لا من تجربة شخصية.

الصيغة	الضغط	الشفافية	الحركة	موضعها الصحيح
JPEG	مع فقد	لا توجد	لا توجد	الصور الفوتوغرافية حين لا يتوفر أحدث منها
PNG	بلا فقد	قناة ألفا	عبر APNG فقط	الرسوم المسطحة ولقطات الشاشة وكل موضع تهم فيه الدقة
WebP	مع فقد أو بلا فقد	قناة ألفا	نعم	الخيار الافتراضي اليوم لأي صورة راستر
AVIF	مع فقد أو بلا فقد	قناة ألفا	نعم	الصور الفوتوغرافية حين يستحق الضغط الأفضل ذلك
SVG	ڤيكتور، بلا فقد	نعم	نعم	الشعارات والأيقونات والرسوم البيانية
GIF	بلا فقد على لوحة ٢٥٦ لوناً بحد أقصى	الكل أو لا شيء	نعم	لا مكان تقريباً

دعم المتصفحات ليس عموداً هنا عن قصد، لأنه ليس نعم ولا بسيطة بل قائمة إصدارات. فـ JPEG و PNG و GIF و SVG تعمل في كل إصدارات كروم وإيدج وفايرفوكس وأوبرا وسفاري. وكذلك WebP، بشرط واحد يذكره MDN صراحة: على ماك تحتاج سفاري ١٤ فأحدث وبيغ سور فأحدث في الوقت نفسه. أما AVIF فأصغر سناً، وMDN يعطي إصداراته هكذا: كروم ٨٥، أوبرا ٧١، فايرفوكس ٩٣، سفاري ١٦.١ وإيدج ١٢١. ولهذا السبب نفسه توصي MDN بأن تعطي AVIF بديلاً بصيغة WebP أو JPEG أو PNG عبر عنصر picture.

وموقف لا يشاركنا فيه الجميع: الثقافة هي التي أبقت GIF حية لا الهندسة. فلوحته لا تتجاوز ٢٥٦ لوناً، وشفافيته الكل أو لا شيء، وحركته بلا ضغط حقيقي بين الإطارات. ودليل MDN نفسه يقترح WebP أو AVIF أو APNG للحركة. ولا تبقى GIF إلا حيث لا تقبل الوجهة سواها.

أي صيغة لأي مهمة

ابدأ من المهمة لا من الصيغة. أربع حالات تغطي كل شيء تقريباً.

الصور الفوتوغرافية. AVIF أو WebP، مع JPEG بديلاً. وإن كانت طبقة التخزين المؤقت أو شبكة التوزيع لديك تتفاوض على الصيغة مع المتصفح نيابة عنك، فمهمتك أن ترفع نسخة أصلية جيدة واحدة وتدع تلك الطبقة تقرر.
لقطات الشاشة وكل صورة فيها نص. هنا يُحدث الضغط مع الفقد أكبر ضرر، لأن التلف يبدأ من حواف الحروف. WebP بلا فقد أو PNG.
الشعارات والأيقونات والرسوم البيانية. SVG. وإن كانت الوجهة لا تقبل SVG فصدّر PNG من ملف الڤيكتور، ولا تكبّر PNG موجوداً. ويبلغ درس تصميم الشعار النتيجة نفسها من جهة التصميم.
الحركة. فيديو لا GIF. فمقطع MP4 أو WebM قصير أصغر وأنظف، ويترك التحكم في التشغيل بيدك.

تحذير عن SVG قلّما يُقال: ملف SVG مستند XML وقد يحمل سكربتاً. فلا ترفع ملف ڤيكتور من مصدر مجهول إلى موقعك مباشرة. الأمر غير ذي شأن مع أيقوناتك أنت، لكنه ذو شأن مع ملف يرفعه مستخدم.

وتوفير يتفوق على أي تغيير في الصيغة: جزء كبير مما ينشره الناس كصور لا يحتاج أن يكون صورة أصلاً. فالأيقونات والرسوم البيانية والجداول والشعارات النصية تُبنى كلها من النص وCSS وSVG، وعندها لا صيغة تُختار ولا حجم يُخطأ فيه.

سؤال واحد يحسم معظم قرارات الصيغة

هل جاءت هذه الصورة من كاميرا أم رسمها أحد؟

من كاميرا أو شاشة

إنها راستر، فالمحتوى يختار الصيغة

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

مرسومة

إنها ڤيكتور وينبغي أن تبقى كذلك

SVG للويب، وملف مصدر للتعديلات اللاحقة
الوجهة لا تقبل SVG: صدّر PNG من الڤيكتور
مصدر مجهول: قد يحمل SVG سكربتاً

هذا التفرع لا يحسم الحالات الحدّية: فالصورة التي وُضع عليها نص تقع على الجانبين وتحتاج عينك.

الشفافية والحركة، حيث يظهر الاختيار الخاطئ فوراً

لا قناة ألفا في JPEG. يقولها MDN في سطر واحد وينبني عليها كل شيء: لا وجود لشيء اسمه JPEG شفاف، وما تستلمه مستطيل أبيض.

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

أما PNG وWebP وAVIF فتحمل قناة ألفا حقيقية وتبقي الحافة الناعمة ناعمة. وللحركة، هذه الثلاث مع APNG تؤدي عمل GIF أداءً أفضل. لكن الأصدق من ذلك: إن كان ما تصنعه يتجاوز بضع ثوان فهو ليس صورة متحركة أصلاً؛ إنه فيديو وينبغي أن يبقى فيديو.

ما الذي تضبطه عند التصدير

ترتيب الخطوات أهم من الأرقام نفسها.

الحجم أولاً. صدّر بالحجم الذي تُعرض به الصورة فعلاً، مضروباً في اثنين للشاشات عالية الكثافة. فلا ضبط جودة ينقذ صورة بأربعة آلاف بكسل وُضعت في مكان بستمئة بكسل. وهذا الضبط الواحد يفعل عادةً أكثر مما يفعله تغيير الصيغة، ولأن حجم الصورة يصب مباشرة في مؤشرات Core Web Vitals، فإن كانت مشكلتك سرعة الموقع فمن هنا يبدأ العمل لا من الصيغة.

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

لا تصدّر ثانية من ملف مضغوط مع فقد. فكل ترميز يقتطع من جديد مما فُقد سابقاً. ارجع إلى النسخة الأصلية دائماً، حتى حين تريد نسخة أصغر قليلاً فحسب.

وعادتان صغيرتان تستحقان الترسيخ: امسح البيانات الوصفية للويب، وأعطِ الملف اسماً واصفاً. وتحذير عن مسح البيانات الوصفية يستحق المعرفة: إن كانت الصورة مخرجاً لأداة ذكاء اصطناعي فليست العلامة بالضرورة في البيانات الوصفية. تكتب غوغل أن SynthID تضمّن علامتها داخل الصورة نفسها وأنها مصمَّمة لتصمد أمام تعديلات كالقص وإضافة الفلاتر والضغط مع الفقد. أي أن تحويل الصيغة لا يمحوها.

المسار السريع مع الذكاء الاصطناعي

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

استخرج جرداً من المجلد. سطر واحد بـ ImageMagick يكفي: identify -format "%f|%m|%wx%h|alpha=%A|colors=%k|%b\n" * فيعطيك لكل ملف الاسم والصيغة والأبعاد ووجود الشفافية وعدد الألوان والحجم.
قل أين تُعرض كل صورة وبأي عرض. فبدون ذلك لا يستطيع النموذج أن يحدد أي ملف ينبغي أن يصغر، وسيتحدث عن الصيغ فقط.
املأ الوصفة أدناه بالجرد ثم شغّلها. فالعائد خطة لا رأي: إجراء واحد لكل ملف.
شغّل التحويلات ثم تحقق من أمرين: أن المخرَج أصغر فعلاً وأن حواف الحروف سلمت. والملف الذي كبر بعد التحويل نتيجة لا خطأ؛ معناه أن الصيغة القديمة كانت الصحيحة.

وصفة جاهزة للنسخ

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

القواعد التي تقرر بها:
١. عدد ألوان مرتفع بلا نص يعني صورة فوتوغرافية: AVIF أو WebP مع فقد.
٢. عدد ألوان منخفض، أو وجود نص وحواف حادة، يعني غرافيك: WebP بلا فقد أو PNG.
٣. alpha=True تخرج JPEG من القائمة.
٤. إن كان عرض الملف أكثر من ضعف عرض العرض، فقلّل الحجم أولاً؛ وتغيير الصيغة هو المهمة الثانية.
٥. إن كان الملف SVG أو كان محتواه مرسوماً فلا تحوّله البتة.

أين تُعرض كل مجموعة وعرضها الحقيقي:
{مثال: بطاقة مقال = ٤٠٠ بكسل | صورة بارزة = ٨٠٠ بكسل | أيقونة = ٤٨ بكسل}

جرد الملفات، سطر لكل ملف: الاسم|الصيغة|الأبعاد|alpha|الألوان|الحجم
{الجرد}

أعد سطراً واحداً بالضبط لكل ملف بهذه الأعمدة:
الاسم | الفئة (صورة أو غرافيك أو ڤيكتور) | الإجراء | الصيغة الهدف | العرض الهدف | السبب في عشر كلمات أو أقل

وفي النهاية أعطِ ثلاث قوائم قصيرة:
أ. ملفات تحتاج تصغيراً فقط وصيغتها صحيحة.
ب. ملفات لا تحسمها هذه الأعمدة وتحتاج عيناً بشرية.
ج. ملفات لا ينبغي أن تكون صوراً أصلاً ومكانها النص أو CSS.

قبل أن تثق بالناتج: النموذج لا يرى البكسلات أبداً؛ يرى جدولاً. فيصيب في القرارات الآلية، وكل موضع يكون السؤال فيه عن الجودة عليك أن تنظر بنفسك. وأمران لا يُتركان لهذه الخطة أبداً: الملف الذي له نسخة ڤيكتور أصلية يجب أن يُصدَّر من الأصل لا أن يُحوَّل، وكل مخرَج يجب فحصه بالعين على النصوص والحواف الحادة.

الذكاء الاصطناعي في هذا العمل

اختيار الصيغة من المهام التصميمية القليلة التي لا يضيف فيها النموذج اللغوي جديداً، لأن قواعدها مكتوبة وثابتة. أما حيث يحرر وقتاً فعلاً فهو الكم: مئتا ملف، وجدول واحد، وخطة واحدة. وثمة مهمة لا تُسلَّم له أبداً، مذكورة في قسم المخاطر أدناه.

أدوات تساعد فعلا

Gemini للتمرير الآلي على جرد الملفات، بنموذجه السريع الرخيص. وصفحة غوغل نفسها تقول إن تطبيق Gemini على الويب يعمل في أكثر من ٢٣٠ دولة وإقليماً، وإيران ليست في تلك القائمة.
Claude لكتابة سكربت التحويل نفسه وكتلة picture ببديلها، لأنه يشرح الكود ويمكن الاعتراض على شرحه. وإيران ليست في قائمة الدول المدعومة لدى أنثروبيك ولا يوجد مسار دفع رسمي منها.
ImageMagick ليست أداة ذكاء اصطناعي، ووجودها في القائمة مقصود: الجزء المتكرر فعلاً في هذا الدرس ينجزه سطر أوامر واحد ولا يحتاج أي نموذج. النموذج يقرر والأداة تنفّذ.
RGB طبقة الوصول والدفع لإيران، منفصلة عن الأدوات نفسها.

اين ينقلب ضدك

وهذه هي المهمة التي لا تُسلَّم لنموذج أبداً: أن تسأله أي متصفح يدعم أي صيغة اليوم. سيجيب، وستبدو الإجابة واثقة، وهي آتية من بيانات تدريب لا يخبرك بتاريخها. فدعم الصيغ يتحرك مع كل إصدار متصفح، ولذا يجب أن تأتي الإجابة من caniuse أو من MDN، لا من ذاكرة نموذج ولا من هذه الصفحة التي تقرؤها أيضاً. والخطر الثاني أدق: النموذج لا يرى صورتك. فأي جواب من نوع «هذه ينبغي أن تكون JPEG» بلا الملف نفسه هو تخمين. وإن كانت الصور مخرجات أداة ذكاء اصطناعي فمسح البيانات الوصفية لا يكفي؛ تكتب غوغل أن علامة SynthID تجلس داخل الصورة نفسها ومصمَّمة لتصمد أمام القص والفلاتر والضغط مع الفقد.

المصادر: MDN: Image file type and format guide Can I use: WebP browser support Google DeepMind: SynthID

حدود هذه النصيحة

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

من عملنا نحن

كل هذا مطبَّق على هذا الموقع ويمكن معاينته. ففي ٢٠٢٦-٠٩-٠٦ تحتوي مكتبة وسائط rgb.ir على ٢٣٨ مرفقاً صورياً، وكلها الـ ٢٣٨ من نوع image/webp؛ ولا ملف JPG أو PNG واحد في القائمة. والأطرف أن التحويل التلقائي عند الرفع مُطفأ في طبقة التخزين المؤقت، أي أن لا إضافة أنتجت ذلك: فالملفات تُحوَّل وتُضغط قبل الرفع، لأن هذه قاعدة الموقع المكتوبة. وطبقة التخزين نفسها مضبوطة على webp بينما الافتراضي في الإضافة نفسها هو avif. وثمة فخ دفعنا ثمنه هنا: كتابة width وheight على وسم img ليست القصة كلها، لأن main.css يكتب للموقع كله img, svg, video { max-width: 100%; height: auto } وهذه القاعدة تتغلب على سمة ارتفاع شكلية. وفي ٢٠٢٦-٠٨-٢٨ جعلت كل صورة رمزية في قائمة المستقلين تُرسم بيضاوية، إلى أن أُخذ الشكل من CSS بـ aspect-ratio.

اسئلة متابعة حقيقية

أيهما أفضل، WebP أم AVIF؟

يكتب MDN أن AVIF يضغط أفضل قليلاً لكن دعمه ليس بمستوى WebP ولا رندر تدريجي فيه، ولهذا توصيته أن تضع بديلاً عبر عنصر picture. وإن أردت اختيار واحدة فقط فـ WebP هي الأقل إزعاجاً.

لماذا لشعاري حافة فاتحة فوق خلفية داكنة؟

لأن الملف بلا شفافية حقيقية أو لأنه سُطّح على أبيض. فشفافية GIF الكل أو لا شيء ولا تحفظ الحافة الناعمة. والحل تصدير جديد من ملف الڤيكتور بصيغة SVG أو PNG، لا إصلاح الملف نفسه.

هل ما زال عليّ استخدام JPEG؟

كبديل نعم، وكصيغة وحيدة لا. فـ JPEG تعمل في كل مكان وهذا يجعلها بديلاً آمناً، لكنها بلا شفافية ولا تضغط بقدر WebP أو AVIF. وإن كانت طبقة التخزين لديك تتفاوض على الصيغ فهي تتولى هذا عنك أصلاً.