رندر تصویر: پیکسلی

پل کینلان

به عنوان توسعه دهندگان وب، ما همیشه با تصاویر بازی می کنیم و در بیشتر موارد مرورگرها در مقیاس بندی تصاویر برای مطابقت با مرزهای طراحی سایت ما و در عین حال زیبا نگه داشتن تصاویر عالی هستند. اما چه اتفاقی می‌افتد وقتی می‌خواهید کنترل کنید که مرورگر چگونه تصاویر صفحه شما را مقیاس‌بندی می‌کند؟

کروم 41 (بتا در ژانویه 2015) یک ویژگی جدید CSS image-rendering: pixelated ( Spec ) که به شما کنترل کمی بر نحوه نمایش یک تصویر بزرگ شده توسط مرورگر می دهد.

ویژگی 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] مراجعه کنید).

اگر در حال ساختن یک ابزار فروش بلیط هواپیما، یا برنامه ای هستید که کدهای QR را نمایش می دهد، کاربر اغلب می خواهد که آن را تمام صفحه نمایش دهد تا اسکن آن آسان تر باشد، بنابراین کنترل رندر تصویر بسیار مهم است.

اگر علاقه مند به دیدن پیاده سازی هستید، شماره 317991 را بررسی کنید (برای اجرای مقدار لبه های واضح باز مانده است. برای ردیابی اجرا، موضوع را ستاره دار کنید).