বিভিন্ন ওয়েব অ্যাপ্লিকেশনের জন্য QA প্রতিক্রিয়াশীল চিত্র পলিফিল API
Picturefill হল একটি ব্যবহার করা সহজ, স্মার্ট এবং প্রতিক্রিয়াশীল API যা ব্যবহারকারীরা ডিভাইসের উপর নির্ভর করে সঠিক আকার, স্ক্রীন রেজোলিউশন এবং আরও অনেক কিছু দেখতে পাচ্ছেন তা নিশ্চিত করতে বিভিন্ন ওয়েব অ্যাপ্লিকেশনে ব্যবহার করা যেতে পারে।
একটি প্রতিক্রিয়াশীল ইমেজ পলিফিল API হিসাবে, Picturefill ওপেন সোর্স এবং বিনামূল্যে ব্যবহার করা যায় এবং জাভাস্ক্রিপ্ট এবং HTML ব্যবহার করে বিকাশ করা হয়েছে। প্রধানত অ্যাপ্লিকেশনগুলির সামনের প্রান্তের জন্য ব্যবহৃত হয়, এটি যে কোনও প্রকল্পে একটি দুর্দান্ত সংযোজন করতে পারে যেখানে শেষ ব্যবহারকারীদের বিভিন্ন ডিভাইস থাকতে পারে যেগুলিতে তারা অ্যাপ্লিকেশন অ্যাক্সেস করে।
Picturefill ব্রাউজারে ছবি এবং Img উপাদানগুলির জন্য অতিরিক্ত সমর্থন এবং বৈশিষ্ট্য প্রদান করে। এটি নিশ্চিত করার একটি সহজ উপায় যে আপনার ব্যবহারকারীরা যে ডিভাইস থেকে আপনার ওয়েবসাইট অ্যাক্সেস করছে না কেন, ছবিগুলি স্বয়ংক্রিয়ভাবে তাদের স্ক্রীনের আকার এবং রেজোলিউশনের সাথে সামঞ্জস্য করে। সাফারি, ইন্টারনেট এক্সপ্লোরার 9, গুগল ক্রোম মজিলা ফায়ারফক্স এবং আরও অনেক কিছু সহ অনেক ব্রাউজারগুলির জন্য পিকচারফিল পরীক্ষা করা হয়েছে।
PictureFill দিয়ে শুরু করা
NPM এর মাধ্যমে PictureFill ইনস্টল করার প্রস্তাবিত উপায়। এটি ইনস্টল করতে নিম্নলিখিত কমান্ড ব্যবহার করুন.
NPM এর মাধ্যমে PictureFill ইনস্টল করুন
npm install picturefill
ফ্রি জাভাস্ক্রিপ্ট API এর মাধ্যমে প্রতিক্রিয়াশীল ছবি যোগ করুন
ওপেন-সোর্স পিকচারফিল লাইব্রেরি জাভাস্ক্রিপ্ট ডেভেলপারদের তাদের সাইটে প্রতিক্রিয়াশীল ছবি যোগ করার অনুমতি দেয়, যাতে নিশ্চিত করা হয় যে উচ্চ পিক্সেল ঘনত্বের ভিউপোর্টের দর্শকরা উচ্চ রেজোলিউশনের সম্পদ দেখতে পারে এবং এটি সেই অনুযায়ী সামঞ্জস্য করে। একইভাবে, আপনি ব্রাউজারটিকে বেশ কয়েকটি চিত্র প্রদান করতে পারেন যা অভিন্ন কিন্তু বিভিন্ন আকারের। Picturefill বাছাই করবে এবং আপনার ব্যবহারকারীর বর্তমান ভিউপোর্টের আকার, প্রদর্শনের ঘনত্ব এবং ওয়েবসাইটের বিন্যাসে সম্পদের আকারের জন্য সেরা উৎস প্রদান করবে। Picturefill ডেভেলপারদের ব্যবহারকারীর ভিউপোর্টের উপর নির্ভর করে কোন ছবিগুলি প্রদর্শিত হবে তা সিদ্ধান্ত নিতে দেয়। ছবির উপাদানের সাহায্যে, আপনি বিভিন্ন আকার, জুম স্তর, আকৃতির অনুপাত ইত্যাদি নির্দিষ্ট করতে পারেন।
বিনামূল্যে জাভাস্ক্রিপ্ট API এর মাধ্যমে ইমেজ ব্রেকপয়েন্ট নির্দিষ্ট করুন
Picturefill-এর আরেকটি বৈশিষ্ট্য হল ওয়েবসাইটে সোর্স ইমেজগুলির জন্য বিভিন্ন রেজোলিউশন বিকল্পগুলির সাথে নির্দিষ্ট ইমেজ ব্রেকপয়েন্টগুলিকে সংজ্ঞায়িত করার ক্ষমতা। Picturefill নির্দিষ্ট ফরম্যাটে সমর্থিত নয় এমন ইমেজ ফরম্যাটের জন্য ফলব্যাক ছবি নির্ধারণ করার বিকল্পও প্রদান করে। এইভাবে আপনার ওয়েবসাইট চিত্র প্রদর্শন ত্রুটি দেখাবে না।
ব্রাউজার সমর্থন
ওপেন সোর্স পিকচারফিল লাইব্রেরি বিভিন্ন ধরণের ব্রাউজারগুলির জন্য সম্পূর্ণ সমর্থন প্রদান করেছে। লাইব্রেরিটি পরীক্ষিত এবং ফায়ারফক্স, গুগল ক্রোম, ইন্টারনেট এক্সপ্লোরার, সাফারি, অপেরা এবং আরও অনেকগুলি ব্রাউজারে মসৃণভাবে কাজ করে৷ জাভাস্ক্রিপ্ট অক্ষম করা হলে, ব্রাউজার একটি ফলব্যাক হিসাবে alt অ্যাট্রিবিউট টেক্সট দেখতে পারে। লাইব্রেরিতে IE9 এবং এমনকি পুরানো সংস্করণের জন্য সম্পূর্ণ সমর্থন অন্তর্ভুক্ত করা হয়েছে। IE9 এবং তার পরের জন্য, আপনাকে আপনার ছবির ট্যাগের উৎস উপাদানগুলির চারপাশে একটি ভিডিও উপাদানের মোড়ক মোড়ানো প্রয়োজন। নিম্নলিখিত উদাহরণ দেখায় কিভাবে এটা করতে হয়.