;
;

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 how it works? These plugins create more problems like extra CSS, js, etc., but less performance.

If we test and see in the Page Speed options (https://gtmetrix.com). We can find the suggestion “Combine images using CSS sprites.” In the suboption we can see the following related to the flags:

https://www.techsaa.com/wp-content/plugins/gtranslate/flags/24/de.png.

https://www.techsaa.com/wp-content/plugins/gtranslate/flags/24/en.png.

https://www.techsaa.com/wp-content/plugins/gtranslate/flags/24/es.png.

https://www.techsaa.com/wp-content/plugins/gtranslate/flags/24/fr.png.

https://www.techsaa.com/wp-content/plugins/gtranslate/flags/24/it.png.

https://www.techsaa.com/wp-content/plugins/gtranslate/flags/24/pt.png.

https://www.techsaa.com/wp-includes/images/rss.png.

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.  So here, I am going to share some straightforward steps to solve this problem using CSS sprites tools.

Here are some steps by following you can quickly solve this problem.

  1. Identify the images (which you need to combine). For example, in this URL, that is shown in gtmetrix.com results, “https://www.example.com/wp-content/plugins/gtranslate/flags/24/pt.png. 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

Sprites
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 at the place 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.

Congratulations, your problem is solved.

Thanks for reading

Related Articles

Latest Articles