[2Dfruit]

On a website, how would you determine the right size for your images? Do you base it on a 1mp/2/(56k?). What kind of loading times do you find acceptable? 3 4 5 sec? maybe more.

reason being, im doing my own site atm and i will be using larger than normal amount of graphics (ie more than a logo and some pics) and wanted to know what way you guys approach it?

edit: shit, wrong area. Should be in web design.

[Dusteh]

Depends who the site is aimed at... a personal portfolio can get away with massive images, Google cannot. All depends on the audience and their expectations.

I tend to keep even my biggest photos around 100kb.

[steveb]

Thunbnails around 15-25k and linked bigger versions about 500 pixels along the longer edge, maximum 100k. Photoshop's Save for Web does excellent compression. I always use a value of 45, which gets rid of jpeg artifacts.

[hawken]

45??

I'd say 80 is where the cool kids hang out at.

for my most recent project, I'm using images embedded at 30em (480px depending if your font is set to 100%) but uploading them in double rez. Future proofing the internets.

[Jack000]

60 works for me.

flat images really oughtta be saved in gif though.

[steveb]

Jack's right. 45 compression works for most photographs, definitely not for graphics with flat colours.
Hawken's experiment with saving at double res sounds intriguing - what effect does it have on the end user's screen resolution? Is there any particular reason to measure images in ems - apart from being able to calculate how many text rows they extend?

[Jack000]

client-side resizing looks pretty bad imo. think it's just the nearest-neighbors method.

[oil]

Originally Posted by steveb

Jack's right. 45 compression works for most photographs

No. It doesn't.

[hawken]

Originally Posted by Jack000

60 works for me.

flat images really oughtta be saved in gif though.

personally I endorse drinking PNG

[another™]

Originally Posted by oil

No. It doesn't.

it does if you're not a graphics snob.

i would value speed over minute clarity. people are becoming more and more fickle these days. if images take too long to load, they get bored and leave.

i aim for about 50-60kb for images. most of the time it's fine. if not, then i go up to about 110kb. 50kb will load in less than a second on any broadband pretty much. instantly, basically.

[Maerk]

45 really doesn't if we're talking percent. It's hardly snobbery trying to avoid artifacts and fuzziness. I can't think of many non greyscale images that can survive 45% without being quite painful.

But it varies dependant on the image itself, simplest answer is as low as it can go without creating more errors than you're personally happy with, Images with high contents of red for example are going to fall to pieces at a much higher percentage optimised than most others.


Also out of idle curiosity, what monitors do the folks saying you can go for optimising in the 40's without losing much have? Have found some darker/richer monitors hide artifacts very well heh

[Dusteh]

Client-side resizing is definately suspect if you want a pin-sharp presentation.

My personal rules are jpg for almost every photo and complex image at 55 - 80 photoshop quality depending on how they look. png is indeed better than gif, except for colour display in IE, if you need your pngs to sit next to jpgs and have the same colour balance in IE, its best to revert to using a gif. My bitter experience in that area.

[hawken]

the magic button for PNG is hidden in save-to-web. This fixes all the gamma problems.

(little triangle no one clicks on but everyone should)

[Agricola]

I am converting to PNG, but hear alot of horror stories associated with PNG so wondering how much of a problem this is. It is nice to have large image orientated designs and fancy layouts, but even compressing the images to as far as they can go can often still mean 2 min or more download time if your on dialup.

[d*d]

I've never used png because it didn't work with ie 6, even if it's sorted with ie 7 I'd still say it's early days to adopt it, do you use the png fix javascript hawken?

[Limbo]

PNG is supported by IE 6 - it's just alpha transparency that isn't.

IE5 supports PNG.

added my two cents: It depends on your client and their market. I used 90% for main images for a photographers website (about 150k). For photos I'd never ever drop it below 65% - the squashig of pixels associated with jpeg compression is plain ugly.

Go GIFs for blocked and uniform colour.

[longisland6]

yep, it depends on your audience. i'm a hugh web snob; i've got a 24" dell flat panel monitor, 4gb of ram and cable modem...so i'm more than willing to wait a minute or 2 for a nice, big sharp image that might be intolerable on dial-up. so if i'm my audience, let it rip...but if i'm designing for a different audience, their needs come first.

[steveb]

Are you claiming that you would wait, or have waited, 120 seconds to download an image?
And does hugh mean big where you come from?

If you are the audience of one, you design for other needs, right? What are you trying to explain?

[longisland6]

i've really got a problem with that word, yes... it means big on my planet. what i'm saying is if my audience is primarily composed of users with cable modems and nice monitors then i'll consider using much higher quality images that take longer to download, but only if that fits my site design criteria, not just because i can.

[steveb]

Okay, I getcha! A photography site aimed at photographers would have high quality pngs or similar. They'll probably have fast connections anyway for their business so they don't mind a 2 MB pic download.

I think it would be customer-friendly in such cases to have a lo-res version for the plebs too. Quick to display, and a click would link to the HUGE version. But I'm old-fashioned...

I think you've got the idea though.