ইমেজ-রেন্ডারিং: পিক্সেলেড

পল কিনলান

ওয়েব ডেভেলপার হিসেবে আমরা সব সময় ইমেজ নিয়ে খেলি এবং বেশিরভাগ ক্ষেত্রেই ব্রাউজারগুলি আমাদের সাইটের ডিজাইনের সীমারেখার সাথে মানানসই ইমেজগুলিকে সুন্দর রাখার জন্য ইমেজ স্কেল করার ক্ষেত্রে দুর্দান্ত। কিন্তু যখন আপনি নিয়ন্ত্রণ করতে চান যে ব্রাউজার আপনার পৃষ্ঠার চিত্রগুলিকে কীভাবে স্কেল করে তা নিয়ন্ত্রণ করতে চান?

Chrome 41 (জানুয়ারি 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] দেখুন)।

আপনি যদি একটি এয়ারলাইন টিকিটিং টুল বা এমন একটি অ্যাপ তৈরি করেন যা QR কোডগুলি প্রদর্শন করে তবে প্রায়শই ব্যবহারকারী এটিকে পূর্ণ স্ক্রিন করতে চান যাতে এটি স্ক্যান করা সহজ হয়, তাই চিত্র-রেন্ডারিং নিয়ন্ত্রণ করা গুরুত্বপূর্ণ।

আপনি যদি ইমপ্লিমেন্টেশন দেখতে আগ্রহী হন তাহলে ইস্যু 317991 চেকআউট করুন (এটি ক্রিস্প-এজস ভ্যালু বাস্তবায়নের জন্য খোলা রাখা হয়েছে। ইমপ্লিমেন্টেশন ট্র্যাক করতে সমস্যাটিকে স্টার করুন)।