5

I am having a little issue here. I am a web development major and I am currently building this site for a project I am required to do. I wanted to make it look pretty with a background image. I created the image in Photoshop and saved it to web as a .jpg and it ended up being 58.8k in size.

I am all for websites that load quick for the user, but I am wondering if less than 60k is okay? I checked it on the yslow firefox extension and it loads for me in 96 ms (slightly poor test subject - http://www.speedtest.net/result/1146275377.png)

Is 60k too much, is it a best practice to have images only 10-20k? I HATE it when I see an image loading... it just.. isn't even worth the graphic at that point. Is there quicker ways to load a image of that size? CSS or tag? Or should I not even be worrying about it?

Geo
  • 12,666
  • 4
  • 40
  • 55
Phil
  • 10,948
  • 17
  • 69
  • 101

2 Answers2

1

Most browsers load the background image last by default, so you shouldn't have a problem.

How large is too large depends on your hosting set up, the amount of traffic your site gets, and the typical transfer rate of your visitors.

60k seems reasonable to me for an average site with not too many simultaneous visitors. However, bandwidth costs money and this is the reason that you rarely see background images of that size on big sites. On the other hand, youtube regularly streams videos that are thousands of times larger than the background image that you propose. It's impossible to give you precise advice without knowing much more about your site, its hosting solution and it's usage statistics.

Chances are, if you're asking this question, 60k is perfectly fine.

If you want to guarantee that your background image loads first or last you can do:

<script type="text/javascript"> 
bgimage = new Image(); 
bgimage.src = "http://www.olhovsky.com/img/cdf97/256fwt1_eg.png"; 
</script>

Place that code above the body tag to preload the background image. Place it lower in your html document to load it later (e.g. after the </body> tag to load the background last).

And then in the body tag:

<body onload="document.body.background=bgimage.src;">
Olhovsky
  • 5,466
  • 3
  • 36
  • 47
1

I don't think 60k is too large although you probably want to look at your likely users and think about what their connection speeds will be like. If you wanted to try and squeeze the file size down as much as possible, try smushing it as well and you might see it drop a little further.

Matt Asbury
  • 5,644
  • 2
  • 21
  • 29