কম্পিউটার টিউটোরিয়াল

CSS ইমেজ স্প্রাইটের ভূমিকা

ইমেজ স্প্রাইট কী এবং কেন ব্যবহার করা হয়?

যখন একাধিক ছবিকে একক ছবির মধ্যে সংযোজিত করা হয়, তখন তাকে ইমেজ স্প্রাইট (Image Sprite) বলা হয়। এটি সার্ভার রিকোয়েস্ট কমাতে এবং ছবিগুলো দ্রুত লোড করতে সাহায্য করে।

মান লক্ষ করুন, আপনার ওয়েব পেজে ৪টি ছবি ব্যবহার করতে হচ্ছে। আলাদা আলাদা ৪টি রিকোয়েস্ট পাঠাতে হবে। কিন্তু সব ছবিগুলো একই ছবিতে যোগ করে আপলোড করলে শুধু ১টি রিকোয়েস্টে সব লোড হয়ে যায়। এর ফলে পেজ লোডিং স্পিড বাড়ে এবং সার্ভার লোড কমে।

সুবিধা

  • HTTP রিকোয়েস্ট সংখ্যা কমে।
  • পেজ লোডিং গতি বাড়ে।
  • ব্যান্ডউইথ বাঁচায়।

ব্যবহার: background-position প্রপার্টি দিয়ে স্প্রাইট ছবির নির্দিষ্ট অংশ দেখানো হয়।

  1. CSS Opacity

  2. CSS ব্লার (Blur) ফাংশন: ইমেজে ব্লার ইফেক্ট যোগ করার গাইড

  3. CSS Border Image: ইমেজ ব্যবহার করে বর্ডার তৈরি করার টেকনিক

  4. CSS Image Sprites তৈরি ও ব্যবহার করার পদ্ধতি