SVG مقابل PNG/JPG: لماذا يعد التنسيق المتجه ضرورياً للأداء وتحسين محركات البحث

PNG و JPG: مثاليان للصور، ثقيلان جداً للواجهة

PNG و JPG هما تنسيقان نقطيان (raster): الصورة عبارة عن شبكة من البكسلات. الشعار المُصدّر كـ PNG بحجم 512×512 "يلتقط" كل نقطة. للبقاء واضحاً على شاشة Retina، غالباً ما تحتاج إلى تقديم نسخة بحجم مضاعف أو ثلاثة أضعاف، مما يعني مضاعفة الكيلوبايتات. يضغط JPG الصور بشكل أفضل، لكنه يدمر الألوان المسطحة، ويضيف تشوهات حول النصوص، ولا يدعم الشفافية. كلاهما غير مصمم لشعار أو أيقونة يجب عرضها بحجم 24 بكسل في القائمة و 240 بكسل في الترويسة.

SVG (الرسوميات الشعاعية القابلة للتمدد) يصف الأشكال من خلال المنحنيات والإحداثيات، وليس بالبكسلات. تحويل PNG إلى متجه باستخدام PixelToPath يعني استبدال صورة نقطية ثابتة بمسار يعيد المتصفح رسمه بالحجم الدقيق للشاشة. النتيجة: ملف أخف بكثير بشكل عام، ونفس الدقة على الجوال، والكمبيوتر، وشاشات 4K.

ما الذي يغيره SVG عملياً للموقع

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

أبرز الفوائد الملحوظة للمطور أو خبير تحسين محركات البحث:

• الحجم: ينخفض حجم شعار بسيط غالباً من 40 إلى 80 كيلوبايت بصيغة PNG إلى بضعة كيلوبايتات بصيغة SVG، ويمكنك الاستغناء عن صادرات @2x / @3x.
• القابلية للتوسع: ملف واحد، واضح بحجم 16 بكسل كما في الشاشة الكاملة 4K، بدون الحاجة لاستخدام srcset أو استعلامات الوسائط للصور.
• Core Web Vitals: بيانات أقل للتنزيل (LCP) ومساحة محجوزة ثابتة عبر viewBox (CLS).
• SEO التقني: صفحات أسرع على الجوال، تنسيق يفهمه جوجل، ونصوص يمكن أن تتواجد داخل SVG.

PNG مقابل SVG: وزن الشعار ليس بالأمر الهين

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

أحجام تقريبية لوحظت بعد التحويل إلى متجه مع PixelToPath، في السيناريو النموذجي لموقع واجهة أو تطبيق ويب:

السيناريو	PNG / JPG	SVG
شعار 512 بكسل مع شفافية	من 40 إلى 80 كيلوبايت	من 2 إلى 12 كيلوبايت حسب الألوان والعقد
الشعار نفسه مقدَّم بحجم @2x (1024 بكسل) لشاشات Retina	الحجم يتضاعف، وأحيانًا يتضاعف ثلاث مرات	ملف واحد لم يتغير
20 أيقونة واجهة مُصدَّرة بحجم @3x (72×72)	إضافة 40 إلى 160 كيلوبايت	بضعة كيلوبايتات فقط في المجموع
شعار بألوان مسطحة قادم من ملف JPG	تشوهات وهالات حول الأشكال والنص	حواف نظيفة وملف أخف وزنًا

القاعدة بسيطة: أي شكل، نص، رسم تخطيطي، أو شعار يستفيد من كونه SVG. تظل الصور الفوتوغرافية ولقطات الشاشة كـ JPG أو WebP أو AVIF. SVG ليس بديلاً عالمياً: إنه التنسيق المناسب للواجهة.

القابلية للتوسع: ملف واضح من الهاتف الذكي إلى 4K

PNG يكون واضحاً فقط بدقته الأصلية. عند التكبير، تظهر البكسلات. عند التصغير بشكل حاد، يضطر المتصفح لإعادة أخذ العينات. ومن هنا تأتي تعقيدات ملفات @1x، @2x، @3x، و srcset، وكثافات CSS. كل نقطة انقطاع جديدة أو كثافة شاشة جديدة (Retina، هواتف حديثة، شاشات 4K) تتطلب تصديراً جديداً، أو ملفاً كبيراً جداً "احتياطياً".

