Website image questions, (size etc)

On monday I will be starting to design a website which will have a

photo gallery section. What makes this different from many others

is that the photos will have to be of sufficient quality for

printing (instead of trying to prevent printing as many photography

websites do.)

Obviously I won't want to load the 'print' size photo directly, but

rather link them somehow. I think what I'll need is a 3 tier photo

handling: 1) Thumbnails that lead to 2) High quality display images

with links to 3) High quality print images.

So the questions:

1) Has anyone seen elegant handling of this sort of thing? I'd love

suggestions/examples/tips. It seems that most of the photo

websites I look at try to keep images small (I assume both for load

time and for theft issues.)

2) What do you think is the upper limit for the display images? I'd

like to maximize quality without it taking too long for the images

to come up. I'm thinking about shooting for up to 700x500 jpgs and

about 125kb per image. Does that seem right?

3) For the print quality images I'm thinking they'll need to be

5"x7" @ 300dpi. Should I have them 'open' in a browser window? I

am leaning toward download via link. Does that make sense?

I sure appreciate any information you have to share with me! I'd

prefer to avoid using Flash for this site, though I do like some of

it's features. I'm pretty comfortable with Photoshop, Dreamweaver

(which I will likely use for site design), HTML, CSS, JavaScript.

<p>Greg,</p>

<p>I’ve had my website up for about 5 years now. I’ve settle on 900x600 for my large jpgs, which works out to a 3x2 inch print at 300 dpi mainly to prevent printing of my images. That size provides a good amount of detail on screen and generally keeps the file size to around 300kb. My large jpgs always open a new browser. My previews are 216x142, which are still a decent size for those using 1600x1200 on their monitors.</p>

<p>If print size images are requested, I’ll upload them, email a link, and take them off in about a week or so to save space. My host provides 500md of storage and I have 300+ or permanent content at the moment, so I don’t store large files for very long.</p>

<p>I do use Dreamweaver to maintain the site with a lot of tables and no frames. I have limited experience with Java and CSS so I don’t use it at all on my site.</p>

<p>Feel free to take a look at my site and email me if you want any more info. Here’s a link:</p>

<p><a href="http://www.jvphotography.net/" target="_blank">www.jvphotography.net</a></p>

<p>Good luck with your site,</p>

<p>Justin</p>

Greg,

<p>

I think you are right about the 3-tier display system. However, the small and medium-sized images do not need to be 300dpi. They will look the same on people's screens at 72dpi, and you should be able to get your file size down below 100kb (and images will load much faster). The "printable" version, of course, should be 300dpi (or whatever you want to provide). That being said, 125kb is perfectly OK.

<p>

Another thing to consider is naming convention. Some people put different-sized images in different subdirectories, some people add a "_t" to the end of their filename (or something to indicate "thumbnail"). Again, I followed Philip's & Kodak's advice and used a size indicator between the filename and the extension. His naming system is outlined in his old book:

<p>

<blockquote>

<a href='http://philip.greenspun.com/panda/images'>http://philip.greenspun.com/panda/images</a>

</blockquote>

<p>

I mainly use the "1", "3", and "5" sizes, so my three files (thumbnail, medium & printable) would all be in the same directory:

<p>

<blockquote>

example-1.1.jpg (the thumbnail)<br />

example-1.3.jpg (the medium-sized one)<br />

