Joost posted a great article on reducing http requests on WordPress sites recently and one comment caught my attention. Nabil mentioned cSprites. It’s a WordPress plugin that merges the images in your posts into one file and uses CSS to position the single merged file in place of the original images. Here’s a good post explaining how this technique works.
Unfortunately it hasn’t been updated in over a year, and the current version doesn’t work if you have PHP 5.3.2 (and probably 5.3.1) as it trips over this PHP bug. The fix is simple, get rid of call_user_func_array() and call the functions directly.
I had it installed here and it worked well enough but not perfectly. Here’s the post I made on the plugin’s support forum if anyone’s interested.
I don’t think the author will update the plugin again and in fact he’s looking for someone else to take over. Anyone?
The plugin has been running on my photoblog for the last hour ago and I haven’t noticed any problems yet. As a bonus, it also stops people right clicking and stealing saving my photos for their own use. I’ve since removed it as visitors were only seeing blank images. Oh well.
So, want to give a “fixed version” a go? Grab csprites-for-wordpress.zip and install it in the usual way. Support queries should be directed towards the plugin support forum. 😉
Oh yeah, there’s also the SpriteMe bookmarklet if you don’t want to go fiddling with WordPress plugins!
I’m afraid that with Firefox i can perfectly click on your photos and save them to my desktop, of course i haven’t done that but that browser seems to allow it.
The theme i am using ( Suffusion ) already has many built in optimization options and with the addition of something like W3 Total Cache i don’t think i need the plugin you discuss.
I do hope plugin authors continue to update their plugins though, i am using one called Simply Exclude which hasn’t been updated for a long time but still works, no idea if it will fail one day though thus it would be nice if such plugins were kept up to date.
Try it now, you should get the transparent gif the plugin puts in as a place holder. 🙂
I just went to the photo blog in Firefox, and yep, the plugin puts a placeholder.
BUT
The images aren’t showing up at all for me. It’s a photoblog with no photos, unfortunately.
OS: Mac 10.6
Browser: Firefox 3.6.3
doesn’t look like images are loading in chrome….
Weird, I bet the plugin deleted it’s cached image. Fixed that for now by deleting the cache. I guess the caching system in it needs improving!
Can’t see photos too. Tried Firefox 3.6.13, Chrome 8.0.552.224, Opera 11.00 Build 1156, IE 8.0.6001.18702 on Windows XP. All of them just display white rectangles instead of images.
I’ve long thought sprites would be a great way to make themes more efficient but I never thought of your idea, using them to stop folks nicking your images, genius!
The only problem is that, as Matt notes, none of your photos seem to be appearing on your home page in Chrome and, for me, Firefox is the same.
Perhaps you’re just getting too many visitors at the moment. You should use some sort of caching plugin.
Just kidding.
I tried cSprites when it first came out and I liked it a lot as a proof-of-concept plugin. It also worked very well considering its complexity.
However, I think that combining images (or scripts or stylesheets) is not always a good idea.
If you have ten PNG icons at 2KB each, serving them as a sprite is great.
If you have ten JPEG images at 100KB each, serving them as a sprite does not make much sense performance-wise. More importantly, it not visitor-friendly, because it takes much more time to display the first image.
I think some sort of lazy-loading is a better approach for something like a photoblog.
Happy 2011 everyone,
Demetris
Yeah, I tried the lazy loading jquery script a few weeks ago and while it appeared that the images loaded when I scrolled, they were actually all loaded when the page loaded.
I agree with Demetris that it doesn’t have sense to use sprites this way, they are good for small images, not for images inside of content.
A jQuery script for lazy loading doesn’t work anymore because of browsers changes, it worked before.
For what its worth, I’ve started using Google’s mod_pagespeed module for Apache, and one if its features is to inline (e.g. base-64 encode) small images directly into the HTML. That seems to be working fine for me.
This trick increases the page of CSS file`s size
Still does not load in Chrome – would be fantastic if it worked, but it doesn´t so that is indeed a pity.
Im famous for my dumb questions;
Does it work with PHP 5.3.3-5.3.4?
Much more dumb answer – I don’t know but probably as I removed the functions that were buggy in the previous versions of PHP so there’s less code to be buggy. 🙂
Thank you for no help at all!
(just kidding)
I am using PHP 5.3. After saving the plugin configuration it immediately ramped up my load average, and froze the blog. Had to delete the plugin via FTP for everything to go back to normal.
I’d rather see a plugin like SpriteMe that allows a sprite snapshot that can be saved in the theme folder. When changes on the blog are made a new sprite snapshot image file can be made. Using a static image would be far better than one generated by the plugin. I don’t see anyone changing their blog design every 10 minutes which is the default for the cache to expire.
What exact version of PHP, Apache, MySQL are you running?
It might be just me or something happened, I don’t see any images on the site, on a single post page as well.
Thanks everyone for giving it a go. I’ve disabled the plugin on my photoblog. I guess it needs a lot of attention!
Umm, I haven’t gone through the code in detail, but what it seems to be doing is *bad* for accessibility. Yes, use sprites and backgound images for the presentation layer (ie the site design), but *not* for the content layer (ie photos you’re sharing).
For photos, the img tag is the content and converting it to a background image is bad. It changes the meaning of the HTML and users with assistive technology (screen readers etc), may not be able to deal with them appropriately. For that matter, Google may not include it in their image search if it’s served up as a background image in the source HTML (ie before any JavaScript manipulation).
Of course, I haven’t double checked the code to see exactly how the plugin is doing it, but from the description, it sounds like it’s not a good thing…
Getting off soap box – my own site isn’t perfect accessibility-wise, but my day job has drummed this into me!
Stephen – You’re right about accessibility and what it does. The plugin documentation explains that it doesn’t modify the theme graphics because if it uses repeating graphics they’ll be broken.
I wish you did this plugin for Joomla 1.6 too 🙂
I’m going to give this a try. If the original author was looking for someone else to take over this plugin, do you intend to take ownership of it and officially support it?
This seems to break bp chat (Buddypress Chat)
http://buddydev.com/plugins/bp-chat/
Nope, I looked at this and made that fix as I was curious about how it worked.
I’ve written a WordPress plugin that applies this concept (reducing HTTP requests using image sprites, data: URIs, and CSS optimization) specifically to emoticons. It’s still a work in progress, but please check out Speedy Smilies. 🙂
I downloaded your version and it didnt worked on my blog. It wasent showing images and posts also.
So I tried on a brand new blog with one post on it
and I got this error when I installed and run cSprites
Parse error: syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM in /home/ebookrev/public_html/css/wp-content/plugins/csprites-for-wordpress/csprites/classes/SpriteSprite.php on line 36