In this article, you will read about 9 online sprite sheet maker free websites. This is quite easy to combine multiple images into one image. All you need to do is drag and drop the multiple images in the canvas. If it is required then you can customize the output of each image manually. You can specify the image file type in which you want to download the image. The sprite sheet maker supports PNG, GIF, and JPEG file type. Also, you can mention the padding between the images. After that, you can download the combined image file.
Most of the sites let you modify the output in different ways. You can change the alignment of all the images such as vertical, horizontal, diagonal and compact. There are other options from where you can get the CSS and HTML code. Then, you can copy them or save them in TXT format.
Each website has a number of images that call HTTP request to the server. This can slow down the result of loading the webpage. But using these online sprite sheet makers minimize the unnecessary overhead. The sites prompts you to add multiple images and provide you a single image which is actually the packed image of all the uploaded images.
Also read: Get CSS Animation effects free.
Let’s read about online sprite sheet maker free websites.
1. CSS Sprite Generator
CSS Sprite Generator is an online sprite sheet maker. The website lets you generate, edit, and code the CSS sprite sheets.
When you open the website, it shows an interface with a few options on the top left. You can click on Open in order to add multiple images. Once you upload the images, it appears on the top left corner.
To customize the result, you can click on the Setting option. From there, you can access general setting such as fixing layout, CSS/LESS, Padding, and Style prefix. The site keeps the image layout as compact, horizontal, and vertical. Also, you can include encoded image in CSS. It is easy to fix the padding between the images in pixels. You can manually customize the result of each image. To do so, click on any image to name it and fix its coordinates in px.
After customizing the result, you can save it. When you are done, click on Downloads. The downloading option lets you save the file in PNG, CSS, and HTML. Also, you can save the sprite style in TXT format.
2. ZeroSprites
ZeroSprites is a simple sprite sheet maker. It is a CSS sprite sheet generator which helps you to reduce the image space.
Using this site, you can upload several files. All you have to take care of the size. Each image should be under 1MiB file size. The site claims that you can add around 500 image files. It supports PNG file format only. Besides that, you have to make sure that you name the file with alphanumeric characters.
To create sprite sheets, you have to drop the PNG files in the interface. All the files quickly get uploaded. Below that, you can customize the result of sprite sheets. You can adjust the padding to generate space between images. It also lets you enable the PNG-8 to quantize the image with 256 colors. Also, this generator optimizes the PNG file size. Thereafter, you can click on the Pack button below.
The site places all the images on one file in vertical. It keeps the result on the site for 30 days. And if you click on the image, it shows the details such as configuration, i.e., padding, optimize, png8. Other details like CSS, script, summary, etc.
3. Toptal
Toptal is another good website to use as a sprite sheet maker. It is a simple website where you can set multiple images in one image file.
When you open the website, you will see the interface divides into two parts. The left part prompts you to upload images from your computer. You can add multiple images in the interface. Once the images get uploaded, it shows small details of the images such as height, width, etc.
Above the interface, there are options to adjust padding between images and alignment. You can align all the images as a Binary tree, vertical, horizontal, and diagonal. Whatever the changes you make, you can view it on the right box. Then, you can click the download button in order to save all images in just one image. The image saves in PNG format.
4. CSS Sprites tool
CSS sprite tool is one of the simple sprite tools. This sprite sheet maker lets you generate CSS sprite in minutes. All you have to do is drag and drop the images in the interface. It supports PNG, JEPG, GIF file formats. You can upload more than one image with these formats.
After uploading the images, you can set options to customize the output. You can select image file type like GIF, JPG, PNG. Also, you can set the alignment in vertical or horizontal mode. The default padding is 0 but you can set it according to you. If you choose the image file as GIF then you may also detect transparent color from the pixel. After that, you can click on Generate CSS Sprite button. And then you will see the CSS and HTML code below. You can copy and paste the code to the webpage or download the CSS sprite sheet image. You can download the zip file as well.
5. Stitches
The website named Stitches is another sprite sheet maker. This is basically an HTML sprite sheet generator. Also, the site is very similar to the first website I mentioned in this article.
When you open the website, you will see a few icon images. You can remove them and upload your images. For that, you can click on Open and upload multiple images from your computer. In order to modify the image result, you can click on the Setting option. There you can change the layout as vertical, horizontal, compact, CSS, LESS. Also, you can adjust the padding between all the images. When you are done, you can save the setting.
If you want to export the CSS then you can download the coding in TXT as well. After that, you can download the image in CSS, HTML, as SpriteSheet or StyleSheet. The image file saves in PNG file format.
6. Free Sprite Sheet Packer
Free Sprite Sheet Packer is an online sprite sheet maker. This is an alternative to TexturePacker software. Here, using this online tool, you can make sprites in minutes.
All you have to do is open the website and remove the images visible in the interface. Then, you can click on Add sprites to upload several images. The setting section lets you change the data format as CSS, JSON hash, JSON array or LESS format. You can modify the alignment as vertical, horizontal, and compact. The generator lets you change the padding in PX. You can mention the style class prefix as well.
Whatever the changes you do, it shows the preview on the left. Then, you can download the image in PNG and JSON format.
7. CSS sprites
As its name implies (CSS sprites), this is an online sprite sheet maker. Using this website, you can upload up to 2000 files in the interface. The total file size should be 32 MB.
Once you browse the image file from your computer, you can follow the next step. At this point, you can select the output type. The recommended file type is PNG. But you can choose JPEG and GIF as well.
There is another optional setting where you can mention CSS class prefix. Also, you can specify the padding between images. You can select the padding between images from 1 to 20px. Thereafter, you can click the Create Sprite button in order to generate sprite sheets. You can save the sprites by right clicking. Below that, you will see the CSS and HTML coding of each image you uploaded. You can copy that too if required.
8. CodeShack
CodeShack is the most simple website to create CSS sprites. Here, you just need to drag and drop all the images in the interface. And this tool combines all the image into one image. Then, you can download the combined image in PNG format.
However, you cannot customize the output of the images. But there is a link available below which is titled as CSS Sprite Generator. You can open that, upload one image at a time in the interface. Then, you can set options such as file name, height, width, etc. If you scroll down the page, it shows CSS coding of each image as well.
9. Instant Sprite
Instant Sprite can also be a sprite sheet maker. Using this website, you can upload several images and change their order from up to down.
The site lets you set padding, direction such as vertical, horizontal, and diagonal. When you change the alignment of the image, you can see the preview below. Also, you can choose the image type, i.e., PNG and GIF.
In order to download the sprite image, you can click right on the image and save it on your computer. The image gets saved in the format you choose before downloading. You can see the CSS coding as well.
In brief
Using the sprites minimize the number of HTTP requests and makes the webpage load in a normal way. For that, you can simply upload more than one image and pack them in just one image. Furthermore, you can customize the output of CSS sprites images.
