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)

The rules for these CSS changes could not be found. To help you find the rules that need to be updated, the following clues are provided: the tag of the element, the id and class (when available), and the original background-image.

A
{
background-image: url(http://cdn.pennybutler.com/wp-content/themes/wp-inspired-prem/colors/default/nav-button.png)
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5c873058d1/spriteme1.png);
background-position: -10px -114px;
'

}
DIV
{
background-image: url(http://cdn.pennybutler.com/wp-content/themes/wp-inspired-prem/images/content-top.gif)
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5c873058d1/spriteme1.png);
background-position: -10px -214px;
'

}
LI id=menu-item-2470 menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-787 current_page_item menu-item-2470
{
background-image: url(http://cdn.pennybutler.com/wp-content/themes/wp-inspired-prem/colors/default/nav-button-rt.png)
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5c873058d1/spriteme1.png);
background-position: 43px -284px;

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 *