ইমেজ স্প্রাইট একাধিক ছবি একই ফাইলে রাখে, HTTP রিকোয়েস্ট কমিয়ে পেজ লোড স্পিড বাড়ায়।
উদাহরণ: ইমেজ স্প্রাইট নেভ মেনু
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; margin: 0px; }
span { width: 200px; height: 300px; background-color: black; }
nav { background-color: black; height: 50px; padding-top: 15px; padding-left: 10px; }
nav a { font-size: 20px; color: white; text-decoration: none; margin-right: 10px; }
.home { width: 32px; height: 32px; background: url("css_sprites.png") -62px -62px; }
.search { width: 32px; height: 32px; background: url("css_sprites.png") -10px -62px; }
.phone { width: 32px; height: 32px; background: url("css_sprites.png") -62px -10px; }
.user { width: 32px; height: 32px; background: url("css_sprites.png") -10px -10px; }
</style>
</head>
<body>
<nav>
<img class="home" /> <a href="">HOME</a>
<img class="phone" /> <a href="">Call Us</a>
<img class="user" /> <a href="">Our Team</a>
<img class="search" /> <a href="">Search</a>
</nav>
<h1>মূল কন্টেন্ট এখানে</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, non! Numquam reprehenderit alias, nisi eos corrupti repudiandae deleniti illo officiis!</p>
</body>
</html>
কোড ব্যাখ্যা
- background-position: নেগেটিভ ভ্যালু দিয়ে স্প্রাইট শিটের নির্দিষ্ট অংশ দেখানো হয়।
- .home: -62px -62px: স্প্রাইটে হোম আইকনের পজিশন।
- <img class="home">: খালি img ট্যাগে ব্যাকগ্রাউন্ড হিসেবে আইকন দেখানো হয়েছে।
স্প্রাইট জেনারেটর টুল
SpriteCow, SpritePad, বা Webpack/PostCSS প্লাগইন দিয়ে অটোমেটিক স্প্রাইট শিট এবং CSS তৈরি করা যায়।
আধুনিক বিকল্প
SVG স্প্রাইট (`
