Combine images into CSS sprites
A common thing that comes up when I do a speed test is a suggestion to combine my images into CSS sprites.
Up until tonight, I had no idea how to do it and couldn’t understand any of the sites that were trying to explain it. I put it in the “must learn later” pile and never got around to it.
But, tonight I finally found an easy way of doing it, so here’s exactly what I did.
First, I did a Google Page Speed Test at https://developers.google.com/speed/pagespeed/insights
I’ve already done the rest on the list, but the one that I hadn’t done yet is the “Combine images into CSS sprites” suggestion (see screenshot below):
Next I google’d all the possible sprite tools, trying to find the easiest – something that can let me just “plug-in a website url”. There was only one that worked. http://spriteme.org/
Mind you, and this is embarrassing to say, but I’ve been to this page a few times, and couldn’t work out why it didn’t work. Turns out it was because I use Google Chrome without the “bookmark toolbar”, so I was trying to “drag the link” into where my apps go, and it never worked *shakes head at self*. Anyway, so tonight I enabled my bookmark toolbar.
Then dragged the spriteme link to the bookmark toolbar.
Then I browsed to a page on my site that I knew didn’t have as many images as the others, so in my case, it was my sitemap page:
And then clicked on the “SpriteMe” button.
It didn’t seem to do anything, so I kept surfing the internet, but when I went back to my page, I realized that it had been working some magic in the background, and so when I came back, it had an extra screen over the top of my page with suggested sprites:
I clicked on “Make All” and it made a single sprite image out of the suggestions and gave me a page that looked like this:
I downloaded the image from the first link (example below) and uploaded it to my server (just used the media library) and then I copied the image url of the newly uploaded image. (Sidenote: I also took this opportunity to optimize the image even further with RIOT image optimizer to make the sprite image a smaller size (7k)
Easy part done.
Now I have to decipher what they are telling me. I need to adjust my theme’s stylesheet to integrate it back into my website. Also note, that I run a CDN on that particular site, so I have to make adjustments to leave-out the cdn path too.
So now I go to the WordPress backend > Appearance > Editor
And the first page it shows me is the stylesheet (Style.css) which is not what I want. For my particular site, it said I need to change the “style.php”. So I found that in the list and loaded that up.
First change:
The url “they” gave me for the new image is http://www.jaredhirsch.com/coolrunnings/public_images/5c873058d1/spriteme1.png
And the url that I “uploaded” to my server is
https://pennybutler.com/wp-content/uploads/pennybspriteop.png
So any time they mention the jaredhirsch url, I need to replace it with the pennybutler url
So the first code they want me to change is this one:
#sitetitle {
background-image: url(https://pennybutler.com/wp-content/uploads/pennydiysocialmedia.png);
background-image: url(https://www.jaredhirsch.com/coolrunnings/public_images/5c873058d1/spriteme1.png);
background-position: -10px -10px;
}
So looking at the above, I need to find the following line in style.php:
#sitetitle {
background-image: url(https://pennybutler.com/wp-content/uploads/pennydiysocialmedia.png);
and replace it with:
background-image: url(https://pennybutler.com/wp-content/uploads/pennybspriteop.png);
background-position: -10px -10px;
}
Seems pretty straight-forwarded. Except… it wasn’t in there. Instead, my theme had used the following:
[snippet id=”277″]
Which means, if I make the change in here, I’m going to have to remember that I can’t just upload a new logo whenever I want without creating a new sprite, but that’s ok :) I make a backup of the style.php “just in case I screw something up” and then proceed to change lines 5 & 6 above to:
[snippet id=”278″]
That was fairly easy and nothing died which is good, so I can proceed with the next bit.
Restricted (a bit trickier)
The next part was a bit trickier, because my theme has multiple stylesheets which can’t be accessed from the wordpress backend.
I found the first one “nav-button.png” in wp-content/themes/wp-inspired-prem/colors/default/ (So not in style.php or my standard stylesheet style.css).
The second one “content-top.gif“, I found in my standard style.css
And the last one “nav-button-rt.png” was also in the default directory.
I could’ve used ftp to make the changes, but that would require a few extra steps, so instead, I loaded up cPanel, then go straight to File Manager because in there, I can directly edit the files and see the changes straight away.
I found this code:
[snippet id=”280″]
And changed it to this code:
[snippet id=”281″]
The next code was back in the wordpress backend, in style.css
Before:
[snippet id=”282″]
After:
[snippet id=”283″]
Anyway, all pretty straight-forward and nothing broken. There are a couple more things that I need to figure out though:
1.) How to use the image without the full url. (Do you know how to do this if the image is located in the media library? I only know how to do it if the image is located in the theme directory, but the reason I want it in the library is because all images in the library are managed by W3 total cache & mu cdn, whereas I can’t make many adjustments to images in the theme directory such as setting expiry dates, and so on unless I want to do it manually (*no thanks*)
2.) How to do the other images that Google wants me to sprite-up. The Spriteme tool didn’t pickup the others that Google had a problem with, so I still have to figure out the harder way probably if I want to go crazy, but at least 4 images now are sprited. I have another 13 on that page though that Google wants me to sprite.
But that can be another day’s task. I’m still going to bed satisfied that I learnt something new today.
Site Notifications/Chat:
- Telegram Post Updates @JourneyToABetterLife (channel)
- Telegram Chatroom @JourneyBetterLifeCHAT (say hi / share info)
- Gettr Post Updates @chesaus (like fakebook)
Videos:
Aussies Or Buy me a Coffee (PayPal)
