The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How big (file wise) should my background image be? Re: How big (file wise) should my background image be?

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.

You are making assumptions based on your own opinion / context. Not everybody has a nice connection, @AWKM explained to you his own case which is -unfortunetaly- the case of many people around the world.

> I was able to get my photo down to 372 KB without much degradation. I’m happy with that. Plus… it’s for a portfolio site… so people expect it to be artistic.

Because it’s a portfolio, people might expect it to be “artistic”, yes. Not to be heavy. “Being artistic” is not and should never be an excuse for heavy weight and slow pages.

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

I don’t see what “Mac” is doing here. Neither do I understand how you can assume that a “huge Mac” (whatever this is) is necessarily running a “fast connection”. Once again, you’re making assumptions. Your portfolio might attract a lot of people; some on “HUGE macs with fast connections” and some with more reasonable computers on more reasonable connections.

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

I like photos. I like backgrounds. I don’t like heavy pages. I don’t like staring at what I consider a broken layout just because of a background image. Plus I’m not sure you can know with certitude your audience before even launching your site. Stats will tell.

Now, do as you wish. Just don’t search excuses for your possibly bad implementation.

On a side note, I’m currently building a quick portfolio for my girlfriend. She wanted to show a couple of photos (decent quality, 1400px wide). I went down to 100kb each and still feel like it’s a bit much. I’m thinking of using the padding-top hack along with a sprite. If anybody has a counter-opinion on this stuff, I’d be glad to hear it. :)