Combine images into CSS sprites

IN Marketing & Wordpress
CSS Sprites how to

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):

PennyButler PageSpeed Test Results

 

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.

bookmark bar

Then dragged the spriteme link to the bookmark toolbar.

sprite me

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:

sitemap

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:

sprited

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:

export css

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)

pennysspritedemo

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

http://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(http://pennybutler.com/wp-content/uploads/pennydiysocialmedia.png);
background-image: url(http://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(http://pennybutler.com/wp-content/uploads/pennydiysocialmedia.png);

and replace it with:

background-image: url(http://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.

Restricted CSS Changes (click to view)

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.

 

 

Penny (PennyButler.com)
Penny (PennyButler.com)

Who are we? What are we doing here? What is the meaning of life? Penny is a truth-seeker, ever-questioning, ever-learning, ever-researching, ever delving further and deeper down the rabbit hole. This site is a legacy of sorts, a place to collect thoughts, notes, book summaries, whilst providing a searchable archive to easily lookup and reference.

Leave a Reply

Your email address will not be published. Required fields are marked *