Web Design: Getting Your Photos Ready to Go Online
It’s essential to show your work from a distance and up close to display all the details of your craftsmanship. by Zino Vogiatzis |
here
are two types of images used in designing a Web site: photos of your work and
graphics that help provide a visual context for your Web pages. We will cover
photos in this column.
Converting Your Images to Digital
The images of your work are arguably the most important element in your Web site. High quality photos that show your work at its best are a must on an artist’s Web site. Simply put, they are what visitors come to see and, in a sense, your Web site will be built around them.
Digital images can come from digital cameras, but more often they will be scans of photographs or slides. Many artists already have either printed photographs of their work or 35 mm slides they have to submit to various juried art shows.
The process of scanning slides and printed photos converts them to digital images. There are many photo labs and print shops that will scan them for you and put them on a CD for about $1 to $10 each depending on volume, resolution and corrections.
![]() |
![]() |
| As discussed , these are examples of images that are quickly and comfortably viewed online: (left) a bowl by Kremer Glass Studio, and (right) a wall quilt by David Paul Bacharach. | |
If you do the scanning yourself you need a scanner with a special attachment to scan slides. For images on the Web, a scanning resolution of 72 dpi (dots per inch) is adequate; it is the maximum resolution computer monitors can “read.” However, if you plan to use your digital images to make good quality prints yourself, choose higher resolutions that will give you sharp images on paper. So, when planning to use slides and negatives for prints, you may choose a scanning resolution of 1200 dpi or higher, and for prints of photos at least 300 dpi.
When having your slides or photos professionally scanned (or doing the scanning yourself), choose to get your digital images in a generic format like TIFF or JPG. TIFF is a widely used format that does not compress images, i.e. does not affect their quality. If they are in JPG or JPEG format (Joint Photographic Experts Group), a 24-bit color format that is very efficient in capturing the nuances of colors in photos, make sure they are scanned at the lowest compression, i.e., at the highest quality. Images that come from digital cameras are in JPG format.
In addition, if you are going to get them in some proprietary format, first make sure that the format is compatible with the image-editing software on your computer.
Working with Digital Images
If you prepare your images yourself, ask the photographer for the raw image files. If others will prepare them for you, make sure they know you want to put them on your Web site.
Digital images from digital photography or scanning can be given to you “Web ready” to be placed directly in your Web pages with no extra work. But only you can define what is “Web ready” for your art.
You must edit your images before putting them on your Web site. Familiarity with the basic photo editing features of your image editing software is essential in dealing with photos. You can also consult the online references provided with this column.
Resizing your Image
The most common editing change you have to make to your
images is to resize them. Good quality digital images, whether from scanning
or from a digital
camera, are big, both as files in bytes and as images in pixel dimensions.
They have to be reduced for the computer screen to either thumbnails or full-size
images.
Plan to show every item included in your Web site in a full-size image that
allows the item to be fully appreciated. A full-size image cannot be more
than approximately 750x450 pixels. This is the usable area of an 800x600
screen
with the most commonly used resolution on computer monitors. This size will
allow your images to be viewed in one window without any annoying horizontal
or vertical scrolling.
Web Resources for Image Editing |
Besides any tutorials in your software, there are online tutorials that provide step-by-step instructions, tips and how-to’s for image editing. Links to online learning resources: Two Web design online resources that cover
image editing: |
The size you actually choose will depend on your art and how you want to show it. It’s essential to show your work from a distance and up close to display all the details of your craftsmanship.
Do not make your images so big or so small that it becomes hard to view the item comfortably. Try various sizes to find the best, using as a guide the way someone would look at the item in reality.
For example, a bowl will be held approximately at arm’s length while a wall piece will be viewed from a distance and then up close for details. See examples at www.kremerglass.com and www.bacharachmetals.com.
Cropping your Image
A related process to resizing is cropping. You’ll use cropping to eliminate any unnecessary background around an item or to isolate details out of an image to show them separately.
Other changes that you may need to make are removal of defects from scanning (scratches, speckles, etc.), contrast adjustments and color adjustments. When it comes to color precision, do not be overly meticulous. Keep in mind that the colors of your images will look different in every viewer’s monitor.
JPGs are not very easy to edit but, in general, it’s easier to prepare those that come from professionally taken photos. One approach to follow is to crop your images first, resize them and then color correct them. Always try first the automatic adjustments features of your image editor (usually under the “Enhance” menu) before going into your own editing, particularly if you start with good quality photos. When you’re finished editing, always save your images uncompressed in a format like TIFF or the default format of your image editor (PSP on Paint Shop Pro, PSD in Photoshop Elements) before saving them as JPGs.
High Quality JPGs are Paramount
JPGs are compressed when saved to reduce their file size and make them load faster in browsers. But compression also deteriorates their quality, introducing so-called artifacts (bleeding colors, checkerboard patterns, blotchy areas, etc.). Image editors allow you to preview image quality at various levels of compression.
Save your images at the maximum compression that will not introduce any visible deterioration. Always err on the side of image quality rather than file size. There is nothing more counterproductive on an artist’s Web site than images of expensive, unique creations with excellent craftsmanship that have been impaired by excessive compression. Your visitors will only tolerate a few extra seconds of waiting to see a high quality, enjoyable image of your work appear.
Zino Vogiatzis is a management consultant who works with
small businesses on marketing strategy.
He holds an MBA and two engineering
degrees.