كيفية إعداد موقع الويب الخاص بك لصور جاهزة شبكية العين

لقد مضى وقت طويل منذ إطلاق شاشات Retina على أجهزة iOS لأول مرة ، لكن لا يزال هناك الكثير من المواقع غير المتوفرة في شبكية العين ، حتى مع قيام المصممين والمطورين بمشاهدة حقائق الهاتف المحمول المتجاوب تمامًا. العالم ودية.

إليك ما تحتاج إلى معرفته حول الخيارات المتاحة لجعل عملك يبدو في أفضل حالاته على شاشات Retina الشائعة الانتشار. والخبر السار هو أن الأمر ، كما يبدو مروعًا ، ليس معقدًا حقًا.

$config[code] not found

إعداد موقع الويب الخاص بك لصور شبكية جاهزة لل

مضاعفة المرح الخاص بك

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

ستختلف تحديثات CSS التي ستحتاج إليها اعتمادًا على المتصفحات المستهدفة ، ولكن الخبر السار هو أنها ليست معقدة للغاية الآن ، وأنها أصبحت أكثر سهولة. سنترك الترميز الفعلي ليوم آخر.

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

SVG

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

وكما أشرنا أعلاه ، من المحتمل ألا يعمل SVG كحلّك الوحيد على معظم المواقع ، ما لم يكن الموقع يحتوي على صور من نوع صور.

القوة الغاشمة

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

حلول الترميز الأخرى

في الطرف الآخر من الطيف والأناقة ، هناك طرائق ترميز تعتمد على بعض التغييرات من جانب الخادم (مثل إدخالات ملف.htaccess) إلى جانب ترميز PHP و Javascript.

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

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

صورة NASDAQ عبر Shutterstock