تحسين صور الموقع دون خسارة وضوح المحتوى

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

حضر المقاس المناسب

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

افصل الصورة الرئيسية عن الصور اللاحقة

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

مثال من معرض مشاريع

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

• استخدم وصفًا بديلًا للصور ذات المعنى.
• اترك الوصف البديل فارغًا عندما تكون الصورة زخرفية فقط.
• تجنب تكرار الكلمات المفتاحية في كل وصف.
• افحص الخطأ عند فقد الصورة حتى لا تتعطل قراءة الصفحة.

راجع دليل الصور المتجاوبة في MDN لتقديم نسخ تناسب مواضع العرض المختلفة.

اقرأ أيضًا

• Core Web Vitals: كيف تحول قياسات السرعة إلى خطة تحسين؟

وليد الفليحي

برمجيات واكثر - عضو الهيئة السعودية للمهندسين

أحوّل الأفكار إلى حلول رقمية متكاملة، وأطوّر مواقع وأنظمة ويب حديثة تساعد الجهات والأفراد على تحقيق أهدافهم بكفاءة عالية، مع خبرة في تطوير الأنظمة، إدارة الخوادم وحلول البنية التح…

◉