 |
| Creating A sprite image online |
How to create a sprite image
what is a Sprite image:
Sprite images are two-dimensional or one-dimensional multiple images combined together to form a single image. These are created by combining a number of small images together to form a big image. Sprite images can be created in one dimension(vertical or horizontal) or two-dimension depending on the number of images.
 |
| Horizontal Sprite Image |
 |
| Vertical Sprite Image |
 |
| Two dimensional sprite image |
WHY Sprite image :
Now a days, Almost all the websites includes icons and images. These images are loaded by making HTTP request to the server. If a website contains many different images and icons, it will cause to many http request which is not good for website. Creating a sprite image solves the problem as it is a single image consisiting of all the images.
Websites like Blogger, in the content writing section, we hhave a handfull of tools loike bolding the texting, making it italic, adding images to the blog etc. These all icons can be used in a single image for Optimization of website.
include an example like blogger or StackOverflow icon bar can be made using sprite image
Usefull Links
Icons :
You can get any kind of icons and images from the given link and create your own sprite imag
https://github.com/bradtraversy/design-resources-for-developers#icon-fonts
Online tool
This tool can be used to avoid any installations for using the editing tool.
www.photopea.com
Create a sprite image
Open the online tool and In the top navigation menu, go to File > New and set the dimensions for the sprite image. e.g. if we wanted to create a vertical,we would set the width to 100px and height to 400px.
Now import the images by going to file and importing the images. Scale each image to 100px width and 100px height. which makes 4 images in this sprite images. Arrange the images and saved the image so it can be used within the website.
NOTE : Use svg small images for using the sprite image which can be scaled up or down according to requirements.
Now you can use this image inside your website.
Happy coding 🙂
