سرعان ما أصبحت الشاشات ذات الكثافة العالية البكسل هي القاعدة. وعلى صنّاع المحتوى التأقلم مع هذه الحقيقة. هذا دليل موجز حول كيفية عرض صور عالية الجودة على الويب اليوم، بدون استخدام polyfills و JavaScript وحيل CSS وميزات المتصفّح التي لم يتم تنفيذها بعد . بعبارة أخرى، بدون إجراء تغييرات جذرية على سير عملك.
هناك العديد من اقتراحات الصور سريعة الاستجابة اليوم، ويشتمل الكثير منها على
تغييرات مهمة لمطور الويب. من الصعب تنفيذ سمة srcset
<img> المتوافقة مع المعايير، لا سيما مع
تعقيد الاختيار الإضافي المستنِد إلى مساحة العرض في srcset:
banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x
ومع أنّ سمة image-set في CSS تستخدم devicePixelRatio فقط لتحديد الصورة المطلوب تحميلها، فإنّها لا تزال تجبر المطوّرين على كتابة الكثير من الترميزات الإضافية لكل صورة.
وتكون الاقتراحات الأخرى، مثل عنصر <picture>، أكثر إطالة.
علاوة على ذلك، فهي ليست مسارًا للمعايير، لذا فإن توفرها
في كل مكان أبعد من سمة srcset. تُعد حلول JavaScript
والحلول من جهة الخادم البديل الوحيد الآخر، غير أنّ هذه
الأساليب لها عيوبها الخاصة كما هو موضّح في المقالات الأخرى.
ستتناول هذه المقالة العديد من استخدامات الصور الشائعة على
الويب وتقترح حلولاً بسيطة تعمل على الشاشات التي تتميز بكثافة بكسل عالية بالإضافة إلى الشاشات العادية. لأغراض هذه المناقشة، أي جهاز يُبلغ عن window.devicePixelRatio أكبر من 1 يمكن اعتباره نقاط DPI عالية، لأنّ ذلك يعني أن وحدات بكسل CSS
ليست هي نفسها وحدات بكسل الجهاز، وأنه يتم تكبير حجم الصور.
إليك موجز بأهم التفاصيل:
- استخدِم CSS/SVG بدلاً من الصور المخصّصة للطباعة، إن أمكن.
- استخدِم الصور المحسَّنة تلقائيًا للشاشات ذات الكثافة العالية.
- استخدِم ملفات PNG للرسومات البسيطة والفن المكوّن من وحدات البكسل (مثل الشعارات).
- استخدِم ملفات JPEG مضغوطة للصور التي تتضمّن مجموعة متنوعة من الألوان (مثل الصور).
- اضبط دائمًا أحجامًا واضحة (باستخدام CSS أو HTML) على جميع عناصر الصور.
رسومات بسيطة وفن البكسل
يمكن غالبًا تجنُّب استخدام الصور الصغيرة تمامًا باستخدام ميزات CSS أو SVG.
ولن تكون هناك حاجة لاستخدام صور للزوايا المستديرة، على سبيل المثال، لأنّ سمة CSS border-radius متاحة على نطاق واسع. وبالمثل، تتوفّر الخطوط
المخصّصة على نطاق واسع، لذا لا يُنصح باستخدام نص "مُصوّر".
مع ذلك، في بعض الحالات، مثل الشعارات، قد تكون الصورة هي الطريقة الوحيدة للأمام. على سبيل المثال، يبلغ الحجم الطبيعي لشعار Chrome هذا 256×256. على شاشة ريتينا، يمكنك رؤية التسمية المستعارة للخط على القطر والمنحنيات، والتي تبدو مكعبة وسيئة، لا سيما عند مقارنتها بالنص المعروض بشكل واضح:
الأبعاد الطبيعية: 256x256px، حجم مادة العرض: 31 kB، التنسيق: PNG
هل اقتنعت؟ جيد لنستخدم الآن صورة ذات كثافة عالية. قد تميل إلى توفير المساحة من خلال تخزين شعارك بتنسيق JPEG، ولكن قد لا يكون ذلك فكرة جيدة، لأنّ حفظ الشعارات والرسومات الأخرى بتنسيق غير قابل للترميم يؤدي إلى ظهور عيوب. في هذه الحالة، قد بالغت في المشكلة باستخدام ضغط عالٍ للغاية، لكنني لاحظت التباين على التدرجات، والنقاط على الخلفيات البيضاء والخطوط الفوضوية:
الأبعاد الطبيعية: 512x512px، حجم مادة العرض: 13 kB، التنسيق: JPEG
الشيء الذي يجب فعله للصور الصغيرة نسبيًا هو استخدام صورتين بتنسيق PNG. ويجب الانتباه إلى أنّ الفرق في الحجم بين ملف PNG، و1x و2x، يكون عادةً كبيرًا إلى حد ما (52 كيلوبايت في هذه الحالة). في المقابل، يمثّل الشعار هوية موقعك الإلكتروني وأول ما سيرىه الزوّار. ومن خلال التقليل كثيرًا من الجودة مقابل الحجم، ستكون أيضًا آخر شيء سيراه الزوار!
في ما يلي شعار Chrome بجميع تفاصيله، تم تصغير حجمه إلى نصفه الطبيعي لتناسب الشاشات التي تُظهر المحتوى بضعف الحجم:
الأبعاد الطبيعية: 512x512px، حجم مادة العرض: 83 kB، التنسيق: PNG
الترميز اللازم لعرض الإعلانات أعلاه هو ما يلي:
<img src="chrome2x.png" style="width: 256px; height: 256px;"/>
لاحظ أنني حددت عرضًا وارتفاعًا في الصورة. وهذا ضروري لأن الحجم الطبيعي للصورة هو 512 بكسل. كما أنه جيد للأداء لأن محرك العرض يفهم حجم العنصر بشكل جيد ولن يحتاج إلى بذل مجهود كبير في حسابه.
ويتمثل أحد التحسينات المحتملة التي قد تنجح في تقليل تنسيق PNG 24 بت إلى صورة 8 بت ذات ألوان متعدّدة. يعمل هذا مع الصور التي تحتوي على عدد صغير من الألوان، بما في ذلك شعار Chrome. ولإجراء هذا التحسين، يمكنك استخدام أداة مثل http://pngquant.org/. يمكنك رؤية بعض الخطوط هنا، ولكن حجم هذا الملف هو 13 كيلوبايت فقط، ما يمثّل توفيرًا كبيرًا في الحجم يتجاوز 6 أضعاف مقارنةً بملف PNG الأصلي بدقة 512×512.
الأبعاد الطبيعية: 512x512px، حجم مادة العرض: 13 kB، التنسيق: PNG,
8-bit palette
صور بألوان متنوعة
لقد كتبتُ مقالة على HTML5Rocks تتناول عددًا من أساليب الصور المختلفة المتوافقة مع مختلف الأجهزة، وأجريتُ بعض الأبحاث حول ضغط JPEG بدرجة 1x و2x ومقارنة الأحجام الناتجة والجودة المرئية. إليك أحد هذه الأقسام من المقالة أعلاه:
لقد قمت بتسمية الصور بمستوى الضغط الخاص بها (يشار إليه بجودة JPEG) وحجمها (بالبايت) ورأيي الذاتي في دقتها البصرية النسبية (مرتبة بالأرقام). الأمر المثير للاهتمام هنا هو أن الصورة المضغوطة بدرجة كبيرة 2x (التصنيف 3) تكون أصغر في الحجم وتبدو أفضل من الصورة غير المضغوطة 1x (التصنيف 4). بعبارة أخرى، بين الصورتَين 4 و3، تمكنّا من تحسين جودة الصورة من خلال مضاعفة كل بُعد وزيادة الضغط بشكل ملحوظ، وفي الوقت نفسه تقليل الحجم بمقدار 2 كيلوبايت.
الضغط والأبعاد والجودة المرئية
أردت الحصول على مزيد من الإحصاءات حول المفاضلات بين مستوى الضغط وأبعاد الصورة والجودة المرئية وحجم الصورة. أجريتُ دراسة باستخدام الفرضية التالية استنادًا إلى الدراسة أعلاه:
الفرضية
من خلال الضغط الكافي، ستبدو الصورة التي تم تصغيرها بمقدار الضِعف مماثلة للصورة نفسها بالحجم الكامل عند استخدام مستوى ضغط آخر (أدنى). ولكن في هذه الحالة، سيكون حجم الصورة المضغوطة بدرجة كبيرة 2x أصغر من حجم الصورة 1x.
معالجة
- إذا كانت الصورة أكبر بمرتَين، يمكنك إنشاء صورة بحجم 1x.
- ضغط الصورتين على مستويات مختلفة
- إنشاء صفحة اختبارية تعرض مجموعتَي الصور جنبًا إلى جنب
- ابحث عن المكان في المجموعتين حيث تكون الصور متكافئة.
- يُرجى ملاحظة أحجام الصور ومستويات الضغط المماثلة.
- جرِّب الميزة على كل من سرعة العرض العادية وسرعة العرض المزدوجة.
لقد أنشأتُ تطبيقًا لمقارنة الصور جنبًا إلى جنب يشبه وضع مقارنة في Lightroom . تهدف هذه الميزة إلى عرض صور 1x و2x جنبًا إلى جنب، مع السماح لك أيضًا بتكبير أي قسم من الصورة للحصول على مزيد من التفاصيل. يمكنك أيضًا الاختيار بين تنسيقَي JPEG وWebP وتغيير جودة الضغط للاطّلاع على مقارنات بين حجم الملف و جودة الصورة. والفكرة هي تعديل الإعدادات على عدة صور، وتحديد جودة الضغط والتكبير والتنسيق مقابل جودة الصورة التي تناسبك، واستخدام هذا الإعداد لجميع صورك.
يمكنك استخدام الأداة بنفسك. يمكنك تكبير الصورة من خلال اختيار منطقة فرعية لتكبيرها.
التحليل
سأقول مقدمًا إن جودة الصورة شيء ذاتي. بالإضافة إلى ذلك، من المحتمل أن تحدِّد حالة الاستخدام الخاصة بك أولوياتك في نطاقات دقة المحتوى المرئي مقارنةً بحجم الملف. بالإضافة إلى ذلك، تتفاعل أنواع مختلفة من ميزات الصور بشكل مختلف مع جودة القياس والضغط، لذلك قد لا يتوفّر حل واحد يناسب الجميع بالضرورة هنا. الغرض من الأداة هو مساعدتك في اكتساب حدس بشأن جودة الصور وعمليات الضغط والمقاييس والتنسيقات.
من خلال استخدام أداة تكبير/تصغير الصور، لاحظتُ بسرعة
بعض الأمور. أولاً، أفضّل الصور البالغ عددها quality=30 dpr=2x على quality=90
dpr=1x للصور لزيادة التفاصيل. هذه الصور قابلة للمقارنة من حيث حجم الملف أيضًا (في حالة الطائرة، حجم الصورة المضغوطة 2x هو 76 كيلوبايت، بينما يبلغ حجم 1x غير المضغوط 80 كيلوبايت).
استثناءات هذه القاعدة هي صور مضغوطة بدرجة كبيرة (quality<30) ذات تدرجات. وغالبًا ما تعاني هذه الصور من خطوط ألوان، ما يؤثر سلبًا في الجودة بغض النظر عن حجم الصورة. وتعدّ عينات الطيور والسيارات المتوفّرة في الأداة مثالاً على ذلك.
تبدو صور WebP أنظف بكثير من صور JPEG، خاصةً عند استخدام مستويات ضغط منخفضة. يبدو أنّ مشكلة نطاقات الألوان هذه أقلّ بكثير. أخيرًا، تكون صور WebP أكثر صغرًا.
التحذيرات
إنّ جعل الصور تبدو جيدة على شاشات عالية الكثافة هو نصف المشاكل المتعلّقة بالصور والتي تحدث بسبب الاختلاف الكبير في الشاشات. في بعض الحالات، قد ترغب في عرض صور مختلفة تمامًا اعتمادًا على حجم إطار العرض. على سبيل المثال، قد تكون صورة أوباما العلوية مناسبة لشاشة بحجم الهاتف، ولكن قد تكون المنصة أمامه والعلم خلفه وبعض التفاصيل الأخرى مناسبة بشكل أفضل لشاشة الكمبيوتر المحمول.
تجنّبت عمدًا موضوع "التوجيه الفني" هذا للتركيز على الصور التي تتميز بكثافة عالية لنقاط الصورة
فقط. يمكن حلّ هذه المشكلة من خلال عدد من الخطوات المختلفة: باستخدام طلبات البحث عن الوسائط وصور الخلفية، أو من خلال JavaScript، أو من خلال بعض الميزات الجديدة مثل image-set، أو على الخادم. يتم تناول هذا الموضوع
في صور عالية النقاط لكل بوصة (DPI) لكثافة متغيرة في البكسل.
سأسجل الخروج مع بعض المشكلات المفتوحة:
- تأثيرات الضغط العالي على الأداء ما هي العقوبات المفروضة على فك ترميز الصور المضغوطة للغاية؟
- ما العقوبات التي يتم فرضها على الأداء بسبب الاضطرار إلى تغيير حجم الصورة عند تحميل صورة 2x على شاشة 1x؟
باختصار، استخدِم CSS وSVG بدلاً من استخدام الصور المركّبة. وإذا كانت الصور النقطية مطلوبة بشدة، استخدم ملفات PNG للصور ذات اللوحات المحدودة والعديد من الألوان الخالصة، واستخدم صور JPEG للصور التي تحتوي على العديد من الألوان والتدرجات. الشيء الرائع في هذا النهج هو أن الترميز الخاص بك لم يتغير تقريبًا. كل ما على مطوّر الويب هو إنشاء مواد عرض بحجمَين وضبط حجم صورك بشكل صحيح في نموذج DOM.
لمزيد من القراءة، يمكنك الاطّلاع على مقالة Scott Jehl حول موضوع مشابه. قد تبدو صورك حادة ويكون استخدام بيانات الخلية منخفضًا!