إيجابيات وسلبيات استخدام Retina js. كيفية تكييف الصور مع تصميم الويب على شاشات Retina. Retinize It Photoshop البرنامج المساعد

مع كل أداة جديدة من Apple ، تظهر المزيد والمزيد من الشاشات المزودة بتقنية Retina Display. اليوم ، تم العثور على شاشات Retina على أجهزة iPhone و iPod و iPad والعديد من طرز MacBook ، وعدد مستخدميها الإجمالي مثير للإعجاب. دعنا نتعلم كيفية إنشاء صور شبكية مخصصة لموقعك لجعله يبدو أكثر ذكاءً وإشراقًا ووضوحًا على هذه الأنواع من الشاشات القوية.

لماذا تدعم شاشات شبكية العين؟

في البداية ، لم أكن أتوقع أن يكون عدد مستخدمي الأجهزة المزودة بشاشات شبكية مثيرًا للإعجاب ، لأن هذه التقنية بدأ استخدامها مؤخرًا نسبيًا. ولكن بعد ذلك ، من خلال حساب Analytics الخاص بي ، قمت بالاطلاع على الإحصائيات الخاصة بأجهزة الجوال وتوصلت إلى استنتاج مفاده أن منتجات Apple كانت في الصدارة من جميع النواحي ، وقبل كل شيء من بينها iPhone و iPod و iPad - وجميعهم يعملون على تقنية شبكية العين. بالنسبة إلى جهاز MacBook Pro مقاس 13 أو 15 بوصة المزود بشاشة Retina ، فإن أكثر متصفحات المستخدم شيوعًا هي Chrome و Firefox و Safari و Internet Explorer. لذلك إذا كنت تستخدم Opera ، فمن المحتمل أن يكون عدد الزوار المحتملين لموقعك أقل من عدد مستخدمي أجهزة Retina بشكل عام (وفقًا لإحصائيات موقعي على الأقل).

كيفية إنشاء صور شبكية العين

قد تفترض أن صور Retina يتم حفظها في PPI أعلى ، لكن هذا ليس هو الهدف. كل ما عليك فعله هو حفظ نسخ متعددة من صور Retina الخاصة بك في ضعف الحجم بحيث تصبح ، على سبيل المثال ، صورة 200 × 200 بكسل 400 × 400 بكسل. يتم بعد ذلك عرض هذه الصور المكبرة بحجمها الأصلي ، مما يسمح بهذه الرسومات الواضحة والنظيفة على الشاشات عالية الكثافة بكسل.

يبدو الأمر بسيطًا ، ولكن كيف ستحصل على تلك الصور المكبرة؟

قم بإنشاء الشعارات والأيقونات في Illustrator

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

استخدم ميزات Vector في Photoshop

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

الماكرة لتوسيع نطاق صورك

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

ماذا عن تصميم تم تكبيره حتى 200٪ ثم تقليص حجمه مرة أخرى؟

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

كيفية ترميز رسومات شبكية العين

بمجرد إنشاء نسخ 2x من جميع صور المخزون ونقلها ، يمكنك البدء في إضافتها إلى موقعك بعدة طرق. كلمة عن اسم الملف: احفظ صور شبكية العين مباشرة في مجلد الصور بنفس اسم الملف مع الإضافة [البريد الإلكتروني محمي]فى النهاية. على سبيل المثال ، سيتغير snarf.jpg إلى [البريد الإلكتروني محمي]

حل بسيط مع جافا سكريبت

أسهل طريقة لجعل صور شبكية العين تعمل هي استخدام البرنامج النصي retina.js. ستحدد Retina.js جميع الصور @ 2x في قائمة الصور وتغير حجمها تلقائيًا.

الطريقة اليدوية باستخدام [البريد الإلكتروني محمي]

رأس h1 أ (
صورة الخلفية: url (الصور / [البريد الإلكتروني محمي]);
حجم الخلفية: 164 بكسل 148 بكسل ؛
}

