الصور عادة أثقل شيء على الصفحة، ما يجعلها أكبر رافعة سرعة تتحكّم بها. اضبط أبعادها ووزن ملفها بشكل صحيح فتبدو الصفحات فورية. أخطئ فيها فتفشل في Core Web Vitals مهما كانت شيفرتك نظيفة. إليك الأهداف وسير العمل لتحقيقها.
أهداف الأبعاد
طابق مقاس بكسل الصورة مع مكان ظهورها فعلاً. دليل تقريبي:
- صورة رئيسية بعرض كامل: عرض 1600–2000 px يغطّي معظم تخطيطات سطح المكتب. الأعرض نادراً ما يساعد ويكلّف بايتات كثيرة.
- صورة داخل المحتوى: عرض عمود محتواك، شائعاً 800–1200 px.
- صورة مصغّرة / بطاقة: 300–500 px.
- صورة رمزية / أيقونة: 48–200 px بالحجم الذي تُعرَض به.
تقديم صورة 4000px في خانة 800px يعني أن المتصفح ينزّل ويفكّ ترميز 25 ضعف البكسلات التي سيعرضها. ذلك هدر خالص — وفكّ ترميز الصور الكبيرة يعرقل أيضاً الخيط الرئيسي.
أهداف الوزن
الأبعاد تضع السقف؛ والضغط يضع الوزن الفعلي. استهدف:
- الصورة الرئيسية: أقل من 200 KB (مثالياً 100–150 KB).
- صورة داخل المحتوى: 80–150 KB.
- صورة مصغّرة: 10–30 KB.
- إجمالي الصور لكل صفحة: حاول البقاء تحت ~1 MB للصفحة كلها.
إذا تجاوزت صورة واحدة ~300 KB، عاملها كعلّة للتحقيق.
لماذا يقود هذا Core Web Vitals
يقيس Largest Contentful Paint (LCP) من Google كم يستغرق حتى يُعرَض أكبر عنصر على الشاشة — وفي معظم الصفحات، ذلك العنصر الأكبر هو صورة (عادة الرئيسية). صورة رئيسية ثقيلة كبيرة المقاس تضخّم LCP مباشرة. LCP جيد هو أقل من 2.5 ثانية؛ وصورة رئيسية منتفخة قد تتجاوز ذلك على اتصالات الهاتف وحدها.
مكسبان آخران متعلّقان بالصور:
- اضبط سمتَي width وheight كي يحجز المتصفح مساحة — ذلك يحمي درجة Cumulative Layout Shift (CLS).
- أعطِ الأولوية للصورة الرئيسية (لا تؤجّل تحميل صورة LCP) وأجّل تحميل كل ما دون الطيّة.
سير العمل ذو الخطوتين
الخطوة 1 — غيّر المقاس إلى عرض العرض الفعلي. استخدم مغيّر مقاس الصور لخفض كل صورة إلى الحجم الذي تظهر به. قفل الأبعاد مفعّل، وتصغير عالي الجودة. هذا وحده يقلّص الوزن غالباً 80–90%.
الخطوة 2 — اضغط. أطعم الملفات المُغيَّرة المقاس إلى ضاغط الصور: جودة 75–85 للصور (بلا خسارة مرئية)، وتكميم 256 لوناً لملفات PNG. لا يُخرج أبداً ملفاً أكبر من الأصل، ويعالج الدفعات، وله حد عرض اختياري كي تؤدي الخطوتين معاً فعلياً. للمتصفحات الحديثة، تحويل الصور إلى WebP يعصر 25–35% إضافية.
قسها، لا تخمّن
بمجرد تحسين صورك، أكّد أن الصفحة أصبحت أسرع فعلاً. يدقّق Page QA من IMG.DIY رابطاً حيّاً عبر Google PageSpeed Insights ويبلّغ عن وزن صور الصفحة كي ترصد أي ملف ما زال ثقيلاً جداً. تحذير واحد: يحتاج Page QA اتصالاً بالإنترنت — بخلاف أدوات الصور، يستدعي واجهة PageSpeed من Google، فلا يعمل دون اتصال. استخدمه بعد النشر لفحص LCP الحقيقي وميزانية الصور.
خاص افتراضياً
تعمل أدوات تغيير المقاس والضغط والتحويل كلياً في متصفحك بـ Canvas وWebAssembly — لا شيء يُرفع، وبعد زيارتك الأولى تُخزَّن وتعمل دون اتصال. يمكنك تحضير صور موقع بأكمله بلا اتصال، ثم تشغيل Page QA متصلاً بمجرد أن تصبح الصفحة حيّة.
خلاصة سريعة: اضبط الأبعاد بالحجم الصحيح، اضغط إلى أهداف الوزن، أعطِ الأولوية للصورة الرئيسية لـ LCP، وتحقّق بـ Page QA.