الإجابة المختصرة: يقوم تحسين صور الموقع على خمس عادات: صدّر كل صورة بأكبر عرض ستظهر به فعلًا، وحوّلها إلى صيغة WebP، وأبقِ معظم الصور دون 150 كيلوبايت تقريبًا، وامنح كل ملف اسمًا وصفيًا قصيرًا، واكتب نصًا بديلًا يصف ما تُظهره الصورة بلغة الصفحة نفسها. افعل ذلك قبل الرفع، لا بعد أن يصبح الموقع بطيئًا.
الصور عادةً أثقل ما في صفحة الويب، وفي كثير من مواقع الشركات تزن لافتة واحدة أكثر من النصوص والأكواد والخطوط مجتمعة. ويتصفح الزوار في الكويت غالبًا من الجوال، حيث تكون الصورة الكبيرة أعلى الصفحة آخر ما يظهر، وهي العنصر الذي يقيس به Google سرعة التحميل. والخبر الجيد أن العمل على الصور لا يحتاج مطوّرًا، بل بضع قواعد تُطبَّق في كل مرة يرفع فيها أحد صورة.
ما صيغة الصورة المناسبة؟
| نوع الصورة | الصيغة المقترحة | ملاحظات |
|---|---|---|
| الصور الفوتوغرافية (الفريق، المنتجات، الأماكن) | WebP | أصغر بكثير غالبًا من JPEG بجودة مماثلة، وقد تكون صيغة AVIF أصغر إذا دعمتها منصتك. |
| الشعارات والأيقونات البسيطة | SVG | حادة بأي حجم وخفيفة جدًا، وارفعها من مصادر موثوقة فقط. |
| الرسوم ذات الخلفية الشفافة | WebP مع الشفافية | تأكد أن أداة التحويل تحافظ على الشفافية، فبعض الأدوات تضع خلفية سوداء أو بيضاء. |
| لقطات الشاشة التي فيها نص | WebP بلا فقد أو PNG | الضغط مع الفقد يطمس النص الصغير. |
ما الحجم المناسب لكل صورة؟
حدد حجم الصورة حسب موضعها. نادرًا ما تظهر صورة المحتوى داخل عمود بعرض يتجاوز 1000 بكسل، فرفع صورة كاميرا بعرض 4000 بكسل يهدر البيانات فقط. وقد تحتاج اللافتات بعرض الصفحة إلى 1600 أو 1920 بكسل على الحاسوب، وتنشئ معظم المنصات نسخًا أصغر للجوال تلقائيًا. هدفًا عمليًا، أبقِ صور المحتوى دون 150 كيلوبايت، واللافتات الكبيرة أقرب ما تسمح به الجودة. وإذا لم تنضغط الصورة جيدًا، فربما كانت مفصّلة أكثر مما تحتاجه المساحة.
كيف تسمّي ملفات الصور؟
أعد تسمية الملفات قبل رفعها. الاسم «IMG_2034.jpg» لا يخبر أحدًا بشيء، أما «kuwait-showroom-reception-desk.webp» فيصف المحتوى لمحركات البحث ولفريقك بعد أشهر. استخدم حروفًا لاتينية صغيرة وأرقامًا وشرطات. فالأحرف العربية في أسماء الملفات تتحول إلى سلاسل مرمّزة طويلة في عنوان الصورة، واحتفظ بالوصف العربي للنص البديل، حيث مكانه الصحيح.
كيف تكتب النص البديل بالعربية والإنجليزية؟
- صِف ما تُظهره الصورة وسبب وجودها في الصفحة، في جملة قصيرة واحدة.
- اكتبه بلغة الصفحة: نص بديل عربي في الصفحات العربية وإنجليزي في الإنجليزية. وإذا كانت منصتك تشارك مكتبة وسائط واحدة بين اللغتين، فتأكد أن كل نسخة تحمل نصها.
- اترك النص البديل فارغًا للصور الزخرفية البحتة، كأنماط الخلفية، لتتخطاها قارئات الشاشة.
- لا تحشُ الكلمات المفتاحية. عبارة «تصميم مواقع الكويت شركة تصميم مواقع» لا تفيد أحدًا، أما «مصمم يراجع النسخة العربية من صفحة رئيسية على حاسوب محمول» فتفيد.
- استخدم التعليق المرئي، لا النص البديل، للمعلومة التي يجب أن يراها كل زائر.
ماذا تفحص بعد الرفع؟
- يجب أن تُحمَّل اللافتة الرئيسية أعلى الصفحة فورًا، فالتحميل الكسول يناسب الصور الأدنى في الصفحة، لا أول صورة يراها الزائر.
- يجب تحديد العرض والارتفاع للصور كي لا يقفز التخطيط أثناء تحميلها.
- افحص الصفحات الرئيسية في PageSpeed Insights على الجوال، وابحث عن الاقتراحات المتعلقة بالصور.
- افتح الصفحة على جوال ببيانات الهاتف، لا بشبكة المكتب، لترى ما يراه الزوار فعلًا.
من المسؤول عن جودة الصور؟
كل من يرفع الصور. اكتب القواعد في صفحة واحدة: الصيغة، والعرض الأقصى، وحد الحجم، ونمط التسمية، والنص البديل، وشاركها مع كل من يعدّل الموقع، بمن فيهم الوكالات والمستقلون. فمعظم المواقع البطيئة تبطؤ تدريجيًا، برفع صورة كبيرة تلو أخرى.
أسئلة شائعة
هل تدعم كل المتصفحات صيغة WebP؟
نعم، تعرض كل المتصفحات الرئيسية الحالية صيغة WebP على الجوال والحاسوب.
هل أحوّل كل الصور إلى AVIF؟
ملفات AVIF أصغر غالبًا، لكن تحقق من دعم منصتك وإضافاتك وأدوات تحرير الصور لها. وتبقى WebP الخيار الآمن اليوم.
هل تساعد الصور الصفحة على الظهور في البحث؟
قد تساعد. يستخدم Google اسم الملف والنص البديل والنص المحيط بالصورة لفهمها، ويمكن أن تظهر الصور في صور Google وميزات بحث أخرى.
تجهيز الصور جزء من كل مشروع ضمن خدمة تصميم وتطوير المواقع الإلكترونية. وإذا كان موقعك الحالي ثقيلًا، أرسل عنوانه عبر نموذج طلب عرض السعر وسنخبرك من أين يأتي الثقل.
المصادر
- مركز Google للبحث: تحسين الصور لمحركات البحث
- مبادرة W3C لإتاحة الويب: دليل الصور (بالإنجليزية)
- أداة PageSpeed Insights من Google
بقلم فريق Creative 4 All، نبني مواقع وحملات باللغتين منذ 2012. روجع للكويت في نوفمبر 2026.
