تعتبر أحجام الصور وأماكن وضعها في موقع الشركة من العناصر التي غالبًا ما يتم تجاهلها أثناء بناء الموقع، لكنها حاسمة. اختيار الحجم المناسب للصورة ووضعها في المكان الصحيح لا يعزز جمالية الصفحة فحسب، بل يحسن أيضًا سرعة التحميل وتجربة التصفح للمستخدم. تبدأ هذه المقالة من الأقسام الشائعة في موقع الشركة لتقديم توصيات عملية.
حجم الصورة الرئيسية (Banner) ومكانها
الصورة الرئيسية (Banner) هي أول ما يراه الزائر عادةً، ويُوصى بحجم 1920×600 بكسل أو 1920×800 بكسل، حيث يتناسب العرض مع شاشات الكمبيوتر الرئيسية، ويكون الارتفاع معتدلاً لتجنب شغل مساحة كبيرة من الشاشة الأولى.
يُوصى بوضعها أسفل شريط التنقل العلوي للصفحة، مع عرض كامل. يجب أن يكون المحتوى المهم في الصورة (مثل النص والأزرار) داخل منطقة آمنة لتجنب قصه على شاشات مختلفة الأحجام.
حجم صور عرض المنتجات ومكانها
تحتاج صور المنتجات إلى إظهار التفاصيل بوضوح، مع ضمان كفاءة تحميل صفحة القائمة وصفحة التفاصيل.
بالنسبة لصفحة قائمة المنتجات، يُوصى باستخدام صور مربعة ذات حجم موحد، مثل 400×400 بكسل أو 500×500 بكسل، للحفاظ على تناسق الصور المصغرة لجميع المنتجات. توضع في شبكة القائمة، مع 3-4 أعمدة في كل صف.
بالنسبة لصفحة تفاصيل المنتج، يُوصى بعرض الصورة الرئيسية 800-1000 بكسل، مع ارتفاع يتكيف تلقائيًا وفقًا للنسبة. يمكن وضعها على الجانب الأيسر من الصفحة، مع وصف نصي على الجانب الأيمن. يمكن أيضًا إضافة 2-3 صور فرعية أو صور تفاصيل، بحجم مماثل للصورة الرئيسية.
حجم صور صفحة "من نحن" وصور الفريق ومكانها
لا تحتاج الصور في صفحة نبذة عن الشركة إلى أن تكون كبيرة جدًا، بل يكفي أن تكون واضحة. يُوصى بعرض صور الفريق 300-500 بكسل، سواء كانت مربعة أو بنسبة 3:4. توضع بجانب التعريف بالشخص المعني، مع 2-4 أشخاص في كل صف.
حجم صور عرض الحالات ومكانها
تحتاج صور الحالات عادةً إلى الجمع بين الصور المصغرة والعرض التفصيلي. يُوصى بحجم الصور المصغرة في صفحة القائمة 300×200 بكسل (نسبة 16:10 أفقية) أو 400×300 بكسل (نسبة 4:3). عند النقر، يتم فتح صفحة تفاصيل الحالة، ويمكن تكبير الصورة إلى عرض يزيد عن 800 بكسل.
من حيث المكان، يُوصى باستخدام تخطيط شبكي أو بطاقات في صفحة قائمة الحالات، مع 2-3 حالات في كل صف. يمكن وضع منطقة عرض الصور المركزة في منتصف صفحة التفاصيل، مع شرح نصي.
حجم صور الأخبار ومكانها
لا ينبغي أن تكون الصور في المقالات الإخبارية أو المدونات كبيرة جدًا، ويُوصى بعرض 600-800 بكسل، مع ارتفاع يتكيف تلقائيًا. توضع الصور عادةً داخل نص المقال، بما يتوافق مع المحتوى النصي. يجب الحفاظ على اتساق عرض جميع صور الأخبار لجعل الصفحة مرتبة.
حجم شعارات الأسفل وأيقونات الشركاء
عادةً لا تحتاج الشعارات أو أيقونات الشركاء في أسفل الصفحة إلى صور عالية الدقة، ويُوصى بارتفاع 30-50 بكسل، مع عرض يتناسب مع النسبة. تُرتب أفقيًا في المنطقة السفلية، مع 5-8 عناصر في كل صف، لتجنب أن تكون الصور كبيرة جدًا وتؤثر على جمالية التذييل.
ملاحظات حول تكييف الصور للأجهزة المحمولة
اليوم، يزور越来越多的 المستخدمين موقع الشركة عبر الهواتف المحمولة، لذا يجب مراعاة تكييف أحجام الصور للأجهزة المحمولة. يُوصى باستخدام تقنية الصور المتجاوبة عند تصميم الصفحة، لتوفير صور كبيرة للشاشات الكبيرة وصور مضغوطة صغيرة للشاشات الصغيرة. يمكن أيضًا ضبط أقصى عرض للصورة بنسبة 100% عبر CSS، مع ارتفاع يتكيف تلقائيًا، لضمان عدم تجاوز الصورة لحدود أي جهاز.
هذه هي التوصيات المتعلقة بأحجام الصور الشائعة وأماكن وضعها في موقع الشركة. عند التصميم الفعلي، يمكن إجراء تعديلات مناسبة وفقًا للأسلوب العام للموقع والمحتوى. الأهم هو الحفاظ على التناسق، حيث تُستخدم أحجام ونسب متقاربة لنفس نوع الصور، مما يجعل الصفحة تبدو احترافية ومرتبة.
