- What is a sprite sheet and why use one?
- A sprite sheet combines multiple images into a single file. In web development, loading one image file instead of many reduces HTTP requests, which can improve page load performance. The browser loads the sheet once, and CSS background-position rules display the correct portion for each element.
- How do I use the CSS output in my project?
- The generated CSS uses background-image, width, height, and background-position to show each sprite. Add the CSS to your stylesheet and apply the class name (e.g., .sprite-icon-name) to any element. Make sure to reference the correct path to your downloaded sprite-sheet.png file.
- Which layout should I choose?
- Horizontal places all sprites in a single row. Vertical places them in a single column. Grid arranges them in a roughly square layout. Grid is usually the most space-efficient for many small icons. Horizontal or vertical work well when you have a small number of sprites or need predictable CSS offsets.
- Is my image uploaded to a server?
- No. The sprite sheet is generated entirely in your browser using the Canvas API. Your images never leave your device.