يتجاهل SVG هذا القيد. يحسب محرك التصيير المنحنيات بالحجم المطلوب في CSS. أيقونة مفضلة (Favicon) بحجم 32 بكسل، شعار 48 بكسل في القائمة، نفس العلامة التجارية بحجم 400 بكسل في الترويسة، عرض 4K: إنه نفس الملف. لا يوجد ضبابية، لا حواف متعرجة، لا طلب ثانٍ لنسخة عالية الكثافة. بالنسبة لمكتبة المكونات، يعني ذلك أيضاً ديوناً أقل: أيقونة واحدة، ملف واحد، لكل الأحجام.

Core Web Vitals وتحسين محركات البحث: لماذا يهتم جوجل بالتنسيق

تُعد سرعة الجوال عامل تصنيف. تقيس Core Web Vitals (LCP، INP، CLS) ما يشعر به المستخدم. استبدال شعار PNG ثقيل أو مجموعة أيقونات نقطية بـ SVG لن يحول صفحة من 4 ميغابايت إلى 40 كيلوبايت. لكن على تصميم الموقع الأساسي، يكون التأثير فورياً، خاصة على شبكة الجيل الرابع أو LCP معاق بسبب شعار الترويسة.

عملياً، التنسيق المتجه يساعد في ثلاثة مقاييس، بشرط أن يظل منطقياً من حيث تعقيد المسار:

• LCP (أكبر رسم للمحتوى): إذا كان أكبر عنصر مرئي هو شعار أو رسم توضيحي مسطح، فإن SVG ببضعة كيلوبايتات سيصل أسرع من PNG @2x بحجم 150 كيلوبايت. اختناق أقل للشبكة لبقية الصفحة.
• CLS (الانزياح التراكمي للتخطيط): يحجز SVG المزود بالعرض والطول و viewBox مساحته منذ تحليل HTML. لا حاجة لانتظار فك تشفير صورة نقطية لمعرفة النسبة، مما يعني قفزات أقل في التخطيط.
• INP وسلسلة المعالجة الرئيسية: SVG البسيط (شعار، أيقونة) لا يكلف الكثير لرسمه. بالمقابل، تجنب SVG "الصور" الذي يحتوي على آلاف المسارات: يمكن أن يزن أكثر من PNG ويجهد المعالج. ومن هنا تأتي أهمية وجود مسار نظيف عبر PixelToPath، وليس مجرد نسخ بكسل ببكسل.
• SEO يتجاوز السرعة: جوجل يفهرس ملفات SVG. يمكن أن يحمل الشعار المضمن عنواناً يسهل الوصول إليه. وتظل صورة SVG مع سمة alt أساسية. صفحة أخف تقلل من معدل الارتداد التقني، وهو إشارة تجربة تؤخذ في الاعتبار عند التصنيف.

أين يتفوق SVG على PNG/JPG في موقع حقيقي

هذا ليس نظرياً. إليك الأماكن التي يؤتي فيها التنسيق المتجه ثماره فوراً:

• شعار الترويسة والتذييل: ملف واحد، واضح على Retina، وغالباً ما يكون من أكثر العناصر التي تُرى، وأحياناً LCP على صفحة رئيسية مبسطة.
• نظام الأيقونات: لا مزيد من sprites PNG 1x/2x. كل رسم تخطيطي هو SVG (أو sprite SVG)، يمكن تخصيصه عبر CSS (currentColor) بدون تصدير جديد.
• الأيقونة المفضلة (Favicon) وأيقونة Apple-touch: استخدام SVG حديث كأيقونة مفضلة مع PNG احتياطي يجنبك الاحتفاظ بأحجام متعددة 16، 32، 180 بكسل.
• الرسوم التوضيحية للواجهة والحالات الفارغة: الرسوم المسطحة المتجهة تظل واضحة في وضع ملء الشاشة، دون أن تكلف وزن صورة رأس كبيرة.
• صفحة الهبوط لمحركات البحث: كل كيلوبايت يتم توفيره في التصميم يحسن نتائج Lighthouse و PageSpeed Insights وتجربة الهاتف المحمول، وهي إشارات يجمعها محرك التصنيف.

احتفظ بـ JPG/WebP للصور. استخدم SVG للشعارات، الرسوم التوضيحية المسطحة، والأيقونات. هذا هو التقسيم الذي تطبقه أسرع المواقع بالفعل.