Most of website I’ve set up weight is given by the images of the slideshow.
Here’s a simple PHP function that can be usefull to reduce both weight and number of connection for this element.
The concept behind this function is pretty simple:
take an array of images (jpg/png/gif)
merge them in a unique big jpeg image
return the url to this one.
using css sprite tecnique, set this big image as the background of every <div> of the slideshow with a different background-position.
Here’s the code:
The second parameter $config is optional array of width, height, quality, and resample;
if not passed the default values are 800×600, 50% and ‘do not resample’
built to support all the parameter used by timthumb.
Using it is not a big deal:
retrieve the image list from your CMS
pass it to this function as first parameter
print some div with in-line style setting the image url as background and position (wich is always number_of_the_image * width)
Here’s an example:
Using this method will give us some benefits:
if someone uploads an image with wrong dimension, this will be re-sized and it will not brake the layout
you will never serve a too heavy image, because this function can force it to have fixed jpeg quality; for example 60%
for an averange of 5 images per slideshow we have only one concurrent http connection
the total weight of the page is significantly decreased: on ‘aipini.it’ I was able to reduce from ~900K (~200k per image per 4 images) to an unique big image of ~400k
it cannot be applied to a dynamically sized slideshow: for example a full screen images or an adaptive design: image size have to be know.