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. :)

[Alen]

Again, I don’t care what you do. But the answer to your concern is in the video. Maybe after saying it 3rd time. It might sink in.

Fast forward to the section where he talks about Oakley website. He then uses specific tools to help him resize the images.

Hopefully that wasn’t too snarky for you. Good luck.

[Alen]

No issues here, dude. Good luck with the job. (I mean that)

[Senff]

I DO NOT disagree with any of you that smaller is better. However, if I want to use a VERY specific photo, at a size large enough for my intended audience, how can I make it smaller than it already is?? Not a single person has answered that question.

“Not a single person“? Maybe you should tone it down a little bit and take a better look at the first bunch of replies. You’d see there’s a handful of persons giving you suggestions on how to make an image smaller than it already is. Let me quote them for you:

Have you you tried an image optimizer like tinypng or jpegoptimizer?

If the image is in png, use tinypng.org to compress it more.

Using jpeg-optimizer for a while now, never had much issues.

Use for windows a free app called pnggautlet I think.

http://www.jpegmini.com/
i used this and it took my jpg file way down in size and didn’t lose any quality.

[AWKM]

http://www.awwwards.com/websites/fullscreen/
I’m willing to bet that half of these are over 500kb.

They’re probably all full of bloat too ;)

[chrisburton]

Not to keep this insane thread going but if it were me, I wouldn’t be trying to “impress” those 5 agencies with a similar style they’ve already been doing themselves. I would be unique and come up with something completely different. Basically one that blows their fucking mind.

[Alen]

No need for apology, we’re all here fighting the same fight–becoming better at what we do. Best of luck with your job hunting.

[chrisburton]

What about SVG’s?

[Chris Coyier]

In the original spirit of this thread, and because I just heard of it for the first time, there is now a lossy png option in ImageOptim http://pngmini.com/lossypng.html which seems pretty cool for reducing the sometimes-insane size of png24s

[Author]

Posts