cSprites Demo
Go to cSprites on Wordpress.org | More information on cSprites
Here is a demo page using cSprites for Wordpress plugin. I tried to use many different image sizes. It allows shows how cSprites will create a sprite for each type of image: jpg, gif and png. Also notice that the GIF transparency is preserved. In addition, all of the original image’s tag attributes are preserved.
Many sprite generators out there will simply layout the images vertically or horizontally which can lead to a lot of blank space and a bigger file. cSprites uses an image packing algorithm to pack the sprites into a very tight space so there is no wasted pixels. You can see the generated sprite for this page here: gif – jpg .
Here are some selected page load statistics courtesy of www.websiteoptimization.com:
Without cSprites enabled
| Object type | Size (bytes) | Download @ 56K (seconds) | Download @ T1 (seconds) |
|---|---|---|---|
| HTML: | 6579 | 1.51 | 0.23 |
| HTML Images: | 823081 | 171.24 | 11.56 |
| CSS Images: | 123995 | 30.91 | 6.86 |
| Total Images: | 947076 | 202.15 | 18.42 |
| External Object | QTY |
|---|---|
| Total HTML: | 1 |
| Total HTML Images: | 36 |
| Total CSS Images: | 31 |
| Total Images: | 67 |
| Connection Rate | Download Time |
|---|---|
| 56K | 287.92 seconds |
| ISDN 128K | 100.52 seconds |
| T1 1.44Mbps | 24.98 seconds |
With cSprites enabled
| Object type | Size (bytes) | Download @ 56K (seconds) | Download @ T1 (seconds) |
|---|---|---|---|
| HTML: | 7395 | 1.67 | 0.24 |
| HTML Images: | 9306 | 2.85 | 1.05 |
| CSS Images: | 605838 | 127.34 | 9.81 |
| Total Images: | 615144 | 130.19 | 10.86 |
| External Object | QTY |
|---|---|
| Total HTML: | 1 |
| Total HTML Images: | 5 |
| Total CSS Images: | 33 |
| Total Images: | 38 |
| Connection Rate | Download Time |
|---|---|
| 56K | 217.25 seconds |
| ISDN 128K | 75.00 seconds |
| T1 1.44Mbps | 17.65 seconds |
As you can see, there is a pretty dramatic difference, going from 36 HTML images to just 5 and for the fastest connection we drop page load time from 24.98 seconds to just 17.65 seconds. That is a decrease of almost 30%!
One thing to notice is how much the image size decreased. The page went from having 925K worth of images to having 600K worth of images. This is due to a couple factors, first we are compressing the jpg files slightly, in addition with both jpg and gif files we get a much better compression/filesize when we use just one big picture rather than many small pictures and the degradation of the images is minimal.
17 Responses to “cSprites Demo”
Leave a Reply
About Me
Gallery
have a try,
Thank You FOr Share.
o(∩_∩)o…
I will test it out, maybe even work on improving it if I can. While this isn’t very handy personally (as I know how to optimise images and combine them), this is GREAT for clients who love to upload 1mb JPGs, especially those chewing up all my bandwidth
Does this also work with png images and do you think that it will make that much of a difference if it could due to the bigger png file size.
This does currently work with PNG files, however this version cannot detect between PNG8 and PNG24 so that it will combine both into a PNG24 sprite. You will still see some difference in the PNG filesize when they are combined.
How did you get these cool tables on here? Assuming this is a WordPress website, is there a plugin for this table effect or you just cut and pasted HTML and styled with CSS?
I just copied some HTML from that site and wrote my own CSS styles.
CHI SHUU!!!
Old tactic residing in a dark corner of web development. Nice to see that it gets the daylight through a well spread script as wordpress.
merci !
Hi, the plugin looks promising. Before I test this: Is the quality of the images that are displayed effected ?
Yes the quality of the images will be affected depending on what type of images you have. You may adjust the JPG compression to your liking. WIth GIFs since the pallete is always going to be 256 colors combining your images into one sprite may slightly degrade your images, but I don’t really notice much quality loss. With PNG images no quality is lost. You can also tell cSprites which images types to sprite and are able to not apply the spriting by adding rel=”no_sprite” to your![]()
tags.
Will this do any better with Wp-Super-Cache? Or it doesn’t matter.
It will work with WP-Super Cache nicely.
[...] Plugin Description Page [...]
Whenever I activate this plugin my site crawls to a halt, while there are files in the cache directory on my server, it boggs down my site badly.
Any ideas? I am running 2.8
This plugin is not working with 2.8 or at least not correctly. It is making my site crawl and take about 30 seconds to load. Any ideas.
My last comment wasn’t even approved.
Hey Adrian,
Great idea! This plugin will rock! I tried out on an established website that contains lots of images and when i load the image here are some problem i encountered.
Server CPU resources went really high and page didn’t load in the end.
Hence, i deactivate it. Any idea how to optimize it?
This plugin is really impressive for Wordpress blog that are just starting out though!
Thanks
Clay