Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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 image which is 130kb, this is made up of 14 images with a combined total size of about 65kb

So is it better to have one http request and a file size of 130kb or 14 requests for a total of 65kb?

Also there is a detailed image which has been put into the spite which caused it's size to go up by about 60kb odd, this used to be a seperate jpg image which was only 30kb. Would I be better off having it seperate and suffering the additional request?

share|improve this question
add comment

2 Answers

up vote 2 down vote accepted

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

  1. 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.).

  2. 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.

  3. 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 (.*)-cb\d+\.(.*)$ $1.$2     

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 ! :)

share|improve this answer
    
Wow, cool, that was a comprehensive answer. Thanks! I hadn't thought about the rounded corners thing. I guess it probably would be a good idea to use jpg instead of png. Just because spriteMe gave me a png I assumed I had to use it! –  crazy sarah Dec 6 '12 at 15:10
add comment

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 http://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?

share|improve this answer
    
The file format is a png. Haven't tried the photoshop idea, nice one! I'll give it a go. Pingdom I have come accross, but I find it's results aren't repeatable. Sometimes my site is faster than 60% of the web, sometimes slower than 70%. Re: the image sizes, yeah, individually but all added up they = 65kb. And single sprite image = 130kb –  crazy sarah Dec 5 '12 at 22:08
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.