Menu
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?
483
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;">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
