“This is the only photo I have. Can’t we just enlarge it?”
Good photos are the visual cornerstone of many of the websites I build. With such an important component, good quality photos have the best impact.
These are the two basic categories of photo resolution I deal with:
Print-resolution – 300 dpi (dots per inch) or higher, appropriate for downloadable print-versions of photos. This is the minimum resolution that graphic designers or print publications require, since the image will be printed on paper. Can always be pared down to screen-resolution.
Screen-resolution – 72 dpi (dots per inch), used for the website itself. This is the resolution that I mostly deal with for the purposes of designing for the screen. A 72 dpi photo is typically unsuitable for printing, unless it is huge.
How do I know if the size of my photos is suitable for the website?
The typical 15″ laptop monitor has a screen size of 1440 pixels wide by 900 pixels tall. In inches, that translates to 20″ x 12.5″. (Since we’re dealing with a screen, the resolution is 72 dpi – dots per inch.)
Unless a photo is supposed to be a full-screen background image for a website, a screen photo doesn’t need to be this large, of course. But keep in mind that these dimensions are a good guide in understanding scale. Your photos will be placed on a canvas that is at least 1440px x 900px (or 20″ x 12.5″).
If the original photo is small, can’t we just enlarge it?
The short answer is “no.” Enlarging a digital photo blows up the pixels in an image, making it fuzzy. Enlargement by a few pixels here and there might still yield a clear image, but taking a photo from 200 pixels tall to, say, 400 pixels tall would produce an unacceptably compromised image. Below, I’ve attached a comparison to illustrate what happens when smaller photos are enlarged and, therefore, compromised. You’ll notice that the enlargement is quite fuzzy.
A live example…
This summer, I completed a website for New York realtor John Wescott (http://www.johnwescott.com). In my research of other realtor websites, I noticed that most real estate sites featured rather small, unimpressive photos of featured properties, robbing potential buyers and renters of larger, clearer views. My pitch to John was to use a site template that enabled visitors to view nice, big, full-screen images of the properties… something no other real estate site seemed to be doing. So John agreed that when a new listing was being photographed, he would provide me with the original large image from the digital camera. Admittedly, the original photos of properties that we started were small, looking fuzzy when enlarged to full-screen view. But all of his NEW listings will now feature a nice, glorious and clear image when viewed in full-screen, because all of his new photos are 72 dpi images that are at least 900 pixels / 12.5″ tall (width proportional).
So, to recap… When it comes to photos, the larger the better. I can always pare down a photo, downsizing it correctly for integration in a project. I cannot, however, enlarge a small photo. When in doubt, always provide me with a high-resolution photo. If the file size is too large to email (over 10MB), you can always send it via YouSendIt.com.
Hope this was helpful!
George