example-1.5.jpg (the "printable, large one)<br />

</blockquote>

<p>

It is always VERY clear what images and sizes I have. Your milage may vary.

<p>

I think you are in the right range with 700x500. Initially I followed <a href='http://philip.greenspun.com/'>Philip Greenspun's</a> advice and used the Kodak PCD default sizes of 768x512 for my medium sized images, and 192x128 for my thumbnails. I have recently moved to 670x450, because veritcal images usually caused people to have to scroll down a bit in their browsers to see the whole image (depending, of course, on their screen resolution).

<p>

Everyone will have a personal preference about a website forcing a new window upon them. I hate them, some people don't mind. <b>Most</b> browsers have a right-click option to "Open in a New Window", so, I like it when websites don't force this to happen.

<p>

I also do what Justin (great site, BTW) does, and upload "printable" higher-resolution images upon sale, usually within a few hours or overnight. Since you are providing printable images from your site, this hassle won't effect you, but you will need to budget for more hard disk usage for your site.

<p>

Good luck,

<p>

Matt

I agree with the 3-tier system. A couple of issues I've struggled with are . . . <P>

1. Thumbnail aspect ratios. Actual pictures can be tall and thin, wide and thin, square, etc. But in my experiences thumbnails look best uniform. So I'm about 90% switched to a standard thumnail size, which usually represents a crop of the actual image.<P>

2. I also usually aim for a 700-ish by 500-ish main JPEG image. But for color, if the image has any degree of detail in it, 125 KB might be optimistic. I think one of the biggest mistakes most photogs make is overcompressing their JPEG images for web display. After all the trouble they went to to compose and process the image, it seems a shame to ruin it with JPEG artifacts just to save a few 10's of KB.

You have a good idea here of what you want so you should go with that. I think that your 3-tier idea would work well. Make a link after the larger image is opened that says something about a "5x7 printable download".<br>

<br>

There is no upper limit for display, as it depends on how much detail you want the viewers to have access to. You can make them huge (dimension-wise), but there is no reason to make the DPI greater than 72. I keep images smaller just because so many people are still using dial-up (many friends and family who are, honestly, the primary ones who are looking at my site). So I am taking into consideration the audience when I work on my site.<br>

I have found that 576 X ~460 pixels at 72 DPI works for me for my larger images. If someone wants greater detail then they may email me and I will provide more. As it is, most people just want to look.<br>

If you want to check it out, my site is here:<br>

<a href="http://www.brianmills.us">http://www.brianmills.us</a>

1) Stop thinking in DPI/PPI, it has nothing to do with the web. DPI/PPI is a measurement that relates to output and input devices. Whether or not a monitor is 72/90/110/... PPI matters very little (except for readability of tiny fonts). What matters is pixels. Monitors will generally be run at 800x600 or 1024x768 (over 80% of all displays according to the tracking I have seen). Larger and smaller resolutions than those two are relatively rare.

2) Take a look at http://www.pbase.com/ for an example.

hope this helps,

Sean

<BLOCKQUOTE><I><B>Greg Lyon, jul 29, 2005; 04:50 p.m.</B>

<br>

On monday I will be starting to design a website which will have a photo gallery section. What makes this different from many others is that the photos will have to be of sufficient quality for printing (instead of trying to prevent printing as many photography websites do.)

<br>

<br>

Obviously I won't want to load the 'print' size photo directly, but rather link them somehow. I think what I'll need is a 3 tier photo handling: 1) Thumbnails that lead to 2) High quality display images with links to 3) High quality print images.

</I></BLOCKQUOTE>

That's a reasonable approach.  But have you carefully considered the storage and (especially) bandwidth requirements for such a site?  They will be *formidable* (which is to say, "expensive").  Where/how do you plan to host this site?  Self-hosting can address the storage issue (disk space is relatively cheap to buy, if still expensive to rent), but will only exacerbate the bandwidth problem.

<BLOCKQUOTE><I>

So the questions:

<br>

<br>

1) Has anyone seen elegant handling of this sort of thing? I'd love suggestions/examples/tips. It seems that most of the photo websites I look at try to keep images small

</I></BLOCKQUOTE>

And some of them get far too carried away with it, to the point of seriously diluting the value and usefulness of the site.  Given the generally fairly high screen resolutions (often 1280x1024 or more) used these days even on "garden variety" home PCs, 400x300 or thereabouts just isn't enough for a "full-size" image display.  Even PhotoNet's in-line limit of 510x510 is too small for all but the grossest of examples.

<BLOCKQUOTE><I>

(I assume both for load time and for theft issues.)

</I></BLOCKQUOTE>

I suspect in most cases, it is the latter motivation, since the storage/bandwidth issues could be easily ameliorated by more careful balancing of the JPEG size/compression trade-off than I usually see.  In *FAR* too many cases, I see relatively tiny images (say, 600x400 or so) with so little JPEG compression used that the file sizes wind up being 100-200KB or more.  That's just stupid, presuming that on-screen display in a web browser is the intended purpose of the image.

