PDA

View Full Version : Pixel dimension recommendations for my web site



scott jones
15-Dec-2001, 01:34
With the help of this forum (thank you) I now have a nice flatbed scanner with t he intention of scanning my 8x10 traditional B&W silver prints from my 4x5 LF wo rk. The goal is to put these on a web site I will build. I will probably use thu mbnails that will direct a viewer to the image.

My question is: what is the best pixel dimension sizing of the image that will b e the most compatible with all those different browser/screen combinations out t here? I use a 800x600 screen on my computer, but I realize that there are many w ho use a smaller screen. Also I realize that the browser window itself takes up some space so that what is left over to display the image is smaller than the fu ll screen size. So, what would be the ideal recommended pixel dimension for my p ictures both in landscape orientation and portrait oreintation? (I can handle th e calculation of dpi etc. for the final pixel sizing)

Thanks!

Jennifer Waak
15-Dec-2001, 02:40
As a web developer, the graphic designers I have worked with in the past have told me to assume users will be viewing at 800x600 -- you simply have to assume something and that is apparently the most common setting these days for computers "out of the box".

In terms of thumbnail size, I think it is a matter of personal preference. When doing this recently for a client we took one image, made it a handful of different sizes, and did sample pages using each image size and chose what we think looked best. You need to balance white space against getting content on the page, and also need to think about file size (if you want larger files and file sizes for higher quality images you will want less on a page, etc.). Page weight (meaning how many KB is being downloaded) is still a real issue.

I would suggest determining a general layout for your site, meaning determining if navigation is only at the top, navigation at top and side, how much text you will have with each image, etc. Then try the page with a couple different file sizes. I would also suggest finding sites you like and checking what size images they are using because that will give you a good starting point.

In terms of browser compatibility and keeping things look consistent, image size will actually be the least of your worries.

Mike Mahoney
15-Dec-2001, 06:52
Scott, visit some photographers' sites and see which sizes appeal to you. Most images are smaller than you think, which allows for something else on the page besides the photo. I've always found viewing larger images on screen to be uncomfortable - my size preference would be 450-600 pixels max on any one side.

fishfish
15-Dec-2001, 07:58
I program assuming 600x800 pixels, full screen (F11 on a PC in IE). In reality, my site looks much better on 1024x768 or larger, but it will work well on 600x800. Unfortunatly it looks pretty cramped on 640x480, but such is life. Less then 8% of my site visitors are on 640x480 (only 9% are MAC, BTW, so the issue of the difference in screen brightness is also a moot point).

As for image size, mine are 600w by 450h, which fills much of the screen, but does give some breathing space around. My thumbnails are 100x100 max, and I also have mide-sized images at 250x250. My max file size for images is 30K, and about 2K for the thumbnails.The midsized images are usually between 4-8K. The DPI setting is irrelevent, as a 15" monitor could be run at 640x480 to 1024x1280, obviously leading to different DPI depending on the screen size. I just think (when web programing) in absolute pixels, and leave it at that).

Best of luck,

e.

dan nguyen
15-Dec-2001, 15:58
Scott...

I assume that: -that you work in Photoshop... - -that you scan your images at a dpi setting that you will be able to print or other usages...

I agree with Jennifer Waak , I would like to give you some suggestions... - turn you images into 72dpi and save them as for Web (keep the original copies) - optimize them with ImageReady and adjust them to fit your vision of your pages (to save loading time)... - turn your color palette into Web color only...(Web color spectrum is different fron Print color spectrum)... I hope this will help... good luck