سرعان ما أصبحت الشاشات ذات الكثافة العالية لوحدات البكسل هي القاعدة. يحتاج صنّاع المحتوى إلى التكيّف مع هذه الحقيقة. هذا دليل قصير حول كيفية عرض صور عالية الجودة على الويب في الوقت الحالي بدون رموز polyfill وJavaScript واختراقات CSS وميزات المتصفّح التي لم يتم تنفيذها بعد. باختصار: بدون إجراء تغييرات جذرية على سير عملك.
هناك العديد من اقتراحات الصور المتجاوبة مع مختلف الأجهزة اليوم، ويشمل الكثير منها تغييرات مهمة لمطوِّر الويب. من الصعب تطبيق سمة "<img> للمسار العادي" srcset
لا سيما أنّ اختيار 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.
ما مِن حاجة لاستخدام الصور للزوايا الدائرية، لأنّ السمة border-radius في CSS معتمَدة على نطاق واسع. وبالمثل، يتم دعم الخطوط المخصصة على نطاق واسع،
لذلك لا يُنصح باستخدام نص "imaged".
ومع ذلك، في بعض الحالات، مثل الشعارات، قد تكون الصورة هي الطريقة الوحيدة للأمام. على سبيل المثال، حجم شعار Chrome هذا طبيعي وهو 256x256. على شاشة Retina، يمكنك رؤية الاسم المستعار للخط عند الأقطار والمنحنيات، والذي يبدو مكشوفًا وغير ذي صلة، خاصةً عند مقارنته بالنص المعروض بدقة:
الأبعاد الطبيعية: 256x256px، حجم مادة العرض: 31 kB، التنسيق: PNG
هل أنت مقتنع؟ جيد. لنستخدم الآن صورة عالية الكثافة. قد تميل إلى توفير مساحة عن طريق تخزين شعارك بتنسيق JPEG، ولكن قد لا تكون هذه فكرة جيدة، لأن حفظ الشعارات والرسومات الأخرى بتنسيق ضائع يؤدي إلى إدخال عناصر. في هذه الحالة، بالغت في المشكلة باستخدام ضغط عالي للغاية، لكنني لاحظت التباين في التدرجات، والبقع على الخلفيات البيضاء والخطوط الفوضوية:
الأبعاد الطبيعية: 512x512px، حجم مادة العرض: 13 kB، التنسيق: JPEG
الشيء الذي يجب فعله للصور الصغيرة نسبيًا هو استخدام ملفات PNG بحجم 2x. انتبه إلى أن الفرق في الحجم بين 1x و2x PNG كبير بشكل عام (52 كيلو بايت في هذه الحالة). ومع ذلك، في حالة استخدام الشعار، يكون هو وجه الموقع الإلكتروني وأول شيء سيراه الزائرون. وعند الإهمال كثيرًا في الجودة مقابل الحجم، ستكون هذه هي آخر ما يراه زوّار موقعك الإلكتروني.
في ما يلي شعار Chrome بكل جماله، مصغرًا حجمه إلى نصف أبعاده الطبيعية للشاشات 2x:
الأبعاد الطبيعية: 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 تتضمن استطلاعًا لعدد من تقنيات الصور المتجاوبة المختلفة، وأجريت بعض الأبحاث حول ضغط 1x و2x JPEG ومقارنة الأحجام الناتجة وجودة الصورة المرئية. إليك أحد هذه المربّعات من المقالة أعلاه:
وقمت بتسمية الصور بمستوى الضغط (الذي يشار إليه بجودة JPEG)، وحجمها (بالبايت)، ورأيي الشخصي حول دقتها البصرية النسبية (مرتبة بالأرقام). الأمر المثير للاهتمام هنا هو أنّ الصورة المضغوطة بمعدّل 2x (المصنّفة 3) أصغر حجمًا وتبدو أفضل من الصورة غير المضغوطة 1x (المصنّفة 4). بعبارة أخرى، بين الصورتين 4 و3، نجحنا في تحسين جودة الصورة عن طريق مضاعفة كل بُعد وزيادة الضغط بشكل كبير، وفي الوقت نفسه تقليل الحجم بمقدار 2 كيلوبايت.
الضغط والأبعاد وجودة المرئيات
وأردت الحصول على معلومات أكثر حول المفاضلات بين مستوى الضغط وأبعاد الصورة وجودة الصورة وحجمها. لقد أجريت دراسة بالفرضية التالية استنادًا إلى الدراسة أعلاه:
الفرضية
عند الضغط بدرجة كافية، ستبدو الصورة 2x مماثلة للصورة نفسها بحجم 1x عند ضغط آخر (أدنى). ومع ذلك، في هذه الحالة، ستكون الصورة المضغوطة بدرجة 2x أصغر حجمًا من الصورة 1x.
العملية
- وبالنظر إلى صورة 2x، يمكنك إنشاء صورة 1x.
- اضغط كلتا الصورتَين على مستويات مختلفة.
- إنشاء صفحة اختبار تعرض مجموعتَي الصور جنبًا إلى جنب.
- ابحث عن المكان في المجموعتَين حيث تكون الصورتان متساويتَين.
- لاحظ الأحجام المكافئة للصور ومستويات الضغط.
- يمكنك تجربته على شاشة 1x و2x.
لقد أنشأت تطبيقًا لمقارنة الصور جنبًا إلى جنب يشبه طريقة العرض في 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).
لمزيد من القراءة، يمكنك الاطّلاع على مقالة "سكوت جيل" حول موضوع مماثل. قد تبدو صورك واضحة ويكون استخدام بيانات الخلية منخفضًا!