تحسين صور موقع الويب لعرض شبكية العين

Question

لقد كنت أحاول العثور على نهج جيد لحل مشكلة كومون جدا في عصر الشبكية.

دعنا نقول ما يلي معطى:

• إنشاء موقع على شبكة الانترنت مع الصور استجابة
• لا توجد صور خلفية كس
• يجب أن تعمل الوظائف الأساسية لمواقع الويب بدون شبيبة
• يجب تحسين صور مواقع الويب لعرض شبكية العين.

طريقة سهلة لحل هذا يمكن أن يكون شيئا من هذا القبيل:

<img src="img.jpg" data-highres="img@2x.jpg" />

وكتابة نوع من جس لمبادلة خارج إمغ.جبغ مع img@2x.jpg إذا تم الكشف عن جهاز شبكية العين.هذا من شأنه أن يعمل ، ولكن إذا دخلت الموقع على جهاز شبكية العين على حد سواء إمغ.جبغ و img@2x.jpg سيتم تحميلها.ليس عرض النطاق الترددي ودية للغاية: (

هل من الممكن بطريقة أو بأخرى لاعتراض وتغيير سرك من الصورة قبل تحميل سرك الأصلي?

أو هل لدى أي منكم نهج آخر في حل المشكلة?

Answer 1

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

1. وضع شعبة أو تمتد حيث تريد الصورة.نمط أن يكون أبعاد وتخطيط الصورة.أضف نوعا من علامة التعريف إليها حتى تتمكن من العثور عليها (على سبيل المثال. class="retina-image")
2. قم بتخزين معلومات حول الأحجام المختلفة للصور الموجودة على العنصر أو فيه (على سبيل المثال.باستخدام data-something سمات)
3. وضع <noscript><img src="..." alt="..."></script> داخل ديف
4. على دوم جاهزة:
   1. استخدام جس للعثور على جميع العناصر مع معرف من الخطوة 1
   2. كشف نوع الصورة التي تريدها
   3. ابحث عن السمة التي تخبرك بعنوان ورل الذي تريد استخدامه لتلك الصورة
   4. أضف الصورة إلى دوم داخل الحاوية من الخطوة 1

هذا هو النهج المستخدم من قبل مكتبة بيكتورفيل.

Answer 2

هذا من المحتمل أن تكون الطعم باللونين، ولكن هنا سنتان:

الاهتمام بشأن عرض النطاق الترددي هو مشكلة منصة متنقلة إلى حد كبير.بالنظر إلى أن معظم المنصات المتنقلة الحديثة تعتمد الآن عرض كثافة بكسل عالية، فإن الطلب على صور عالية الدقة من هذه الأجهزة سيكون مرتفعا جدا.لماذا تخدم 3 أضعاف دقة الصورة 90٪ من الوقت (منخفضة الدقة وصورة عالية الدقة) عندما يمكنك الخادم 2 أضعاف القرار 100٪ من الوقت؟

وبالتالي، في بعض السيناريوهات ، قد يكون من الأسهل أن تخدم الصور ذات الدقة المرتفعة (نصف أنماط العرض / الارتفاع) واتركها في ذلك - وبالتالي - وبالتالي - وبالتالي - وبالتالي - وبالتاليتوفير الوقت (باهظ الثمن) والطاقة في مكان آخر.في صناعة حيث يبدو أن كل شيء هو حل وسط، هذا في بعض الأحيان يجعل أكثر النهج.

Answer 3

أعتقد أن كوينتين أجاب بشكل أساسي على سؤالك.

ما يمكنني إضافته هو أنه في حين وجود عنصر إمغ دون سرك من الناحية الفنية ليس لكل المواصفات ، وحذف أنها لن كسر التعليمات البرمجية الخاصة بك وعليك تجنب التحميل المسبق.ثم يمكنك فقط الحصول على <img data-src="" data-src2=""> وتبادل الصور داخل / خارج باستخدام جافا سكريبت.ال <noscript> ربما يكون العنصر هو الطريقة "الصحيحة" للقيام بذلك ولكنه يجعل الكود مطولا حقا وقد سمعت أن بعض المتصفحات سيتم تحميلها مسبقا <noscript> الصور كذلك.

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

Answer 4

إذا كنت تفعل شيئا مع window.devicePixelRatio وحلقة من خلال الصور التي لديها data-highres السمة.

هذا هو الخام جدا ، ولكن يمكنك الحصول على بلدي الانجراف.

 $(document).ready(function() {
     if (window.devicePixelRatio > 1) {
         // retina
     } else {
         // default
     }
 });

استخدم صورة متحركة فارغة / واضحة 1 بكسل

<img src="clear.gif" data-basesrc="img1" />

ثم استخدم basesrc أتريبوت وإلحاق اسم الملف المناسب في جس الخاص بك.