بصفتنا مطوّرين على الويب، نتعامل مع الصور طوال الوقت، وفي معظم الحالات، تكون المتصفّحات رائعة في تكبير الصور لتلائم حدود تصاميم مواقعنا الإلكترونية مع الحفاظ على جمال الصور. ولكن ماذا يحدث عندما تريد التحكم في كيفية ضبط المتصفح للصور على صفحتك؟
يقدّم الإصدار 41 من Chrome (الإصدار التجريبي في كانون الثاني (يناير) 2015) خاصية جديدة في CSS image-rendering: pixelated (المواصفات) تمنحك مزيدًا من التحكّم في كيفية عرض المتصفّح لصورة تم تكبيرها.
تُعدّ سمة CSS image-rendering والقيمة pixelated مثيرتين للاهتمام لأنّهما توقِفان التكبير/التصغير السلس العادي للمتصفّح (عادةً التداخل الخطي الثنائي) ويحلّان محلّه خوارزمية تكبير/تصغير أخرى (أقرب جار في معظم الحالات) عند تغيير حجم الصور.
لنفترض أنّ لديك صورة بحجم 2×2 بكسل ووسّعتها إلى 100×100 بكسل، سيعرض المتصفّح الصورة بطريقة لا تجعلها تبدو متكتّلة. على سبيل المثال:
هناك العديد من الحالات التي لا تريد فيها استخدام هذا السلوك المُلطِّف، ويمكنك بدلاً من ذلك استخدام طريقة تحافظ على تمثيل أكثر دقة للصورة.
للحصول على هذا التأثير، ما عليك سوى تطبيق image-rendering: pixelated; على صورتك على النحو التالي.
<img
style="image-rendering: pixelated;"
width="100" height="100"
src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
تجربة العرض التوضيحي كما يمكنك ملاحظة أنّ تطبيق السمة له تأثير كبير في طريقة عرض الصورة.
يمكن تطبيق هذه السمة في العديد من الأماكن:
<img>من العناصر<canvas style="image-rendering: pixelated">من العناصر- أيّ عنصر يتضمّن السمة
background-image
لَمْ أَفْهَمِ الْمَقْصُودْ بَعْدُ. أين يمكنني استخدام هذا الإجراء؟
إذا كنت تعرض فقط صورًا على موقعك الإلكتروني، من المحتمل أنّك لا تريد ذلك.
ومن الأمثلة الرائعة على ذلك الألعاب، حيث عليك غالبًا تكبير اللوحة لكي تلائم حجم الشاشة بشكل صحيح. قبل استخدام سمة CSS هذه، كان المتصفح يُدخل بين الإطارات بطريقة تجعل اللوحة تبدو مموهة (راجِع المعلومات أدناه [sic]).
إذا كنت تعمل على إنشاء أداة لتذاكر الطيران أو تطبيقًا يعرض رموز الاستجابة السريعة، سيرغب المستخدمون كثيرًا في ملء الشاشة لتسهيل مسحها ضوئيًا، وبالتالي يكون التحكّم في عرض الصورة أمرًا بالغ الأهمية.
إذا كنت مهتمًا بالاطّلاع على عملية التنفيذ، يُرجى الاطّلاع على الطلب 317991 (سيظلّ مفتوحًا لتنفيذ قيمة "الحواف الحادة"). أضِف علامة النجمة إلى المشكلة لتتبُّع عملية التنفيذ).