هناك خيار آخر وهو إضافة صور شبكية العين يدويًا للاحتفاظ بتصميم صفحتك بتنسيق CSS. يحتوي الطلب الوسيط على min-device-pixel-ratio: 2 ، للكائنات ذات كثافة البكسل مرتين. بهذه الطريقة ستستبدل كل صورة بنسخها المضاعفة @ 2x ، لكن لا تنس إعادة الصورة إلى حجمها الأصلي باستخدام معلمة حجم الخلفية.

HTML للصور المضمنة

تعتبر طريقة CSS رائعة لصور الخلفية ، ولكن بالنسبة للصور المضمنة في صفحة HTML ، ستحتاج إلى تغيير العلامات . فقط أضف الصورة @ 2x إلى السمات الأصلية ، ثم استخدم العرضو ارتفاعللعودة إلى الإعدادات الأصلية.

بعد ظهور الأجهزة ذات الشاشات عالية الدقة ، على سبيل المثال ، iPhone و iPad و Samsung Galaxy Note II وبالطبع MacBook Pro مع شاشة Retina ، واجه مطورو الويب والمدونون مسألة العرض العادي لمواقعهم على هذه الأجهزة. سأشرح أدناه كيف أضفت دعمًا لشاشات العرض عالية الدقة على مواقعي.

شاشات عالية الدقة لشبكية العين

نحتاج أولاً إلى توضيح ماهية الشاشات عالية الدقة (Retina هو الاسم التسويقي للشاشات عالية الدقة المستخدمة في تقنية Apple). تتميز الشاشات التقليدية ، مثل تلك الموجودة في كمبيوتر محمول مقاس 15 بوصة ، بدقة شاشة تبلغ 1440 × 900. هذا يعني أن مصفوفة الشاشة تتكون من وحدات بكسل (نقاط) وهذه المصفوفة بها 1440 نقطة في الطول و 900 نقطة في الارتفاع.

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

مشكلة في عرض الرسومات النقطية

على الشاشات التقليدية ، سيتم أيضًا عرض صورة 300 × 200 بكسل على الشاشة - 300 × 200 ، بالطبع ، إذا لم يتم قياسها. في المصفوفات عالية الدقة ، يمكن عرض صورة مقاس 300 × 200 بطريقتين.

• كصورة بدقة 600 × 400 بكسل ، فإنها ستشغل بالضبط نفس القدر من المساحة على الشاشة كما هو الحال في الشاشة العادية.
• مثل صورة بدقة 300 × 200 ، لكنها ستشغل بعد ذلك نصف المساحة على شاشة عالية الدقة مقارنة بالشاشة العادية. أي أنه سيكون نصف الحجم ، لأن شاشات العرض عالية الدقة ، التي تحتوي على ضعف الدقة ، هي بنفس حجم شاشات العرض التقليدية.

الخيار الافتراضي عند عرض مواقع الويب هو الخيار الأول - حيث يتم مضاعفة جميع الصور. لهذا السبب ، تصبح جميع الصور على الموقع: الصور ، وخاصة الأيقونات والشعارات ، ضبابية ، وهو مثال قدمته في بداية المقال.

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

أو في CSS:

فئة الصورة (صورة الخلفية: url (/image-600x400.png) ؛ حجم الخلفية: 300 بكسل 200 بكسل ؛)

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

المحلول

لتقديم صور عادية للمستخدمين بشاشات عادية وبضعف حجم الصور عالية الدقة ، أستخدم JavaScript retina.js. يوجد النص الأصلي في موقع retinajs.com ، ولكن كانت هناك بعض التغييرات التي كانت مطلوبة في بعض الأماكن ، والتي كانت موجودة بالفعل في إصداري من البرنامج النصي.

يتحقق هذا البرنامج النصي من وقت تحميل الصفحة لمعرفة ما إذا كان جهازك يحتوي على شاشة عالية الدقة ، وإذا كان الأمر كذلك ، إذا كان الخادم الخاص بك يحتوي على نفس الصور ، ولكن مع اسم ينتهي بـ @ 2x (هذا هو الترميز القياسي لصورة ضعف الحجم لأجهزة Retina). وهذا يعني ، بالنسبة للصورة ، أن src = "http://site.com/images-directory/image.png" سيتحقق البرنامج النصي من http://site.com/images-directory/ [البريد الإلكتروني محمي]، وإذا تم العثور على هذه الصورة ، فستعرضها على الصفحة ، مع تحديد العرض والارتفاع المطلوبين (العرض والارتفاع).

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

