كيف تختار أبعاد الصورة المناسبة لموقعك؟
دليل عملي لاختيار عرض وارتفاع الصور للصفحات والمقالات والمتاجر، ولماذا تكبير الصورة أكثر من اللازم يضر الأداء.
ابدأ من مساحة العرض
إذا كانت بطاقة المقال تعرض الصورة بعرض 720 بكسل كحد أقصى، فلا يوجد سبب افتراضي لرفع نسخة بعرض 3000 أو 4000 بكسل. من الأفضل إنشاء نسخة قريبة من الحجم المطلوب مع هامش معقول للتصميم المتجاوب.
أما الصور التي تملأ شاشة كاملة أو تمتد عبر عرض الصفحة، فقد تحتاج إلى نسخة أكبر. المهم هو قياس التصميم الفعلي بدل اختيار رقم عشوائي.
ماذا عن شاشات Retina؟
بعض الأجهزة تعرض كثافة بكسلات أعلى من شاشة تقليدية. لذلك قد تحتاج الصور المهمة إلى مصدر أكبر من حجم العرض CSS. لكن هذا لا يعني أن كل صورة يجب أن تكون ضخمة؛ استخدم صورًا متعددة الأحجام عندما يدعم موقعك ذلك، واختبر النتيجة على هاتف وحاسوب حقيقيين.
لا تخلط بين الأبعاد وحجم الملف
صورة 1600×1000 قد تكون أصغر من صورة 1200×1200 أو أكبر منها حسب التفاصيل والصيغة والجودة. الأبعاد عامل مهم، لكنها ليست العامل الوحيد. بعد اختيار الأبعاد، اختر الصيغة ومستوى الجودة المناسبين ثم قارن الحجم النهائي.
طريقة عملية قبل رفع الصورة
- حدد أكبر عرض ستظهر به الصورة.
- اختر أبعادًا مناسبة مع هامش بسيط للشاشات عالية الكثافة عند الحاجة.
- حوّل الصورة إلى صيغة مناسبة للويب.
- اضغطها ثم قارن الجودة والحجم.
- جرّب الصفحة على الهاتف والكمبيوتر قبل اعتماد الإعداد.
يمكنك استخدام أداة ضوء لتغيير الأبعاد ومقارنة حجم الملف قبل رفعه إلى موقعك. وإذا كنت تعمل على سرعة موقع كامل، اقرأ أيضًا دليل ضغط الصور وتأثيره على سرعة الموقع.
مثال: صورة بطاقة مقال بعرض 720 بكسل
إذا كانت بطاقة المقال تعرض الصورة بعرض أقصى يقارب 720 بكسل، فإن رفع نسخة بعرض 3000 بكسل يعني إرسال بيانات أكثر مما يحتاجه هذا الموضع في كثير من الحالات. لا يعني ذلك أن 720 هو الرقم الصحيح لكل موقع؛ المقصود أن تبدأ من مساحة العرض الفعلية ثم تختار نسخة قريبة منها، مع مراعاة الشاشات عالية الكثافة والصور التي تظهر بعرض أكبر.
الأبعاد لا تحدد الحجم وحدها. صورة مليئة بالتفاصيل قد تكون أكبر من صورة بسيطة بنفس الأبعاد، كما تختلف النتيجة بين JPG وWEBP وPNG. لذلك اجعل قرارك من مرحلتين: أولًا الأبعاد، ثم الصيغة والضغط.
خطة اختيار الأبعاد
- قِس أكبر عرض للصورة في التصميم.
- قرر هل تحتاج نسخة أكبر للأجهزة عالية الكثافة.
- أنشئ نسخة أو أكثر بدل ملف ضخم واحد.
- اضغط النسخة المناسبة ثم راقب الحجم.
- اختبر الصفحة على الهاتف والحاسوب.
إذا كنت تستخدم srcset وsizes، يمكنك تقديم أكثر من نسخة والسماح للمتصفح باختيار الأنسب. راجع الدليل المتخصص في المدونة إذا كان موقعك يحتاج صورًا متجاوبة.
هل تريد تطبيق الفكرة؟ انتقل إلى أداة ضوء لمعالجة الصورة مباشرة داخل متصفحك.