هل أجهز صور الموقع بضعف المقاس المعروض عشان تكون حادة على شاشات الريتينا؟
للصور التي يبيع وضوحها، نعم: الشاشات عالية الدقة تعرض تفاصيل أكثر من صورة بضعف العرض. لكن مضاعفة العرض تعني أربعة أضعاف البكسلات وملفًا أثقل. استخدم الضعف للصورة الرئيسية وصور المنتج، والمقاس العادي للمصغرات، واضغط الاثنين. وتجهز الأداة كل نسخة مع قفل النسبة.
ما الذي يحدث على شاشة الريتينا؟
الشاشات عالية الدقة، مثل شاشات الجوالات الحديثة وأجهزة ماك، تضع بكسلين فعليين أو أكثر في مكان كل بكسل من بكسلات التصميم. صورة تُعرض بعرض 800 في الصفحة تشغل على هذه الشاشة 1600 بكسل حقيقي. إن كان الملف نفسه 800 بكسل فقط، يمدده الجهاز فيبدو أنعم قليلًا من النص المحيط به، وهذا يُلاحظ في صور المنتجات ذات الملمس الدقيق مثل القماش والجلد.
الثمن بالأرقام
صورة 4032 × 3024 تُعرض بعرض 800 في الصفحة.
النسخة العادية: العرض 800 مع قفل النسبة يعطي 800 × 600، أي 0.48 ميغابكسل.
النسخة المضاعفة: العرض 1600 يعطي 1600 × 1200، أي 1.92 ميغابكسل.
ضعف العرض يساوي أربعة أضعاف البكسلات، والملف يثقل تبعًا لذلك وإن لم يكن بالنسبة نفسها تمامًا.
أي الصور تستحق الضعف؟
- الصورة الرئيسية للمنتج والصور التي يكبرها العميل ليرى التفاصيل: نعم، هنا الوضوح يبيع.
- بنر الصفحة الرئيسية: غالبًا نعم، لكنه أكبر صورة في الموقع، فاضغطه جيدًا.
- المصغرات في شبكة المنتجات وصور المقالات الجانبية: المقاس العادي يكفي، لأنها صغيرة ولا يدقق فيها أحد.
- الشعارات والأيقونات: إن توفرت بصيغة متجهة فهي أفضل، وإلا فنسخة PNG بالضعف.
كيف تضع النسختين في الصفحة؟
إن كنت تتحكم في كود صفحتك، فالمتصفح يستطيع أن يختار بنفسه: يأخذ النسخة العادية على الشاشات العادية، والمضاعفة على الشاشات عالية الدقة. تجهز النسختين في تغيير أبعاد الصور، واسم كل ملف ينتهي بمقاسه تلقائيًا، ثم تكتب الوسم هكذا:
<img src="bag-800x600.jpg" srcset="bag-1600x1200.jpg 2x" width="800" height="600" alt="Leather bag">
أما إن كان متجرك على منصة جاهزة فغالبًا لا تتحكم في هذا الوسم، وكثير من المنصات تنشئ النسخ بنفسها. في هذه الحالة ارفع صورة كبيرة بما يكفي للنسخة المضاعفة، وراجع ما تنصح به المنصة.
لا تنسَ الوزن
الضعف يضاعف الوضوح والوزن معًا. بعد تجهيز النسخة المضاعفة، خفّض الجودة قليلًا في الأداة أو مرّر الملفات على ضغط الصور. على الشاشات عالية الدقة يخفي صغر البكسل جزءًا من آثار الضغط، فالنسخة المضاعفة تتحمل جودة أقل قليلًا من العادية.
أسئلة شائعة
وماذا عن ثلاثة أضعاف؟
بعض الجوالات تستخدم كثافة أعلى من الضعف، لكن الفرق الذي تراه العين يقل بينما يزيد الوزن كثيرًا. الضعف حل وسط عملي لأغلب المواقع.
هل أرفع النسخة المضاعفة وحدها؟
تستطيع، لكن زوار الشاشات العادية سينزلون ملفًا أكبر مما يحتاجون. النسختان معًا أفضل إن كان قالبك يسمح بذلك.