cSprites
Changelog
As of now, I am no longer continuing development on cSprites. It was more of a proof of concept for me and a great learning experience, however I am too busy with other work to develop it any further. Thanks for all the support and hopefully I will have some great new plugins and themes available soon. If anyone wants to take the code with the intention of continuing support contact me and I can probably help get you started.
What is it?
cSprites is a unique Wordpress plugin that allows you to speed up your page loading time by reducing the number of requests for images and compressing the file size of those images.
How does it work?
It works by first scanning your content for <img> tags, it then combines all of your images into a single large image called a sprite. The plugin then creates special CSS classes to display your images and replaces all of your <img> with new ones containing the updated CSS classes, next it inserts a new CSS file into your page <head> tag. Now when your page loads, rather than making many requests for multiple image files, it will make one request for the new sprite.
Requirements
cSprites requires PHP5, it will not work on any lower versions. It also requires GD library to be installed along with the ability to open urls.
To Do
The next step in development is to benchmark the cSprites core and see where I can trim the fat. Hopefully there is plenty of fat to trim.
Known Issues and Bugs
I think there is a lot of potential for the plugin and it is still under constant development. Currently there are a few known issues, that may be address in future versions:
- Currently cSprites will not distinguish between PNG8 and PNG24 and will always sprite PNG images with PNG24. If anyone knows a way to differentiate these THAT WORKS using PHP let me know
- cSprites cannot handle dynamically generated images, these include images that end in something like thumbnail.php?thumb=http://asdf.com/myimage.jpg. I am hoping to include this in a future version but still not sure.
cSprites needs to be much faster. Running cSprites can be heavy on the processor because of all the image manipulation. Therefore the caching mechanism should run very efficiently and I need to go back into the code base and see where I can tweak to improve performance. If any developers wanna see if they can hunt down any bottlenecks, I would be appreciative.Added a much better caching mechanism.
Related Articles
- Sprite Optimization
- cSprites Demo
- cSprites – A Dynamic CSS Sprite Generator in PHP5
- Transparent GIFs with PHP and GD
- Packing Lightmaps
- A List Apart – CSS Sprites: Image Slicing’s Kiss of Death
- CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
42 Responses to “cSprites”
Leave a Reply
About Me
Gallery
hi there. I know about sprites btu was always too lazy to make the necessary changes manually to my theme. did I understand this correctly? this plugin does it all automatically?
what about some options? i.e. define which pictures you want added into a sprite? i.e. I only want the pictures next to my navigation bar aka 16×16 pixeled ones to be combined not any thumbnail that happens to be showing on my site too…
It is not possible to specify exactly which images you would like to add to the sprite, and it currently only works on images inside the actual content. That means sidebars/header/footer are not included…yet. I am trying to develop the plugin with these things in mind and hopefully a newer version will allow you to have some control over which images are included/not-included. The actual cSprites API allows you to do just about anything with the sprites, but I have yet to hook all of its features into this plugin. Keep checking for newer versions, I will be working on this project a lot this week.
Thx, that would be great. Have a look at my site, linked here please. See the navigation bar in the top? Thats 5-6 small gifs just a few kb each which would greatly benefit from the sprites technique, resulting in just 1 connection instead of 5
will keep checking for updates.
Hi Adrian, Do you think the cSprites plugin help improve the download speed of my homepage lifesearchtech.com. I am using an image randomizer from Matt Mullenweg http://photomatt.net/scripts/randomimage and the images in the roator are downloading very sloooowly.
Thanks
Do you have an example I could see, did you look at the size of the img sprite?
Hi Adrian,
Wonderful plugn. I already do image sprites manually on most of my images. The only ones that remain unsprited are post images, which makes your plugin a perfect fit for my site.
That being said, I have some issues with this plugin. If you visit the development version of my blog http://staging.omninoggin.com, you would see that images show up on only some of my posts. I inspected the cache files and it seems like the background CSS properties are not being set for some image sprites. Is this a known bug?
Yes I noticed that, could you disable the plugin and then send me the original code for the img tags that aren’t displaying. It could be that they are automatically resized by another
wordpress program like thumbnail or something. Currently this plugin doesn’t support dynamically generated images as its source.
@Adrian Mummey
Thanks for your response. Here is the original code for the img tag for the first post of http://staging.omninoggin.com/:
<img src=”http://omninoggin.com/wp-content/uploads/2009/02/bsa2.png” alt=”Buy Sell Ads Theme Insertion” title=”Buy Sell Ads Theme Insertion” width=”300″ height=”173″ class=”alignright size-full wp-image-475″ />
I just noticed that my staging post’s image is pointing to the production server. I have tried changing the img tag to:
<img src=”http://staging.omninoggin.com/wp-content/uploads/2009/02/bsa2.png” alt=”Buy Sell Ads Theme Insertion” title=”Buy Sell Ads Theme Insertion” width=”300″ height=”173″ class=”alignright size-full wp-image-475″ />
but still no luck.
Am going to investigate will let you know. BTW just updated to a new version which fixes the caching problem. Prior to this it was generating the images everytime. Now it actually obeys the cache time. Check it out.
Im having the same problem. Thought it was just jpg’s or just gif’s but it seems to be quite random – and only is a problem on post pages. Would love an update when you have one so that I can re-enable the plugin.
i activated it but how do i know it’s on and working?
Adrian,
Your plugin was exactly what I’ve been waiting for. Sadly, I cannot get it to work without WP errors, even with the latest (0.46) release. My PHP setup is correct and everything checks out there. Based on your instructions, the directory CHMOD is correct for your plugin, too.
A sampling of errors that display at the top of my main page (and including some that still occur on the single post page):
Warning: filesize() [function.filesize]: stat failed for /home/cerulean/public_html/wp-content/plugins/csprites-for-wordpress/images/2007/churchill.jpg in /home/cerulean/public_html/wp-content/plugins/csprites-for-wordpress/csprites/classes/SpriteImage.php on line 28
Warning: filesize() [function.filesize]: stat failed for /home/cerulean/public_html/wp-content/plugins/csprites-for-wordpress/images/2007/snoozing2_1.jpg in /home/cerulean/public_html/wp-content/plugins/csprites-for-wordpress/csprites/classes/SpriteImage.php on line 28
Warning: filesize() [function.filesize]: stat failed for /home/cerulean/public_html/wp-content/plugins/csprites-for-wordpresshttp://ceruleansanctum.com/wp-includes/images/smilies/icon_wink.gif’ alt=’;-)’ class=’wp-smiley’ /> in /home/cerulean/public_html/wp-content/plugins/csprites-for-wordpress/csprites/classes/SpriteImage.php on line 28
Warning: filesize() [function.filesize]: stat failed for /home/cerulean/public_html/wp-content/plugins/csprites-for-wordpress/images/2009/kid_friends.jpg in /home/cerulean/public_html/wp-content/plugins/csprites-for-wordpress/csprites/classes/SpriteImage.php on line 28
Warning: file_put_contents(/home/cerulean/public_html/wp-content/plugins/csprites-for-wordpress/cache/40cd750bba9870f18aada2478b24840a.css) [function.file-put-contents]: failed to open stream: Permission denied in /home/cerulean/public_html/wp-content/plugins/csprites-for-wordpress/csprites/classes/SpriteStyleRegistry.php on line 18
Any ideas?
I like the idea, i’m about to give it a go the only thing i was thinking about is wouldn’t this plugin cause higher CPU load?
Yes the CPU load is quite high, but only when generating the first time. If you set the cache time high enough you don’t need to worry too much about running your CPU load off the charts, the CPU load when caching is enabled is almost nothing. I use this plugin along with WP Super Cache on this website and it works like a charm. But its still relatively new plugin, so any feedback is greatly appreciated
In reply to:
# Currently cSprites will not distinguish between PNG8 and PNG24 and will always sprite PNG images with PNG24. If anyone knows a way to differentiate these THAT WORKS using PHP let me know
# cSprites cannot handle dynamically generated images, these include images that end in something like thumbnail.php?thumb=http://asdf.com/myimage.jpg. I am hoping to include this in a future version but still not sure.
Hi Adrian,
I’m currently working on a larger project, and I’m meeting some problems like yours.
I think I know how overcome both of the mentioned problems, but I don’t want to talk publicly. I haven’t succeed to find a way to contact you privately, so please contact me via:
xun at site frost. com (without spaces of course)
Interesting plugin. Will definetly be giving it a try sooner or later.
An optimization tip: try to save all plugin options in an array and use add_option() only once.
[...] cSprites for WordPress plugin helps speed up your blog by reducing the number of requests made for images. When activated all images within a post will automatically be stitched up and displayed properly as compressed CSS sprites. [...]
I have translate the plugin in italian, if you need the file, let me know!
Cheers.
I notice that sometimes the image sprites will appear, and other times, the page remains blank. Could this be an issue of caching?
I noticed this too when I am working with WP Super Cache, are you using this plugin as well?
I’m currently using Hyper Cache and DB Cache. I guess I should try turning one of them off?
I wonder if there’s a way to build an exception so it’s not an issue, and everything can co-exist.
I turned off Hyper Cache, and I think CSprites works now, but I notice that this can be inconsistent, so I’ll let you know if Hyper Cache definitely is the issue.
I was, but I then turned off Super Cache, and I still see the error periodically.
[...] # disable directory browsing Options All -Indexes FastCGI: Ask your hosting service about it. cSprites: cSprites uses a technique called CSS Sprites to eliminate multiple loading of images. Let’s say [...]
[...] Download [...]
It appears cSprites is having a conflict with another plugin I have. Here’s the error message:
Fatal error: Cannot redeclare file_get_html() (previously declared in /hermes/web03/b406/moo.trusktrs/tmp/wpcontent/wp-content/plugins/head-cleaner/includes/simple_html_dom.php:37) in /hermes/web03/b406/moo.trusktrs/tmp/wpcontent/wp-content/plugins/csprites-for-wordpress/includes/simple_html_dom.php on line 41
This issue should now be fixed. It was a problem with both plugins including the same file which PHP does not like. Hope it works now for you. Thanks for the bug.
Yes! Well, I hope so at least