newbie's question about photo pixel size

Note: I have no idea how Macs manage their screen settings, so the first part of this may not apply with those

First, you have to understand the basics of how images display.

It is not the size of the screen that should be your concern, it is the resolution the user has. For example, on this computer I am using, the system can display from 640x480 all the way up to 1600x1200. Now this doesn't matter if I have a 15" monitor hooked up to it or a 21".

So with this, if you had three monitors, all at the same resolution, say 800x600, and you display an image that is 700 pixels wide, on every monitor they should fill up the same amount of space on the screen. (based on a percentage of the screen, not from the standpoint of taking a ruler and measuring the displayed width).

Plus, now on all of this, you have to add in the consideration of the actual display area of the browser window. Many things can change this. The main concern here, the width, would mainly be affected by the visitor not having the browser window maximized when viewing. Height varies a huge amount, because of different toolbars displayed, their heights, status bar displayed, etc. So basically, for the most part, you can't determine the size of the display area in pixels, so you just need to try to design your site that will adjust the best across different sizes.

Now for the "not most part" Using javascript, you can find out how much room is in the browser window, so you can display the images based on the window size. BUT, remember the purpose of the height and width attributes for images: They tell the browser how much room to set aside for the image, and should not be used to resize an image. So this means for a properly designed site, you'd need a set of each image for different sizes.

Basically, in the end, you have to try to decide what you think the majority of your visitors may be at, design for that, but let it be flexible enough to look decent in other sizes. The most important thing, and this applies to all aspects of designing a site, TEST TEST TEST! Test it in as many different browsers you can, on different OS's as you can, and screen resolutions (not sizes) as you can!

Sorry I couldn't give you the answer you were looking for, unfortunately it's not that simple.

-Greg

Great answer Greg! very helpful thanks, helps me understand the complexity of web design.

fyi: i don't know current stats, but last time i looked it up (approx 1 yr ago) the stats were that 80% of "non-cs" users (ie: those without a computer science background) donot change their display size formt he default, and that the common default at the time was 600 by 800

a result of this means that the best thing to do is assume it's not hard to maximize the screen, not that for best results one should view witht he page maximized,and then assume you have 750 pixels width to work with. that leave room for not just the browser's border, but various toolbars people may have running... the start bar, microsoft office, etc.

verticle scrolling isn't somethng that needs to be avoided per se unless you you have a specific reason.