الصور: أثقل ما في موقعك وأسهل ما يُصلَح

• فريق Triple

الصور: أثقل ما في موقعك وأسهل ما يُصلَح

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

حين نفحص موقعًا بطيئًا، تكون الصور هي السبب في أغلب الحالات. ليس الكود ولا الخادم — صور مرفوعة بمقاسها الأصلي من الكاميرا أو من مصمم الجرافيك.

والخبر الجيد أن هذا أسهل ما يُصلَح في السيو التقني كله، ولا يحتاج مبرمجًا في معظم الحالات.

الخطأ الأول: المقاس

صورة بعرض 4000 بكسل تُعرض في مساحة 400 بكسل. المتصفح ينزّل الأربعة آلاف كاملة ثم يصغّرها. الزائر دفع ثمن البيانات ولم ير منها شيئًا.

القاعدة: صدّر الصورة بضعف المقاس المعروض على الأكثر — الضعف لأجل الشاشات عالية الكثافة، ولا شيء بعد ذلك.

الخطأ الثاني: الصيغة

JPEG وPNG صيغتان قديمتان. WebP يعطي نفس الجودة تقريبًا بثلث الحجم أو أقل، ويدعمه كل متصفح مستخدم اليوم.

• WebP — الافتراضي لكل صورة تقريبًا.
• SVG — للشعارات والأيقونات والأشكال. حجمه ضئيل ويظل حادًا في أي مقاس.
• PNG — فقط حين تحتاج شفافية دقيقة ولم ينجح WebP.
• JPEG — لم يعد له داعٍ في موقع جديد.

تحويل مكتبة صور كاملة إلى WebP غالبًا يقطع وزن الموقع للنصف في جلسة عمل واحدة.

الخطأ الثالث: غياب المقاسات في الكود

الصورة بلا width وheight تجعل المتصفح يحجز لها مساحة صفرية، ثم يقفز المحتوى حين تصل. هذا ما يقيسه جوجل باسم إزاحة التخطيط، وهو أحد عوامل تجربة الصفحة.

الحل بسيط: اكتب المقاسين في وسم الصورة دائمًا. المتصفح يحجز المساحة من البداية فلا يقفز شيء.

التحميل المؤجل — وأين لا يُستخدم

loading="lazy" يؤجل تحميل الصورة حتى تقترب من الشاشة. ممتاز لكل ما هو أسفل الطية.

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

النص البديل: للقارئ وللبحث

وسم alt يخدم غرضين: قارئ الشاشة ينطقه لمن لا يرى الصورة، ومحركات البحث تقرأه لتفهم الصورة.

• اوصف ما في الصورة بجملة قصيرة طبيعية، لا باسم الملف.
• اتركه فارغًا للصور الزخرفية — alt="" صحيح ومقصود لعنصر لا يحمل معنى.
• لا تحشُ كلمات مفتاحية — يضر ولا ينفع، ويزعج مستخدم قارئ الشاشة.
• سمّ الملف بوصف — kitchen-showroom-bahrain.webp أفضل من IMG_2291.webp.

صور جوجل مصدر زيارات منسي

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

هذا مهم بشكل خاص للمتاجر والمعارض — من يبحث عن شكل منتج يبدأ من الصور لا من النص.

قائمة فحص قبل أي رفع

• هل المقاس مناسب للمساحة المعروضة، لا أكبر منها بأضعاف؟
• هل الصيغة WebP، أو SVG للشعارات؟
• هل width وheight مكتوبان في الوسم؟
• هل الصور أسفل الطية مؤجلة، والأولى غير مؤجلة؟
• هل لكل صورة alt وصفي، أو فارغ إن كانت زخرفية؟
• هل اسم الملف يصف محتواه؟

ستة أسئلة، وأثرها على السرعة أكبر من معظم ما يُقال عن تحسين الأداء. راجع تحسين سرعة الموقع لبقية العوامل.

الصور المتجاوبة: صورة لكل شاشة

الجوال لا يحتاج نفس الصورة التي تحتاجها شاشة سطح المكتب. إرسال صورة بعرض 1920 لهاتف بعرض 375 إهدار لبيانات الزائر ولوقته.

الحل أن تصدّر عدة مقاسات وتترك المتصفح يختار الأنسب لعرض الشاشة وكثافتها. النتيجة أن هاتفًا ينزّل صورة بحجم عُشر ما ينزّله سطح المكتب — لنفس الصفحة.

هذا يُضبط مرة في القالب ثم يعمل تلقائيًا لكل صورة جديدة.

من أين تأتي بالصور؟

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

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

والأفضل من كل ذلك: صوّر مكانك وفريقك ومنتجك. الصور الحقيقية ترفع الثقة أكثر من أي صورة مخزون مهما كانت احترافية.