:

بالنسبة لأولئك الذين يستخدمون معالج CSS المسبق (أقل) ، يمكن أن يكون mixin مفيدًا لتجنب النسخ واللصق.

إذا وجدت خطأ أو كان لديك أي أسئلة ، فلا تنس الكتابة عنه في التعليقات.

اليوم سوف نضع النقاط على الـ i فيما يتعلق بشاشات Retina. أبسط تفسير: Retina شاشة عالية الدقة. ومع ذلك ، لا تحتوي منتجات Apple فقط على مثل هذه الشاشات. "شاشة Retina" هي مجرد مصطلح ابتكرته شركة Apple ، وتستخدم الهواتف والأجهزة اللوحية والشاشات أيضًا تقنية عالية الدقة. اليوم ، أصبحت مثل هذه العروض أكثر شيوعًا ، لذلك من المهم إنشاء مواقع الويب والتطبيقات التي يمكن أن تدعمها جيدًا.

مع ذلك ، اسمحوا لي أن أشرح ما هو شبكية العين جاهزةالصور ولماذا تسير جنبًا إلى جنب مع التصميم سريع الاستجابة ، وكيفية إنشاء صور لهذا التصميم سريع الاستجابة.

ماذا تعني شاشة Retina؟

عرض شبكية العينهي علامة تجارية لشركة Apple ، مما يعني شاشات الكريستال السائل عالية الكثافة البكسل. توضح الصورة أدناه بطريقة مبسطة كيف يختلف ترتيب البكسل بين شاشة عرض ذات دقة عادية وشاشة Retina. مع شاشات Retina ، تحصل على ضعف عدد البكسل في نفس مساحة الشاشة العادية. هذا هو السبب في أن الرموز أو النصوص تبدو أسوأ على iPad 2 منها على iPad 3.

تبلغ دقة iPad 3/4 264 بكسل لكل بوصة ، و iPhone 4/5 326 ، بينما تبلغ دقة الشاشة العادية حوالي 100 بكسل لكل بوصة ، مما يعطي فرقًا قدره 2.6 و 3.2 مرة على التوالي. قيل مرتين للتبسيط.

معضلة

لدى المصممين والمطورين الآن أنواع عرض متعددة لعرضها. هذا يعني شيئين: سيتعين على المستخدمين الذين يستخدمون شاشات Retina تسوية الصور التي يتم عرضها بشكل سيء على المواقع التي لا تدعم Ratina ، من ناحية أخرى ، على المواقع التي تدعم هذا الدعم ، سيبدو كل شيء بجودة عالية جدًا وواضحًا ، تمامًا كما نحن أعجبني ونتوقع ذلك.

لماذا تعتبر شبكية العين مهمة للتصميم سريع الاستجابة؟

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

كيف تصنع صور Retina جاهزة للتصميم سريع الاستجابة؟

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

SVG

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

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

الصور والصور النقطية

بالطبع ، لا يمكن أن تكون جميع الصور بتنسيق SVG ، خاصةً إذا كانت صورة أو صورة نقطية جاهزة. يوجد حل لهذه الحالة أيضًا ، وهو يتمثل في عرض الصورة بأبعاد جانبية بنسبة 50٪. ما اعني؟ لنفترض أنك بحاجة إلى وضع صورة بحجم 150 × 150 ، ولهذا تستخدم صورة مقاس 300 × 300 ولكن تعرضها بحجم 150 × 150. في هذه الحالة ، ستبدو الصورة على شاشة Retina حادة وعالية الجودة.

هناك عدة طرق لاستخدام الصور المزدوجة على موقعك: من خلال HTML أو CSS أو JS. لن ندخل في الكثير من التفاصيل ، ولكن فقط فكر في الأساليب الأساسية.

