CSS ইমেজ স্প্রাইট ব্যবহারের সুবিধা

ইমেজ স্প্রাইট ব্যবহারের মূল সুবিধা হলো HTTP রিকোয়েস্টের সংখ্যা কমাতে পারা, যা সাইটের লোড টাইম দ্রুত করে। ছবিগুলোও দ্রুত লোড হয়, যা কোনো ইভেন্টে এক ছবি থেকে অন্য ছবিতে স্যুইচ করা অনেক স্মুথ করে। ইমেজ স্প্রাইট হলো একক ছবিতে রাখা ছবিগুলোর সংকলন।

উদাহরণ

নিচের কোডটি CSS ব্যবহার করে ইমেজ স্প্রাইটের সুবিধা দেখায়:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.twitter, .facebook {
    background: url(sprites_64.png) no-repeat;
    display: inline-block;
    width: 64px;
    height: 64px;
    margin: 10px 4px;
}
.facebook {
    background-position: 0 -148px;
}
</style>
</head>
<body>
<h1>Image Sprite example</h1>
<a class="twitter"></a>
<a class="facebook"></a>
</body>
</html>

আউটপুট

উপরোক্ত কোড নিচের আউটপুটটি তৈরি করবে:

উপরে, আমরা নিচের মতো করে ইমেজ স্প্রাইট সেট করেছি:

.twitter, .facebook {
    background: url(sprites_64.png) no-repeat;
    display: inline-block;
    width: 64px;
    height: 64px;
    margin: 10px 4px;
}
.facebook {
    background-position: 0 -148px;
}