Photo Site That Adjusts to Users Screen Size?

I am designing a photography site. The site’s web pages will of course be dominated by photo images. I was thinking it would be impactful if the size the width of not only the web pages but the photos on the web pages grew or shrank depending on the user’s screen resolution.

See StatCounter Global Stats - Browser, OS, Search Engine including Mobile Market Share

The way I would think you would do this is have a default size which fits the current most common resolution 1024x768 screens but try to detect their actual resolution. 1366 is on the rise and is about on par with 1280. Those widths are so close though, it would probably be a waste of time to create two different page/image sizes for those resolutions and just have two sizes for 1024 and 1280. So we would have a set of photos to fit the 1024 layout and a set to fit the 1280 layout.

This FLASH based site is sort of what I’m going for but it actually dynamically adjusts the photo sizes as you resize your browser! I’m not a fan of FLASH as typically they are slow to load for many users and are not search-engine friendly. Ideally I’d like to come close to what this site does but use XHTML/DHTML. Are there any really good DHTML based photo gallery viewers out there that might incorporate well so we don’t have to re-invent the wheel here?

Has anyone done this or see any pitfalls?

You will need some sort of Javascript image viewer to pull that off. Ideally, you should always shrink an image to fit the viewport, rather than expanding one. Trying to “fill in” the missing pixels when you expand an image is tough to pull off, and usually clobbers the image quality.

My own Matrix skin for jAlbum might be the sort of thing you’re looking for. On the demo pages, the underlying images are scaled to a max of 1600x750px, but that’s just one of the (literally) hundreds of options you can fiddle with. The resizing isn’t dynamic, but if you open an image, close it, shrink your browser window, and open it again, you’ll see what happens. The resizing of the page of thumbnails, on the other hand, is dynamic (though the thumbnail images themselves are fixed size).

I’m in the midst of some rewriting (always), but the new version won’t be out for a while.

Yes, I know what you are saying and agree. I think the best solution is to use JQuery since it can reduce the cross-browser headaches you run into when doing complex Javascript. IE can be such a pain that way.

Why not simply save the image at the maximum size that you think you’re going to need (it’s better to shrink images than to expand them, in terms of quality), and then use CSS to set the width of the image as a percentage?

I didn’t mean to infer I was going to expand the images. I wasn’t. In the past I’ve thought that photos shown at their native resolution render more clearly than photos that have been shrunk down by specifying a smaller width/height in the browser. Lower quality than if you resize and resave the image in Photoshop. However on that example site I posted, the quality is good so not sure if it is FLASH doing better rendering or browsers in general are doing this better.

Browsers (certain obvious candidates aside…) are pretty good at resizing images these days, but not perfect. You could improve it by having several different resolutions saved and using media queries to download the appropriate size and then resizing those in the browser. Bit of a pain, I suppose. You could use a server-side solution to do the resizing, again without flash or javascript.

Check out dynamicdrive.com they have dozens of free javascripts for slideshows/ galleries and most of these automatically resize to adjust to fit the vistors screen.

One disadvantage, which we normally ignore but one of our client didnt ignore it and gave us tough time in its adjustment :slight_smile: Due to very large size images, it will consume 100% of your CPU usage while transforming from one image to another. This problem will get worse if you add another jquery slider on the same page.

We had a question in the css forum a few weeks ago and I came up with this with CSS and a little js. It’s not exactly what you are asking for but does show that images can be resized in the browser. All the js does is decide whether its the width or height of the image that the css can scale so that you get intelligent resizing based on the available area. You could omit the js and just base the scaling on the width only.

Browsers are getting better at resizing images these days (and there are some css properties that will help. More info [URL=“http://msdn.microsoft.com/en-us/library/k0fsyd4e.aspx”]here and [URL=“https://developer.mozilla.org/En/CSS/Image-rendering”]here but use with care.)

The main drawback is the image needs to be made at the largest size and then scaled downwards for best results.