how to create Sprite image online

 

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 image

                   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.

                                                    https://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 :)