اول طريق.لديك صورة بحجم 300 × 300 ولصقها في HTML وتحدد عرضًا وارتفاعًا يبلغ 150 بكسل.

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

Img (العرض: 50٪ ؛ الارتفاع: 50٪ ؛) .box img (العرض: 150 بكسل ؛ الارتفاع: 150 بكسل ؛)

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

صندوق (صورة الخلفية: url (myIMG.png) ؛ حجم الخلفية: 150 بكسل 150 بكسل ؛)

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

ولكن هناك طرق لتجنب ذلك أيضًا.

تساؤلات الإعلام

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

شاشةmedia only و (-webkit-min-device-pixel-ratio: 2) ، الشاشة فقط و (min - moz-device-pixel-ratio: 2) ، الشاشة فقط و (-o-min-device-pixel -النسب: 2/1) ، الشاشة فقط و (الحد الأدنى لنسبة البكسل للجهاز: 2) ، الشاشة فقط و (الدقة الدنيا: 192 نقطة في البوصة) ، الشاشة فقط و (الدقة الدنيا: 2 نقطة في البوصة) (/ * CSS لشبكية العين الأجهزة */ )

شبكية العين

إذا لم تكن راضيًا لسبب ما عن حل الاستعلام عن الوسائط ، ففكر في خيار JS. هنا سننظر في مكون إضافي لجافا سكريبت لحل مشكلتنا. "Retina.js هو برنامج نصي مفتوح المصدر يجعل من السهل تقديم صور عالية الدقة لشاشات Retina."يعمل هذا المكون الإضافي على النحو التالي: إذا كان لديك صورتان ، واحدة بحجم عادي والأخرى مكبرة مرتين ، يكتشف retina.js استخدام شاشة Retina ويستخدم الصورة المناسبة. إنه يعمل ببساطة شديدة ، لذا تأكد من تجربته. كل ما عليك فعله حتى يعمل المكون الإضافي هو تسمية الصور بشكل صحيح.

أيقونات

بفضل @ font-face والخطوط التي تستخدم الرموز بدلاً من الأحرف ، يمكنك استخدامها بسهولة بدلاً من الصور. تعجبني هذه الطريقة حقًا للأسباب التالية: أولاً ، حجم الخطوط جيدًا ، تمامًا مثل SVG ، لذا فهي مناسبة ليس فقط لأحجام الشاشات المختلفة ، ولكن أيضًا لدرجات الدقة المختلفة ، كما هو الحال مع Retina.

أوضح لك كيفية تحسين صور موقعك على الويب بسرعة للعرض عالي الجودة على شاشات Retina المستخدمة في أجهزة MacBook و iMac و iPhone و iPad الجديدة وما إلى ذلك. كالعادة ، قبل ذلك ، القليل من النظرية ونصيحتي العملية.

لنبدأ بتعريف:

Rétina (من اللاتينية retina - retina) هو الاسم التسويقي العام لشاشات LCD المستخدمة في أجهزة Apple ، والتي تتميز بكثافة بكسل عالية بحيث لا تستطيع العين البشرية أن ترى أن الصورة تتكون منها.

ربما تكون هذه نهاية الجزء النظري. يمكن للمهتمين بجهاز شاشات Retina العثور بسهولة على معلومات أعمق حول الموارد المتخصصة.

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

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

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

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

1. ستحتاج إلى صورة شعار ضعف حجم الأصل. على سبيل المثال ، لديك شعار 300 × 100 بكسل. png. لذلك ، تحتاج إلى إنشاء صورة مماثلة ، ولكن ضعف الحجم ، أي 600 × 200 بكسل. بالطبع ، ليس ببساطة عن طريق تغيير حجم الشعار الصغير القديم في Photoshop. نقوم بإنشاء صورة واضحة جديدة عالية الجودة ، ويفضل أن تكون من ناقل ، نسميها ، على سبيل المثال ، [البريد الإلكتروني محمي] وحفظ بجوار الشعار الرئيسي.
2. ثم نفتح ملف النمط الخاص بموقعك في المحرر ونجد المكان الذي تم فيه تعيين نمط عرض شعارك. عادة ما يكون شيء من هذا القبيل:

