How to combine images using CSS sprites without a plugin

Combining images using CSS sprites tools is the best option. If we try to improve the site speed and performance using a fantastic WordPress free plugin, it is more important to understand its works? These plugins create more problems like extra CSS, js, etc., but less performance.

Suppose we test and see in the Page Speed options ( We can find the suggestion “Combine images using CSS sprites.” In the suboption, we can see the following related to the flags:


How to speed up your WordPress Website Using .htaccess file

So what can we do to recover this problem? I searched many times on the web related to this problem, but all the time, it’s not very easy to find the solution.  Here, I will share some straightforward steps to solve this problem using CSS sprites tools.

Here are some steps by following you can quickly combine images using CSS sprites

  1. Identify the images (which you need to combine). For example, in this URL, that is shown in results, “ The file name is pt.png (as shown above with red color)
  2. Download the image files in a separate folder.
  3. Open Spritegen or Cssspritestool
  4. Click on the clear button to clear the pre-selected files.
  5. Click on Open, select all your downloaded files, and click on open.
  6. Click on the download button.
  7. Download as a txt file.
  8. Open the download file and copy all the text.
  9. Now login to your WordPress website. Click on appearance – click on Additional CSS and past that text (CSS sprites code) and click on Publish.
  10. Download “Combined Image file” and then upload it to Your WordPress Media Library

Step One

Step 2

Example CSS sprites Script
.sprite {
background-image: url(spritesheet.png);
background-repeat: no-repeat;
display: block;

.sprite-0_Screen-Shot-2019-03-19-at-181953 {
width: 100px;
height: 70px;
background-position: -5px -5px;

.sprite-Apple-iPad {
width: 100px;
height: 70px;
background-position: -5px -85px;

.sprite-Huawei_s-sub-brand-Honor-is-preparing-to-Launch-with-5G-network_2 {
width: 100px;
height: 70px;
background-position: -115px -5px;

.sprite-Samsung-Galaxy-A90 {
width: 100px;
height: 70px;
background-position: -115px -85px;

.sprite-xbox-f {
width: 100px;
height: 70px;
background-position: -5px -165px;

Copy CSS script to Theme custom CSS field
step 3

Use HTML Code to Display Images so that the CSS sprites code will work properly.

You need to add the HTML code for an image where you want to view that particular image in your content to finish things out. 
If you’re working with the WordPress block editor, that means you’d rather use custom HTML block instead of using a template block to view each template. 
Here’s what it looks like:
Note:-  You can find this HTML code from the CSS sprite generator tool.

Recent Articles

Apple Announced MacBook Pro, MacBook Air, Mac Mini with self-designed M1 silicon chips

Apple’s long separation is official with Intel. On Tuesday, the tech giant introduced its first Mac computers, the MacBook Air, Mac Mini, and 13-inch...

Microsoft, IBM and the Future of Healthcare Data

Not only in the U.S. but in most countries, healthcare is a blend. The absence of interoperability and fact-based guidance are some of the...

Dedicated Internet Access, Advantages, and Drawbacks

Nothing in a work environment is worse than poor Internet connectivity. It is evident to everyone that a poor Internet connection will significantly hurt...

Related Stories