Images for the web

[venta]

Somebody must know the answer to this... a quick google didn't turn up anything sensible.

I have an image which is rather large - a couple of thousand pixels square. Ideally, I want to pop it in the middle of a webpage.

Now, I could guess at a minimum monitor size, resize the image, and away we go. But I was thinking: surely there's something more clever I can do, whereby those with large monitors get a sizeable image, and those with tiny monitors do not.

Is there?

If not, are there any sensible guidelines on max image sizes, etc?

Comments

[undyingking.livejournal.com]

You can specify image size as a percentage rather than in pixel dimensions, so setting width=100% might make it automatically shrink itself to the window width if required -- I've never tried this, but it sounds plausible. (Although I would expect moiré-type effects if someone's window dimension causes a peculiar resizing ratio.) I believe that height will automatically be scaled accordingly, to preserve the actual aspect ratio.

This way though of course the tiny-windowed user will still be downloading the whole vast image, just rescaling it in the browser. I don't think there is any way of actually on-the-fly resampling the image to a smaller size, short of perhaps some fantastical piece of JavaScript technology.

[d-floorlandmine.livejournal.com]

short of perhaps some fantastical piece of JavaScript technology
Pretty sure this is what Smugmug do with my photos hosted there.

[ext2366.livejournal.com]

It need not be JavaScript, CSS media queries (http://www.w3.org/TR/css3-mediaqueries/) allow you to have different CSS apply with different sized browsers (well, on the latest cutting edge browsers anyway).

For example:

@media screen and (min-width: 400px) and (max-width: 700px) { ... }

will get used when the width is between 400 and 700 pixels.

[undyingking.livejournal.com]

Mm, that would be better than my crude percentage-sizing option, but somehow I suspect venta's dance team are unlikely to have the latest cutting-edge browsers...