ইমেজ স্প্রাইট ব্যবহার করার প্রধান সুবিধা হল 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;
} 