Wednesday, May 27, 2020
Home Dynamic Skills How to combine images using CSS sprites without a plugin

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:








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

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

Most Popular

Types of Renewable Energy Sources, resources, advantages, and disadvantages

The basic concept of renewable energy. Classify different sources of renewable energy with descriptions and strengths and limitations. Describe the potential of solar energy...

Latest Technology Trends during COVID-19 pandemic

The World in 2020 has seen the COVID-19 pandemic as well as our massive dependency on digital technology. We have seen a phase shift of...

What is Artificial Intelligence (AI)? History and Why it is so Important

Artificial intelligence (AI) machines can learn from practice, familiarize with new efforts, and do human-like tasks. Most AI cases you hear today – from...

What is Blockchain technology? Everything you need to know

If you've been following banking, investing, or cryptocurrency for the past ten years, you may know "blockchain," the record-keeping technology behind the bitcoin network....

Recent Comments