أصبحت شاشات العرض ذات كثافة وحدات البكسل العالية هي القاعدة بسرعة. وعلى صنّاع المحتوى التأقلم مع هذه الحقيقة. هذا دليل موجز حول كيفية عرض صور عالية الجودة على الويب اليوم، بدون استخدام 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 أنّه يتمتع بكثافة بكسل عالية، لأنّ ذلك يعني أنّ وحدات البكسل في CSS
لا تتطابق مع وحدات البكسل على الجهاز، وأنّه يتم تكبير الصور.
إليك موجز بأهم التفاصيل:
- استخدِم CSS/SVG بدلاً من الصور المخصّصة للطباعة، إن أمكن.
- استخدِم الصور المحسَّنة تلقائيًا للشاشات ذات الكثافة العالية.
- استخدِم ملفات PNG للرسومات البسيطة والفن المكوّن من وحدات البكسل (مثل الشعارات).
- استخدِم ملفات JPEG مضغوطة للصور التي تتضمّن مجموعة متنوعة من الألوان (مثل الصور).
- اضبط دائمًا أحجامًا واضحة (باستخدام CSS أو HTML) على جميع عناصر الصور.
الرسومات البسيطة والفن المكوّن من وحدات بكسل
يمكن غالبًا تجنُّب استخدام الصور الصغيرة تمامًا باستخدام ميزات CSS أو SVG.
لا حاجة إلى استخدام صور للزوايا المستديرة، على سبيل المثال، لأنّه
تتوفّر خاصية CSS border-radius على نطاق واسع. وبالمثل، تتوفّر الخطوط
المخصّصة على نطاق واسع، لذا لا يُنصح باستخدام نص "مُصوّر".
ومع ذلك، في بعض الحالات، مثل الشعارات، قد تكون الصورة هي الطريقة الوحيدة للمضي قدمًا. على سبيل المثال، يبلغ حجم شعار Chrome هذا 256 × 256 بكسل. على شاشة Retina، يمكنك رؤية تمويه الخطوط عند الخطوط القطرية والمنحنيات، والذي يبدو هائلاً وقبيحًا، خاصةً عند مقارنته بالنص الذي يتم عرضه بوضوح:
الأبعاد الطبيعية: 256x256px، حجم مادة العرض: 31 kB، التنسيق: PNG
هل اقتنعت؟ جيد لنستخدم الآن صورة ذات كثافة عالية. قد تميل إلى توفير المساحة من خلال تخزين شعارك بتنسيق JPEG، ولكن قد لا يكون ذلك فكرة جيدة، لأنّ حفظ الشعارات والرسومات الأخرى بتنسيق ضياع يؤدي إلى ظهور عناصر زائدة. في هذه الحالة، صعّبت المشكلة باستخدام ضغط عالٍ جدًا، ولكن لاحظ الفرق في التدرجات اللونية والنقاط الكثيفة على الخلفيات البيضاء والخطوط الفوضوية:
الأبعاد الطبيعية: 512x512px، حجم مادة العرض: 13 kB، التنسيق: JPEG
بالنسبة إلى الصور الصغيرة نسبيًا، يجب استخدام ملفات PNG بحجم 2x. يُرجى العِلم أنّ الفرق في الحجم بين صورة 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)، وحجمها (بوحدة البايت)، ورأيي الشخصي بشأن دقة التصوير المرئي المقارن (المرتَّب حسب الأرقام). المثير للاهتمام هو أنّ الصورة المضغوطة بدرجة كبيرة بمقدار ضعف (المصنّفة بالرمز 3) أصغر حجمًا مقارنةً بالصورة غير المضغوطة بمقدار مرة واحدة (المصنّفة بالرمز 4) وتبدو أفضل. بعبارة أخرى، بين الصورتَين 4 و3، تمكّنا من تحسين جودة الصورة من خلال مضاعفة كلّ سمة وزيادة ضغطها بشكلٍ كبير، وفي الوقت نفسه، تم تقليل حجمها بقيمة 2 كيلوبايت.
الضغط والأبعاد والجودة المرئية
أردت الحصول على مزيد من الإحصاءات حول المفاضلات بين مستوى compression وأبعاد الصورة والجودة المرئية وحجم الصورة. أجريتُ دراسة باستخدام الفرضية التالية استنادًا إلى الدراسة أعلاه:
الفرضية
من خلال الضغط الكافي، ستبدو الصورة التي تم تصغيرها بنسبة %100 مماثلة للصورة نفسها بالحجم الكامل عند استخدام نسبة ضغط أخرى (أدنى). ومع ذلك، في هذه الحالة، ستكون الصورة المضغوطة بدرجة كبيرة بدقة 2x أصغر حجمًا من الصورة بدقة 1x.
معالجة
- إنشاء صورة بحجم 1 مرة من صورة بحجم 2 مرة
- ضغط كلتا الصورتين بمستويات مختلفة
- أنشئ صفحة اختبار تعرض كلتا مجموعتَي الصور جنبًا إلى جنب.
- ابحث عن المكان في مجموعتَي الصور حيث تكون الصور متطابقة.
- يُرجى ملاحظة أحجام الصور ومستويات الضغط المماثلة.
- جرِّب ذلك على كل من سرعة العرض العادية وسرعة العرض المزدوجة.
لقد أنشأتُ تطبيقًا لمقارنة الصور جنبًا إلى جنب يشبه وضع مقارنة في Lightroom. تهدف هذه الميزة إلى عرض صور 1x و2x جنبًا إلى جنب، مع السماح لك أيضًا بتكبير أي قسم من الصورة للحصول على مزيد من التفاصيل. يمكنك أيضًا الاختيار بين تنسيقَي JPEG وWebP وتغيير جودة الضغط للاطّلاع على مقارنات بين حجم الملف و جودة الصورة. والفكرة هي تعديل الإعدادات على عدة صور، وتحديد جودة الضغط والتكبير والتنسيق مقابل جودة الصورة التي تناسبك، واستخدام هذا الإعداد لجميع صورك.
يمكنك استخدام الأداة بنفسك. يمكنك تكبير الصورة من خلال اختيار منطقة فرعية لتكبيرها.
التحليل
سأقول مقدّمًا أنّ جودة الصورة هي أمر ذاتي. بالإضافة إلى ذلك، من المحتمل أن تحدِّد حالة الاستخدام الخاصة بك أولوياتك في نطاقات الدقة البصرية مقابل حجم الملف. بالإضافة إلى ذلك، تتفاعل الأنواع المختلفة من ميزات الصور بشكلٍ مختلف مع جودة التصغير والضغط، لذلك قد لا يكون الحلّ المناسب لجميع الحالات فعّالاً هنا بالضرورة. الغرض من الأداة هو مساعدتك في اكتساب حدس بشأن جودة الصور ومقاييس الضغط والتنسيقات.
من خلال استخدام أداة تكبير/تصغير الصور، لاحظتُ بسرعة
بعض الأمور. أولاً، أفضّل استخدام quality=30 dpr=2x صورة بدلاً من quality=90
dpr=1x صورة لزيادة التفاصيل. تتشابه هذه الصور
من حيث حجم الملف أيضًا (في حالة الطائرة، يبلغ حجم الصورة المضغوطة بمقدار ضعف حجمها الأصلي 76
كيلوبايت، في حين يبلغ حجم الصورة غير المضغوطة بمقدار ضعف حجمها الأصلي 80 كيلوبايت).
الاستثناءات لهذه القاعدة هي الصور المضغوطة بدرجة عالية (quality<30) التي تحتوي على
تدرّجات. وغالبًا ما تعاني هذه الصور من خطوط ألوان، ما يؤثر سلبًا في الجودة بغض النظر عن حجم الصورة. وتعدّ عينات الطيور والسيارات المتوفّرة في الأداة مثالاً على ذلك.
تبدو صور WebP أنظف بكثير من صور JPEG، لا سيما عند استخدام مستويات ضغط منخفضة. يبدو أنّ مشكلة نطاقات الألوان هذه أقلّ بكثير. أخيرًا، تكون صور WebP أكثر صغرًا.
تنبيهات
إنّ جعل الصور تبدو جيدة على شاشات عالية الكثافة هو نصف المشاكل المتعلّقة بالصور والتي تحدث بسبب الاختلاف الكبير في الشاشات. في بعض الحالات، قد تحتاج إلى عرض صور مختلفة تمامًا استنادًا إلى حجم إطار العرض. على سبيل المثال، قد تكون صورة أوباما العلوية مناسبة لشاشة بحجم الهاتف، ولكن قد تكون المنصة أمامه والعلم خلفه وبعض التفاصيل الأخرى مناسبة بشكل أفضل لشاشة الكمبيوتر المحمول.
تجنّبتُ عمدًا موضوع "التوجيه الفني" للتركيز على الصور التي تتميز بكثافة عالية لنقاط الصورة
فقط. يمكن حلّ هذه المشكلة من خلال عدد من الخطوات المختلفة: باستخدام طلبات البحث عن الوسائط وصور الخلفية، أو من خلال JavaScript، أو من خلال بعض الميزات الجديدة مثل image-set، أو على الخادم. يتم تناول هذا الموضوع
في مقالة صور بدرجة دقة عالية لكثافة وحدات البكسل المتغيرة.
سأختتم هذه المحادثة ببعض المشاكل التي لم يتم حلّها:
- تأثيرات الضغط العالي على الأداء ما هي العقوبات المفروضة على فك ترميز الصور المضغوطة للغاية؟
- ما هي عقوبات الأداء الناتجة عن الحاجة إلى تصغير حجم الصورة عند تحميل صورة بحجم 2x على شاشة بحجم 1x؟
باختصار، استخدِم CSS وSVG بدلاً من استخدام الصور المركّبة. إذا كانت الصور المركّبة مطلوبة بشكل صارم، استخدِم ملفات PNG للصور التي تحتوي على لوحات ألوان محدودة والعديد من الألوان الثابتة، واستخدِم ملفات JPEG للصور التي تحتوي على العديد من الألوان والتدرّجات اللونية. والميزة الرائعة في هذا النهج هي أنّه لا يتغيّر الترميز عمليًا. كل ما على مطوّر الويب هو إنشاء مواد عرض بحجمَين وضبط حجم صورك بشكل صحيح في نموذج DOM.
لمزيد من القراءة، يمكنك الاطّلاع على مقالة Scott Jehl حول موضوع مشابه. نتمنّى أن تظهر صورك بدقة عالية وأن يكون استخدام بيانات شبكة الجوّال منخفضًا.