: Http requests, using sprites and file sizes - Hi all I'm in the process of finding out all about sprites and how they can speed up your pages. So I've used spriteMe to create a overall sprite

@Si4351233

At this point, you'll have to make a choice based on some aspects having both good and bad effects.


Sending multiple HTTP requests isn't necessary evil. Having 1 for images is perfect and having 2 is very very good too. Remember
that what makes HTTP request slow is the time when the browser and
server communicate before actually sending the image (or any other
files). This step takes about 100 to 200 milliseconds from what I've
seen in past tests (it depending on many factors like server
location, internet speed, etc.).
Does all the images in your sprite are used on each page ? If not, you could have one main sprite for images used on every page
load and other images in other separated sprites. If your
detailed jpg image is used on only one page, keep it separate ! You
gonna have 2 requests on only this page and every other pages gonna
have 1 request with a much optimized sprite.
Do you really need transparency ? If you don't have things like rounded icons needing transparency, you could consider compressing your .png sprite to .jpg as it could decrease it's size if the sprite size is more than about 8kb.


After having made decisions based on that, you could also consider using the browser cache at your advantage so visitors won't download your sprites on every page load. That will vanish the 100 to 200 milliseconds of browser<-->server communications time.

If your website is on an Apache server, add this in an .htaccess file at the root of your site :
#enable file compression
SetOutputFilter DEFLATE
#enable caching of external files listed below for 1 year
<FilesMatch ".(ico|pdf|flv|jpe?g|png|gif|js|css|swf)$">
ExpiresActive On
ExpiresDefault "access plus 1 year"
</FilesMatch>


After doing that, the browser will search for your sprites and files in his cache before asking the server. If he find it, he wont ask the server for it. This will raise a new problem unfortunately : "If I modify my sprite, how does the browser gonna know it if he don't talk to my server no more ?", well to force him to talk to the server again you gonna have to change the sprite's URL.



An automated method I use to do this is putting the file's last modification date at the end of it with this PHP function (it'll return the file's url with modification date or the date you want to add) :

function prepare_for_cache($url,$date_to_add=""){$p=strrpos($url,'.'); $b=strtolower(substr(strrchr($url,'.'),1)); $t=$date_to_add?$date_to_add:@filemtime($url); return substr($url,0,$p).'-cb'.($t?$t:time()).'.'.substr($url,$p+1,strlen($url));}


and then using the Apache's *mod_rewrite* module to ignore that modification date and load the file with the correct URL (the one of the file on the server without the modification date).
#put the file's url back to normal
Options +FollowSymlinks
RewriteEngine on
RewriteRule (.*)-cbd+.(.*)$ .


This way you never have to worry about visitors cache being outdated and you don't have to change file's name on every site update...

Hope it helps ! :)

Vote Up Vote Down

@Angela700

What file format is your sprite? Have you tried to re-create it in photoshop and compress it as much as possible without losing image quality? Have you tested your site before and after as well as with and without that detailed image in the sprite against tools.pingdom.com/fpt/ that should give you an idea of what combination is better.

Also do you mean the combined size of the 14 individual images is 65kb and the sprites size with all 14 combined images is 130kb?

Vote Up Vote Down