قائمة عبدالله الكندي لتحسين الصور: الحجم والصيغة والتحميل الكسول

في أغلب المواقع اللي تشتكي من البطء، لو فتحت تبويب الشبكة في المتصفح بتلقى نفس المشهد: صورة غلاف حجمها عدة ميجابايت، مرفوعة من كاميرا الجوال كما هي، وتنعرض في مساحة عرضها بضع مئات من البكسلات. الصور غالباً أثقل شي في الصفحة، وأسهل شي تصلحه. عبدالله الكندي يبني المواقع بـ Next.js، وهذي القائمة اللي يمر عليها قبل ما يعتبر أي صفحة جاهزة، مرتبة من الأكثر أثراً للأقل.

أولاً: المقاس قبل كل شي

• لا ترسل صورة أعرض من أعرض مكان تنعرض فيه. صورة تنعرض بعرض ٦٠٠ بكسل تكفيها نسخة ١٢٠٠ للشاشات عالية الكثافة، مو ٤٠٠٠.
• جهّز أكثر من مقاس للصورة الواحدة، وخلّ المتصفح يختار عبر srcset و sizes. الجوال ياخذ الصغيرة، والشاشة العريضة تاخذ الكبيرة.
• اكتب sizes بصدق. لو الصورة تاخذ نص الشاشة على الكمبيوتر وكامل العرض على الجوال، قل هذا للمتصفح، وإلا يفترض أسوأ حالة وينزّل الأكبر.
• الصور المصغّرة في القوائم والبطاقات تستاهل نسخة خاصة صغيرة، مو نفس صورة صفحة التفاصيل مصغّرة بالـ CSS.

ثانياً: الصيغة المناسبة لنوع الصورة

• الصور الفوتوغرافية: WebP أو AVIF. الاثنتين تعطيك حجماً أصغر بكثير من JPEG بجودة متقاربة للعين، و AVIF غالباً أصغر لكن ترميزه أبطأ.
• الشعارات والأيقونات والرسومات البسيطة: SVG. ملف نصي صغير يبقى حاداً على أي مقاس، وتقدر تغيّر لونه بالـ CSS.
• الصور اللي تحتاج شفافية: WebP يدعم الشفافية، فما تحتاج PNG ضخم لكل صورة منتج بخلفية شفافة.
• لقطات الشاشة اللي فيها نص: انتبه للضغط العالي، لأنه يطلع تشوّهات حول الحروف، وخصوصاً الحروف العربية الرفيعة والنقاط.
• خلّ JPEG كاحتياط عبر وسم picture لو كان جمهورك فيه متصفحات قديمة.

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

ثالثاً: التحميل الكسول، وفخّه المشهور

الخاصية loading=lazy تقول للمتصفح: لا تنزّل هذي الصورة لين يقرب المستخدم منها. ممتازة لصور أسفل الصفحة، ومعارض الصور، والتعليقات. لكن فيه فخ يطيح فيه كثير: تطبيقها على كل الصور، بما فيها صورة الواجهة الكبيرة أعلى الصفحة. هذي الصورة غالباً هي أكبر عنصر يظهر للزائر، ومنها ينقاس مؤشر LCP في Core Web Vitals. تأخيرها يعني إن الزائر يشوف مساحة فاضية أطول، وجوجل يشوف صفحة أبطأ.

• الصورة الرئيسية في أول الشاشة: بدون تحميل كسول، ومع fetchpriority=high عشان المتصفح يقدّمها على غيرها.
• كل الصور تحت أول شاشة: تحميل كسول.
• صور الخلفية في CSS ما تستفيد من loading=lazy أصلاً، فلو كانت هي الصورة الرئيسية فكّر تحوّلها لوسم img عادي.
• الصور داخل سلايدر: الشريحة الأولى أولوية، والباقي كسول.

رابعاً: امنع الصفحة من القفز

تقرأ أول سطر في مقالة، وفجأة ينزل النص لتحت لأن صورة تحمّلت فوقه. هذا القفز ينقاس في مؤشر CLS، ويضايق الزائر أكثر من البطء نفسه. العلاج إن المتصفح يعرف مساحة الصورة قبل ما تنزل: اكتب width و height على وسم الصورة، أو حدد aspect-ratio في الـ CSS. المتصفح يحجز المكان الصحيح من البداية، والصورة تجي تعبّيه بدون ما تدفع أحد.

خامساً: خلّ الأداة تشتغل بدالك

في Next.js مكوّن next/image يتكفل بأغلب اللي فات: يولّد المقاسات، ويقدّم الصيغ الحديثة للمتصفحات اللي تدعمها، ويطبّق التحميل الكسول افتراضياً، ويطلب منك أبعاد الصورة عشان يمنع القفز. اللي يبقى عليك ثلاث أشياء: تكتب sizes صح، وتعلّم الصورة الرئيسية بخاصية الأولوية حسب إصدارك، وتراجع إعدادات المصادر الخارجية المسموحة. وفي المنصات الثانية فيه خدمات صور عبر شبكات CDN تحوّل المقاس والصيغة من الرابط نفسه.

سادساً: قِس قبل وبعد، ثم كمّل التفاصيل الصغيرة

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

• نص بديل alt يوصف الصورة فعلاً لقارئات الشاشة ولمحركات البحث، والصور الزخرفية تاخذ alt فاضي.
• اسم ملف مفهوم بدل IMG_4521، لأنه يظهر في بحث الصور ويساعد في فهم المحتوى.
• رؤوس تخزين مؤقت طويلة للصور الثابتة، مع تغيير اسم الملف لما تتغير الصورة.
• تنظيف بيانات EXIF من صور الجوال قبل النشر، لأنها ممكن تحمل موقع التصوير ومعلومات الجهاز.
• حد أعلى لحجم الصور اللي يرفعها فريق المحتوى في لوحة التحكم، أو تصغير تلقائي عند الرفع.

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