Image Sprites
An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.
Features
- Easy to create and update image sprites
- Supports png, jpg and bmp images
- Configure vertical or horizontal sprite layouts
- Produce LESS, Sass or CSS file with sprite image locations
- You can manage all sprites with different setting options
Create Image Sprites
You can choose one which you need to sprite
1) Sprite all images in a folder
Right click on a folder containing images and select Create Image Sprite
2) Sprite some images
Select the images, right click and select Create Image Sprite
These two ways will generate a .sprite setting file as well as the resulting image file and a .css file as a default.
The .sprite File
The .sprite file containing about the image sprite settings. It looks something like this:
{
"style_name": "images",
"images": [
"..\\images\\access_exports.png",
"..\\images\\access_imports.png",
"..\\images\\accordion.png",
"..\\images\\account_balances.png",
"..\\images\\account_functions.png"
],
"orientation": "vertical",
"padding": 5,
"custom_styles": {
"display": "inline-block"
},
"stylesheet": "css",
"path_prefix": "",
"output": "png",
"enable_cache_busting": true
}
.sprite file options
| Key |
Description |
Value Type |
Values |
Default |
| style_name |
Class name .style_name { /* css codes */ } |
string |
|
|
| images |
An array of relative file paths to the image files |
string[] |
|
|
| folder |
Relative folder path contains sprited images |
string |
|
|
| orientation |
The layout of sprited image |
string |
vertical horizontal |
vertical |
| padding |
Distance of whitespace inserted around each individual image in the sprite. The value is in pixels. |
number |
|
5 |
| custom_styles |
Allows you to inject any css declarations into the generated stylesheets. |
object |
|
{ "display": "inline-block" } |
| stylesheet |
Outputs LESS, Sass or plain CSS files |
string |
css scss less |
css |
| path_prefix |
Adds a prefix string to the image path in the url(path) value in the stylesheet. |
string |
|
|
| output |
Sprite image file format |
string |
png jpg bmp |
png |
| enable_cache_busting |
Enable/Disable cache busting |
boolean |
true false |
true |
Update Image Sprite
You can update with following commands;
- Right click on a
.sprite file and select Update Image Sprite
- Right click on editor when a
.sprite file opened and select Update Image Sprite.
Extension Settings
The first .sprite file is creating based on this options.
| Key |
Description |
Value Type |
Values |
Default |
| orientation |
The layout of sprited image |
string |
vertical horizontal |
vertical |
| padding |
Distance of whitespace inserted around each individual image in the sprite. The value is in pixels. |
number |
|
5 |
| custom_styles |
Allows you to inject any css declarations into the generated stylesheets. |
object |
|
{ "display": "inline-block" } |
| stylesheet |
Outputs LESS, Sass or plain CSS files |
string |
css scss less |
css |
| path_prefix |
Adds a prefix string to the image path in the url(path) value in the stylesheet. |
string |
|
|
| output |
Sprite image file format |
string |
png jpg bmp |
png |
| enable_cache_busting |
Enable/Disable cache busting |
boolean |
true false |
true |
Example
"imageSprites.settings": {
"padding": 5,
"orientation": "vertical",
"stylesheet": "css",
"output": "png",
"enable_cache_busting": false
}
License
Image Sprites is an open source project that is licensed under the MIT license.
Donations
Donations are greatly appreciated!
BUY ME A COFFEE
