This plugin hasn’t been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

cSprites – Speed Up Page Load Time with Dynamic Image Sprites

Description

The idea of combining images into a larger one and displaying this using CSS tricks has been around for awhile.

There are a couple big benefits to doing this: First it reduces the number of HTTP requests that the browser has to make, by combining say 5 images into 1 big image, the number of image requests has been reduced by 4. This can increase the effeciency of page loading and you can see gains in the speed at which your page is loaded.

cSprites will enable you to compress all of the images in your content into one big image, called a sprite and display this in parts. Thus the user will only have to make 1 request rather than many for all your content images.

cSprites now has some nice SEO behavior, you can let it automatically generate ALT and TITLE tags based on things like Post title, categories, image name, etc.

cSprites has another possible benefit or problem (depending on how you look at it), that is that people will no longer be able to directly copy/download your images without first going into the CSS finding the sprite-ed image file, then going into photoshop and cropping out the image that they want. You can still link the sprite-ed images to the originals, because cSprites doesn’t delete your original images.

cSprites is compatible with lightbox plugins.

DEMO on my home page: View Demo

For more information on this cSprites plugin : cSprites for WordPress

For more information on the cSprites core API please see my blog post: cSprites info

NOTE

By default I have disabled the sprite-ing of PNG images. PHP does not have a great PNG compression algorithm and therefore the image size of a sprite-ed PNG could actually be larger than the sum of the individual PNG images. You may still turn this option On in the settings if you like. I am currently investigating adding support for some great command-line PNG compression utilities.

Requirements

  1. Must be running PHP >= 5.0
  2. GD Library for PHP installed
  3. php.ini must have this line in it: allow_url_fopen = ON

Notes

cSprites is still quite experimental so please use at your own discretion. Please post any bugs found.

Release Notes

  • v0.510
  • Fixed bug where cSprites was conflicting with another plugin that uses HTML Simple Dom
  • v0.509
  • Fixed bug with cSprites trying to do its thing in feeds. No more…
  • Added Italian Language File
  • v0.508
  • Ran a check to see if we are in a feed do not run cSprites
  • Added new SEO features allowing you to have nice patterns for your alt and title text
  • Added Settings link on Plugin actions link
  • v0.507
  • Fixed a problem with wp_footer hook, some templates don’t use it, so switched to get_footer
  • v0.505
  • Added new Simple Dom extension for better HTML parsing
  • cSprites now respects img height and width variables, and will resize images appropriately
  • cSprites can now crop resized images using a rel=”crop” in your img tag
  • can ignore images with a rel=”no-sprite” tag
  • v0.504
  • updated the javascript in the admin interface
  • added some more security checks in the code
  • cleaned up a lot of code to do things more wordpress way
  • v0.502
  • Bug fixes, new jUI scripts were messing with other admin stuff
  • v0.5
  • Added jQuery UI elements to the admin options page
  • v0.495
  • Added preprocessor cache function that dramatically improves performance
  • Fixed bug with regex not match commas (,) in urls
  • Fixed bug with cache time of 0 not working
  • Added WP version check
  • v0.482
  • Added options to include/exclude certain image types from processing
  • Fixed the PNG compression (was not working before)
  • v0.482
  • fixed regex not matching single quoted html attributes
  • v0.481
  • fails much more gracefully, if cSprites requirements are not met
  • v0.48
  • fixed support for relative image urls
  • v0.47
  • added support for relative image urls
  • added new option in administrator to clear the cache manually
  • added a reset function to the cSprite core, might be applicable in the future
  • v0.46
  • Hook architecture was still broken. Now shouldn’t mess up you post orders.
  • v0.45
  • Did a full rewrite of the hook architecture, I got it totally wrong on previous versions. Now scans the full WP Loop
    and processes it prior to displaying the content. In previous versions I was using the_posts hook and this was failing
    because many other plugins will also call this and we only want to scan the content. Now we use the loop_start hook.
  • v0.43
  • Fixed cache, wasn’t working at all for images. Now is MUCH faster than before.

Screenshots

  • A sample dynamically generated sprite
  • cSprite Options Screen

Installation

This section describes how to install the plugin and get it working.

  1. You MUST be running PHP >= 5.0 and have GD library
  2. Make sure that you have this line in your php.ini file: allow_url_fopen = ON
  3. Upload plugin-name.php to the /wp-content/plugins/ directory
  4. Activate the plugin through the ‘Plugins’ menu in WordPress
  • How to use
  • If you don’t want an image to be sprite-ed you can add rel="no-sprite" to the image tag
  • You can now specify a height and width in the image tag and the image will be resized before sprite-ing
  • If you want to do a resize and crop of the image (maintaining aspect ratio) add a rel="crop" tag to your image
  • If you want a fixed width or fixed height image, just add either a height or width and cSprites will resize and maintain aspect ratio

FAQ

Images are not displayed at all

Try clearing the cSprite Cache, there is an option for this in the settings. If you are using WP-Super Cache, try deleting the cache and refreshing the page. It is recommended that you clear both caches when you change the cSprite options.

Images in my sidebars are not being sprite-ed

cSprites only works on your content images, that is, any images that are contained in the main WordPress loop.

I see some parts of other pictures in the image

You MAY NOT use padding on the image if you would like to use cSprites, this is because the images are tightly packed and when you use padding parts of other images may show through. Wrap the img tag in a div or other element and add some padding to that. Also make sure that the force no padding option is set to On in the options screen.

I am getting PHP errors

You MUST be running PHP >= 5.0 and have GD library

I am running PHP 5.0 and I still get PHP errors

Make sure that you have this line in your php.ini file: allow_url_fopen = ON

Still not working

Make sure that the cache directory in the csprites-for-wordpress plugin directory is writeable

Contributors & Developers

“cSprites – Speed Up Page Load Time with Dynamic Image Sprites” is open source software. The following people have contributed to this plugin.

Contributors