CSS Image Sprites

school के लिए एक lunchbox pack करने की कल्पना करें। आप अपना sandwich एक box में, अपना apple दूसरे box में, अपनी cookies तीसरे box में, और अपना juice चौथे box में pack कर सकते हैं। यह ले जाने के लिए बहुत सारे अलग containers हैं। इसके बजाय, आप एक Bento lunchbox खरीदते हैं जिसमें सब कुछ एक ही container में रखने के लिए छोटे, divided sections होते हैं। एक CSS image sprite वही Bento lunchbox है। यह कई अलग images (जैसे icons या logos) को एक ही single image file में combine करता है। background position coordinates इस्तेमाल करके, आप browser को instruct करते हैं कि image का सिर्फ वह specific section दिखाए जिसकी आपको ज़रूरत है, network requests को कम करते हुए और आपके page load times को तेज़ करते हुए।

In this page:

Sprite Concept
Sizing और Position Coordinates
Sprites के साथ Hover Effects
एक साफ़ Sprite Sheet Design करना
Sprites बनाम Modern Vector Fonts

Syntax

css

.sprite {
  width: length;
  height: length;
  background: url("sprite.png") no-repeat;
  background-position: -x -y;
}

Sprite Concept

एक image sprite एक single image file है जिसमें कई अलग graphics होते हैं। यह technique आपके page पर कई assets load करने के लिए ज़रूरी server requests की संख्या घटाकर web performance optimize करती है।

Note: server bandwidth बचाने के लिए अपनी website के social media और interface icons को एक single sprite sheet में combine करें।

Warning: Sprites इस्तेमाल करने के लिए precise pixel coordinates चाहिए; अगर आपके coordinates थोड़े भी off हैं, तो दूसरे icons आपके display box में bleed हो जाएँगे।

उदाहरण: The Sprite Concept

css

<style>
.sprite-sheet {
  width: 96px;
  height: 32px;
  background-image: linear-gradient(90deg, #e53935 0 32px, #1e88e5 32px 64px, #43a047 64px 96px);
  margin-bottom: 8px;
}
.icon {
  width: 32px;
  height: 32px;
  background-image: linear-gradient(90deg, #e53935 0 32px, #1e88e5 32px 64px, #43a047 64px 96px);
  background-color: lightgray;
}
</style>
<p>One sprite sheet, 96&times;32px, holding 3 icons:</p>
<div class="sprite-sheet"></div>
<p>One window into it, showing only the first icon:</p>
<div class="icon"></div>

Sizing और Position Coordinates

किसी specific icon को दिखाने के लिए, आप अपने display box पर एक fixed width और height define करते हैं, और sprite sheet coordinates shift करने के लिए background-position property इस्तेमाल करते हैं ताकि सिर्फ आपका target icon box के अंदर align हो।

Note: background sheet को left या top की तरफ़ shift करने के लिए हमेशा negative pixel coordinates (जैसे background-position: -50px 0) लिखें।

Warning: आपकी coordinate values में कोई भी spelling errors browser को खाली जगह या गलत icon दिखाने पर मजबूर करेंगी।

उदाहरण: Sizing and Position coordinates

css

<style>
.icon {
  width: 32px;
  height: 32px;
  background-image: linear-gradient(90deg, #e53935 0 32px, #1e88e5 32px 64px, #43a047 64px 96px);
  background-color: lightgray;
  background-position: -32px 0;
}
</style>
<div class="icon"></div>
<p>Shifted left by 32px, so the blue icon now shows through the same window.</p>

Sprites के साथ Hover Effects

image sprites की सबसे अच्छी features में से एक यह है कि आप instant, pre-loaded hover animations बना सकते हैं। अपने normal और hover icons को एक ही sheet पर एक-दूसरे के बगल में arrange करके, आप highlighted state को instantly दिखाने के लिए hover पर background-position बदल सकते हैं।

Note: hover states के लिए sprites इस्तेमाल करना उस loading lag को खत्म कर देता है जो अलग hover images load करते समय होता है।

Warning: सुनिश्चित करें कि alignment errors से बचने के लिए आपकी normal और hover states के sprite sheet पर identical dimensions हैं।

उदाहरण: Hover Effects with Sprites

css

<style>
.icon {
  width: 32px;
  height: 32px;
  background-image: linear-gradient(180deg, #e53935 0 32px, #43a047 32px 64px);
  background-color: lightgray;
  background-position: 0 0;
}
.icon:hover {
  background-position: 0 -32px;
}
</style>
<div class="icon"></div>
<p>Hover to instantly swap to the pre-loaded green icon stacked below it &mdash; no flicker, no second request.</p>

एक साफ़ Sprite Sheet Design करना

अपने coordinates को calculate करना आसान रखने के लिए, आपको अपनी sprite sheet पर icons को एक साफ़, mathematical grid structure में arrange करना चाहिए (जैसे consistent 32x32px या 50x50px bounding boxes इस्तेमाल करना)।

Note: coordinate values लिखना आसान बनाने के लिए अपनी sprite sheet पर एक grid structure इस्तेमाल करें।

Warning: आपकी sprite sheet पर uneven spacing आपको अपनी CSS में complex, decimal-based coordinates इस्तेमाल करने पर मजबूर करेगी।

उदाहरण: Designing a Clean Sprite Sheet

css

<style>
.icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  background-image: linear-gradient(90deg, #e53935 0 32px, #1e88e5 32px 64px, #43a047 64px 96px, #fdd835 96px 128px);
  background-color: lightgray;
}
.p0 { background-position: 0 0; }
.p1 { background-position: -32px 0; }
.p2 { background-position: -64px 0; }
.p3 { background-position: -96px 0; }
</style>
<div class="icon p0"></div> <code>0 0</code>
<div class="icon p1"></div> <code>-32px 0</code>
<div class="icon p2"></div> <code>-64px 0</code>
<div class="icon p3"></div> <code>-96px 0</code>
<p>Every icon sits at a clean multiple of 32px, so the offsets are trivial to calculate.</p>

Sprites बनाम Modern Vector Fonts

जबकि image sprites historically site performance optimize करने के लिए ज़रूरी थीं, modern websites अक्सर vector icon fonts (जैसे Font Awesome) या inline SVGs इस्तेमाल करती हैं। Vector icons किसी भी size पर साफ़ scale होते हैं, CSS से highly editable हैं, और sprite sheets की तरह pixelate नहीं होते।

Note: साफ़, scalable designs के लिए modern vector icons या inline SVGs इस्तेमाल करें, और sprites को legacy photographic alignments के लिए बचाएँ।

Warning: Sprite sheets raster images हैं, यानी modern high-resolution displays पर zoom करने पर वे blurry और pixelated दिखेंगी।

उदाहरण: Sprites vs. Modern Vector Fonts

css

<style>
.icon-sprite {
  width: 32px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
  background-color: #fbc02d;
}
.icon-svg {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  fill: #fbc02d;
}
</style>
<p>Sprite-based icon (fixed pixel size, needs a matching sheet):
  <span class="icon-sprite"></span>
</p>
<p>Modern alternative &mdash; an inline SVG icon (scales to any size, recolors with CSS, no sprite sheet needed):
  <svg class="icon-svg" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg>
</p>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Image Gallery Next Lesson → CSS Attribute Selectors