#logo (background-image: url ("images / logo.png")؛ تكرار الخلفية: لا تكرار ؛ عرض: كتلة ؛ عرض: 300 بكسل ؛ ارتفاع: 100 بكسل ؛)

نحتاج فقط إلى إضافة استعلام وسائط بحيث يتم تحميل صورتنا الجديدة للشاشات التي تحتوي على نسبة بكسل فعلية ووحدات بكسل CSS أكبر من 1.5 logo2x.png

يتم ذلك بكل بساطة:

media all و (-webkit-min-device-pixel-ratio: 1.5) (#logo (background-image: url ("images / [البريد الإلكتروني محمي]") ؛ حجم الخلفية: 300 بكسل 100 بكسل ؛))

لا تنس ضبط أبعاد الخلفية على نفس الصورة الأصلية. في حالتنا هذه 300 × 100 بكسل.

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

اشترك ببرقيتي وكن أول من يتلقى المواد الجديدة ، بما في ذلك. التي ليست على الموقع.

يوجد الآن المزيد والمزيد من الأجهزة المجهزة بشاشات ذات كثافة بكسل متزايدة ، لذلك عند إنشاء مواقع حديثة (خاصة المواقع الترويجية والصفحات المقصودة وما إلى ذلك) ، يجب أخذ ذلك في الاعتبار.

لن أتعمق في النظرية ، لكنني سأتحدث فقط عن التطبيق العملي لبعض التقنيات.

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

الحل 1 باستخدام لغة تأشير النص الفائق

استخدم صورة أكبر بمرتين عن طريق تشفير معلمات العرض والارتفاع

يجب أن تكون الصورة example2x.png 200x400

الحل 1 مع JavaScript

الطريقة مشابهة للطريقة الأولى ، لكنها آلية إلى حد ما

$ (window) .load (function () (var images = $ ("img")؛ images.each (function (i) ($ (this) .width ($ (this) .width () / 2)؛) ) ؛)) ؛

الحل 1 مع CSS

إذا كنت بحاجة إلى تحديد أبعاد الخلفية وليس الصورة ، فيمكن القيام بذلك على النحو التالي:

الصورة (صورة الخلفية: url (example2x.png) ؛ حجم الخلفية: 100 بكسل 200 بكسل ؛ / * حجم الخلفية البديل: يحتوي ؛ * / العرض: 100 بكسل ؛ الارتفاع: 200 بكسل ؛)

لكن إعداد حجم الخلفية غير مدعوم في IE 7 و 8.

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

لذلك يجب استخدام صورتين ، واحدة للشاشات البسيطة والأخرى لشاشات الشبكية.

الحل 2 مع CSS

هذا ينطبق بشكل أساسي على صور الخلفية.

الرمز (صورة الخلفية: url (example.png) ؛ العرض: 100 بكسل ؛ الارتفاع: 200 بكسل ؛) شاشة الوسائط فقط و (نسبة Webkit-min-device-pixel: 1.5) ،
الشاشة فقط و (-Moz-min-device-pixel-ratio: 1.5) ،
الشاشة فقط و (-o-min-device-pixel-ratio: 3/2) ،
الشاشة فقط و (أقل نسبة بكسل للجهاز: 1.5) ،
الشاشة فقط و (min - moz-device-pixel-ratio: 1.5) ،
الشاشة فقط و (الدقة الدنيا: 1.5dppx) (.icon (صورة الخلفية: url (example2x.png) ؛))

حيث تكون الصورة example.png 100x200 والصورة example2x.png هي 200x400

الحل 2 مع JavaSctipt

نستبدل الصور بأخرى كبيرة ، إذا لزم الأمر:

$ (document) .ready (function () (if (window.devicePixelRatio> 1) (var lowresImages = $ ("img")؛ images.each (الوظيفة (i) (var lowres = $ (this) .attr (" src ")؛ var highres = lowres.replace (". "،" @ 2x. ")؛ $ (this) .attr (" src "، highres)؛))؛)))؛

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