<BLOCKQUOTE><I>

2) What do you think is the upper limit for the display images? I'd like to maximize quality without it taking too long for the images to come up. I'm thinking about shooting for up to 700x500 jpgs and about 125kb per image. Does that seem right?

</I></BLOCKQUOTE>

I'd say that image size is either about right or perhaps just a little small.  You might consider going to something around 800x600 or a bit more (perhaps up to as much as 1024x768 ; but this will play hob with visitors still using relatively low screen resolutions).  Bear in mind that portrait-mode shots will have to be smaller than landscape-mode shots, in order to have a decent chance of fitting on the (still landscape mode, in at least the vast majority of cases) visitors' monitors -- you don't want them having to scroll to view the full image, right?

<br>

<br>

However, in at least most cases, you should *not* need anything like 125KB to support even an 800x600 image, presuming this is still a "preview" image intended strictly for on-screen display in a web browser.  FWIW, I used to use 800x600 as the standard size for "preview" shots made in batch mode to then sift through and select which ones to print and/or further edit.  Most of these were made using Graphics Workshop Pro, with "JPEG Quality" set to "70%", which produced results which would be more than acceptable for "web browsing".  I just checked a directory-full (over 1,200) of these images, and they averaged just a hair over 60KB each.

<BLOCKQUOTE><I>

3) For the print quality images I'm thinking they'll need to be 5"x7" @ 300dpi.

</I></BLOCKQUOTE>

As others have pointed out, "DPI" is meaningless until you actually go to print the image.  Forget that (and curse Adobe for perpetuating this ridiculous terminology).  Just keep the images as large (in terms of their pixel dimensions) as possible given whatever cropping you need to do, *without* any "upsampling" or similar.  Leave that to the person doing the printing.

<BLOCKQUOTE><I>

Should I have them 'open' in a browser window? I am leaning toward download via link. Does that make sense?

</I></BLOCKQUOTE>

Definitely.

<br>

<br>

I would even put notes next to the download links cautioning visitors against attempting to display these images in their browsers.  An image that large can (and often will) utterly *swamp* a web browser, quite possibly to the point causing the underlying system to become so unstable that it needs to be rebooted (especially under Windows).  Web browsers just aren't designed to cope with really big images, and they'll start sucking up system resources like there's no tomorrow in an attempt to "cope", when forced to deal with one.

<br>

<br>

Another way to enforce this is to place each "print-sized" image file (regardless of whether it is in JPEG, TIFF or other format) into a ZIP-format archive file, and post only *that* for download.  You probably won't see all that much additional compression, at least not vis-a-vis JPEG; but you will help avoid "accidental" attempts to display the monstrously oversized images in folks' web browsers.

<BLOCKQUOTE><I>

I sure appreciate any information you have to share with me! I'd prefer to avoid using Flash for this site,

</I></BLOCKQUOTE>

Good move.

<br>

<br>

Also studiously avoid Javashit, ActiveXploit and other whistle-and-bell nonsense, no matter how "trendy" you think it is, unless you want to alienate a significant portion of the user base.

<br>

<br>

Hey, thank you for all your responses! Sorry to be back to my own thread so slowly, I forgot to turn on 'notify' and thought it was languishing, unanswered!

So it sounds like the consensus is that my 3 tier plan is a good one, great! I neglected to mention that this site will not have very many photos on it at a time, no more than 50 or so. That should keep the space considerations under control somewhat.

I agree I have to get my head around the whole dpi/ppi issue, and also that it's PhotoShop's fault that I think the way I do about it!

Well, I think I'm on the right track by your responses, now I just have to choose if I'm going to use PhotoshopCS, Jalbum, EE, or build my own gallery from scratch. It's going to be fairly simple/basic. Just has to look pretty and have no mystery navigation or anything foolish like that!

Peter, I've been thinking that for the thumbnails I'll frame most of them in a square picture frame so they look good on the page. I've just found out that there will be some panoramas which I'll have to handle differently, I think.

Thank you all again for your very thorough answers!