When is an image too big?

Hi all.

I was recently given a template that I need to use as the basis for a website and the background image is this nice crumpled paper effect. The problem is that it’s 3.7M in size, and so I thought I’d come and ask you learned folk, just what is a decent size for an image. I would have thought that nearly 4MB is far too big, but I just know that my boss will say it’s fine. Any counter arguments to blind “but it looks good” would be really handy.

All the best,

Tim.

You can probably reduce that even further if you don’t need a website 1920 wide. There’ll be some screens whereby that is wasted for effect because it doesn’t display all the background image anyway (negating the ‘it looks good’ argument). Remember at the end of the day websites are for the USERS experience, not so the managers & bosses can pat themselves on the back about how good their website is. If it takes too long to load you will just annoy those with slow connections and they won’t bother and go elsewhere. (I’m writing on a computer displaying 1024x768 I’d see only half your image)

The other possibility is to optimise it down to quite low (read crappy) settings. I doubt that the entire website hangs off a background image, but if it does then there are usually other ways to accommodate it in the template without adding undue pressure on the graphics side of things.

Hey not use so heavy image that give bad impact to your site your site just take 3 to 5 sec to load if you put heavy image on it so your site loading time will increase.
2.5 mb is enough and maximum.

A 2.5MB file will take approx 6mins to download using a 56k modem, 13 seconds using a T1 broadband connection. Users are lazy and impatient unless they’ve requested an image and are prepared to wait for it. (calcs done here)

Contrast those download times above with these as found here:

The basic advice regarding response times has been about the same for thirty years [Miller 1968; Card et al. 1991]:

* [B]0.1 second[/B] is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.
* [B]1.0 second[/B] is about the limit for the user's flow of thought to stay uninterrupted, even though the user will notice the delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of operating directly on the data.
* [B]10 seconds[/B] is about the limit for keeping the user's attention focused on the dialogue. For longer delays, users will want to perform other tasks while waiting for the computer to finish, so they should be given feedback indicating when the computer expects to be done. Feedback during the delay is especially important if the response time is likely to be highly variable, since users will then not know what to expect. 

At 200kb file size that image will be approx 1sec on a T1 broadband and 29seconds on 56k dial up.

Still want to keep those images large and in the background? Remember someone has to stay on your website to actually be able to see them not be already reading your competition’s website.

Thanks Ralph.

I had a look at it in Photoshop and if I saved it as a .jpg it would come down to 208K. The image itself is 1920x2400, so trimming the overall size down even further I could get it to under the 200K mark.

I just wanted to know if using large images is still frowned upon. When I looked at the demo of that site, it took about 30 sec for the background to load. I’m on adsl 1, which should handle such things pretty well, but I’d hate to see what would happen with this template for someone on dial up.

Sorry did you say 2.5mb as a maximum? as already stated…i wouldnt even use something at 200kb…anything into mb’s would be ridiculous.

Ideally, it should be under 100kb! Anything over 200kb is not an option, so a 4mb background is absurd. It would take some computers an hour to download the background image. People will avoid your site if you do that.

If you have a program like Photoshop, click Save for the Web, and it will reduce the file size dramatically. There will be ways to get the file size right down, and it is essential to do this.