How big (file wise) should my background image be?

[Senff]

@Codegraphics:
> Increasing the dpi sure increases the file size of an image.

I created 2 new files in Photoshop. One was 300dpi, the other one 72dpi, both were 1200x800px.
Then I pasted a photo in both of them, and both saved them (“Save for web”) as a JPG with 80% compression.

File size of both files: exactly the same.

[Alen]

@CodeGraphics, you are wrong.

Open up photoshop, go to image size, un-check resample image checkbox, then enter different DPI, you’ll see document size change and not the pixel value.

[TheDoc]

> I just visited the Whole Foods website and they have a photo that is over 800 kb. It loaded in like half a second. I’m not too worried about it anymore.

For you, maybe. What about the person on their phone? What about a person at home with a slower connection?

[Kitty Giraudel]

> I just visited the Whole Foods website and they have a photo that is over 800 kb. It loaded in like half a second. I’m not too worried about it anymore. Thanks everyone!

This is like saying, “I am using Chrome so everybody else does”. You cannot make such assumption on your only experience.

[webtmc]

Just FYI. DPI does make a diff on size of the image. Photoshop “Save for Web” saves all files in 72dpi <--for web.

[Alen]

@webtmc, wrong.

First, monitors do not have dots they have pixels, so it should really be PPI. The term DPI is old and is being misused all the time. DPI is only related to printer. Number 72 refers to the number of pixels that can be placed per inch on the average monitor, there’s no reason to increase it because the monitor can not resolve it. Now what you must be confused about is resampling. This should always be off when changing DPI because, if left on, you are artificially adding pixels. Bad idea.

So whenever you’re printing, you want to leave the pixel dimensions alone and change the document (print) size or (DPI) to fit whatever size you need. So you can get away with printing poster size image with 150dpi resolution, because the viewing distance for that print will be greater.

Think of it as input/output or PPI/DPI (digital capture device like dslr / printer). Pixel dimensions should not change throughout the chain.

[croydon86]

Try this technique not yet mentioned…

Start with image twice the dimensions, and then save for web at 0% compression. Let the browser resize the image. See how that works

[Alen]

Please watch and learn:

http://vimeo.com/67996449

[Senff]

> I’m merely pointing out that a HUGE company like Whole Foods with a far broader audience is using a large background photo. This would seem to indicate that it is becoming more common due to increased connection speeds and larger displays.

Just because they’re huge doesn’t mean they use best practices.

[AWKM]

> I just visited the Whole Foods website and they have a photo that is over 800 kb. It loaded in like half a second. I’m not too worried about it anymore. Thanks everyone!

Dangerous assumption.

For example I live in a rural area so I only have mobile internet to my house rather than fixed line broadband. While it’s acceptable speed wise (3-4mbit/s) I have heavily restricted usage allowance. I can pay a small fortune if I want to use up to 15GB per MONTH. So when I see people making sloppy decisions and chucking in images that are close to a MB in size it’s less than impressive.

Always seek the opportunity to make your code LIGHTER rather than heavier. It’s not as though I live in the 3rd world either. I’m just outside a fairly large city in Canada. Plenty of people don’t have super fast broadband in many parts of the world.

[Alen]

> I’m also being realistic in thinking that a portfolio site is going to be primarily viewed on HUGE macs with fast connections.

Do whatever you like, but this way of thinking will not get you anywhere. Watch the video I linked above. Dave talks about best practices and there’s plenty of tips on how to size images appropriately. He specifically talks about Okley website where the images compounded to over 80MB+.

[Alen]

wwwawards are bunch of subjective opinions, they do not define web design.. if you’re after awards go ahead and build however you like.

Answer to your original question is in the video.

[Alen]

Back to your original concern. Since you are all over the place.

> I want to try to keep things light.

Let me put this in nice bold font for you.

Watch the video. Dave shrinks the Oakley images down to acceptable size. There’s nothing SUBJECTIVE about that.

[Paulie_D]

Let’s keep cool guys.

[AWKM]

> I know who I’m targeting and they are the same poeple who happen to love background photos.

How did you research that?

[Author]

Posts