بصفتنا مطوّرين على الويب، نتعامل مع الصور طوال الوقت، وفي معظم الحالات، تكون المتصفّحات رائعة في تكبير الصور لتلائم حدود تصاميم مواقعنا الإلكترونية مع الحفاظ على جمال الصور. ولكن ماذا يحدث عندما تريد التحكّم في كيفية تغيير المتصفّح لحجم الصور على صفحتك؟
يقدّم الإصدار 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 (سيظلّ مفتوحًا لتنفيذ قيمة "الحواف الحادة"). أضِف علامة إلى المشكلة لتتبُّع عملية التنفيذ).