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

[lanfykins.livejournal.com]

Note: large monitor /= large window. My usual Firefox window at work, for example, normally takes only about half of my actual screen real-estate.

[mr-tom.livejournal.com]

There's probably something you can do with jQuery. Google throws up: http://buildinternet.com/2009/07/quick-tip-resizing-images-based-on-browser-window-size/

[lnr]

Will those with large monitors necessarily want to download a large image anyway?

A clickable thumbnail, even a sizeable one, which takes you directly to the large image (which your browser can then scale automatically) rather than to an embedded image is my preferred option. This is not good if you also want people to be able to see the commentary at the same time. But 2000 pixels square is really quite big, even on very large monitors, which are often widescreen these days so may not have enough height even if they have enough width.

Clickable thumbnail

[undyingking.livejournal.com]

Mm, this.

Re: Clickable thumbnail

[d-floorlandmine.livejournal.com]

Thirded. Although I often use a clickable "bigger than thumbnail, but still not huge" image - usually one which renders about postcard size - large enough for people to see what it's actually of, but not so big that it's too large for the screen on my netbook ...

Re: Clickable thumbnail

[lnr]

That's kinda what I meant by the sizeable one reference.

Re: Clickable thumbnail

[venta.livejournal.com]

Question now rephrased (http://venta.livejournal.com/349027.html?thread=5140579#t5140579), the better to express what I'm actually trying to do :)

Re: Clickable thumbnail

[venta.livejournal.com]

Question now rephrased (http://venta.livejournal.com/349027.html?thread=5140579#t5140579), the better to express what I'm actually wanting to do :)

[venta.livejournal.com]

Hmm. This is what I get for typing out queries in a hurry: I phrase them badly and people thus don't grasp what I meant (no blame for which attaches to said people!)

My large image is a logo, which is to be the front page of a website. I don't want it to be available in ultra-large format, that's just what it happens to be at present.

I could resize it so it looks "nice" (ie takes up about half a normal-sized window, widthwise) on my screen, but I have no way of telling whether that will then be too large/too small on others' screens. I expect to compress it anyway so it's not a huge download.

[d-floorlandmine.livejournal.com]

Ah, it's a logo, rather than a photo to be linked to! OK, I can see how we were all being unhelpful. I'd probably either go for a fixed size which wouldn't flood small screens, or go for the percentage sizing mentioned below - except not sure how elegantly that will resize - it might depend on the browser.

[venta.livejournal.com]

I can see how we were all being unhelpful

Not really. I blame poorly spec'd questions for bad answers ;)

[undyingking.livejournal.com]

Ah, I see (I think). In that case, percentage sizing as per my earlier comment is probably what you want.

From the design guidelines point of view, most common practice these days is to design for 800 * 600, but in such a way that it won't look daft isolated in the middle of a larger window: 640 * 480 users have been pretty much cut adrift. (It's a whole different kettle of poison though if you also need to consider mobile users: I don't know much about that.)

[lnr]

This would be my approach to this particular problem. Since your logo is square 600x600 is about the size I'd go for.

[venta.livejournal.com]

Aha. OK. Thanks. I'll experiment with sizes in about that ballpark. I think mobile users will just have to cope :)

[floralaetifica.livejournal.com]

Actually, we've mostly gone up to 1024 width now. 800x600 is dead, god be praised.

[chrisvenus]

Others have given quite a lot of technical detail but I will just mention as an aside that I consider it bad form to have the front page of your website as just being a big logo. I generally hope to have more useful information when I get to the front page. And I really hope that this isn't just a splash screen, those are so 1990s. Or maybe 2000s... They suck anyway. :)

Having said that I suspect you may not have a choice in design and are just being asked to implement something...

[venta.livejournal.com]

No, this is for home so I can do what I want (well, subject to the whims of the rest of my dance team, who still think comic sans and spinny gifs are the coolest things ever).

I wasn't going to have *just* the logo on the front page. There will be info and a navigation bar and stuff as well. I hope.

[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...

[davefish.livejournal.com]

Slap it onto flickr, they host at several resolution, and make the webpage click through to the flickr page?

I've been doing it on some of my posts:
http://davefish.livejournal.com/336213.html

[venta.livejournal.com]

Question now rephrased (http://venta.livejournal.com/349027.html?thread=5140579#t5140579) to give a better idea of what I'm actually trying to do :)

[davefish.livejournal.com]

Oh. Logos and design I know nothing of I am afraid.