ইমেজ স্প্রাইট ব্যবহার করার প্রধান সুবিধা হল 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>৷ আউটপুট
উপরের কোডটি নিম্নলিখিত আউটপুট −
তৈরি করবে
