WaratahWeb Blog

Sourcing Website Graphics - Where What and How
Saturday, January 03, 2009

All websites need to balance text with graphics. If you're selling products, good quality photos are important to let customers see what they're buying. If you're selling services, you and your staff are the product so you might include photos to personalise your offer, or more generic photos related to your industry.  Whatever the case may be, the graphics should be of the best possible quality.

There are three options for sourcing imagery for your website, you can do it yourself, purchase stock images or hire a professional.

DO IT YOURSELF

If you know what you're doing with a camera and can take decent photos, then this could be an option for you. However, be aware that there are differences with taking photos for the web versus taking photos for print. Following is an article from About.com with a few tips and tricks that you may find helpful to read before you get too snap happy: http://webdesign.about.com/od/graphics/ss/aa100406.htm

(Also see my notes below about image resolutions & file sizes)

HIRE A PROFESSIONAL

Consider hiring a professional photographer if you want to get the best images possible for your website. It might cost more, but you're hiring someone who knows how to make you (or whatever the subject is) look great, using an artistic eye and the technical skill to take high quality photos. A professional photographer can usually take your vision and mold it into something eye-catching, truthful and new.

PURCHASE STOCK IMAGES

If you don't have the time or ability to create or commission your own images, chances are you'll find what you're looking for in a stock photo library (or image bank). They contain thousands of photographs, illustrations, clipart and animations that are created for general use. For a licensing fee (or sometimes free), you can select any of these images for use in your project.

Every stock photography source has different guidelines regarding the licencing of images (eg. free, royalty-free or rights-managed) and others even restrict the usage of their images to personal and non-profit use only. So be sure to check out the fine print and know what these guidelines are before you source an image.

Here are a few sites we recommend:

iStockphoto - http://www.istockphoto.com
Getty Images - http://www.gettyimages.com
Dreamstime - http://www.dreamstime.com

WHAT NOT TO DO

Don't Even Think About Google Ganking!

As you might already know, Google provides the ability to do an image search. The term "Google ganking" refers to the process of taking a copy of an image found in the Google search results, opening it in a photo editing application (like Photoshop), modifying the image slightly and then using it on your website.  It's a serious problem in web design.

Unless the images on a website are specifically marked as being free to use or available in the public domain, you can assume that they are copyrighted by the site's owner, and therefore you'll need permission to use them.

You may think the image's owner will never notice your rip off of his or her work, but you run the risk of enduring something as embarrassing as having a cease and desist letter sent to you, or something as serious as a lawsuit.

The penalties of stealing images probably won't involve handcuffs, but we would rather you not do it.

Don't Use Corny Clipart or Illustrations

Many websites offer free clipart and illustration packages. While these cheesy, generic graphics may work for an internal company bulletin, or a corny do-it-yourself greeting card, they should be considered off-limits for any professional website project.

While the quality and 'freshness' of some stock photos can be questionnable as well, there's nothing worse than seeing a good design blemished by stale, cliched clipart. So please think twice before inserting clipart or a cheesy animated GIF on your site.

SOME NOTES ABOUT IMAGE RESOLUTIONS & IMAGE SIZES FOR THE WEB

Currently, most monitors display 72ppi (pixels per inch), so there isn't much point putting higher resolution images on your web pages, they won't give the visitor any increase in quality and will only cause the pages to load slower (particularly for those on dial-up).

Images should be 'optimised' for the web before uploading; compressing them to a small enough file size without compromising quality. This involves working with the colours, resolution and dimensions of an image in a graphics application like Photoshop.

When we work on images for a website project, we ask our clients to either provide:

• the highest resolution images available
  OR
• 72ppi images that are no smaller in dimension to approx 1024 pixels wide x 768 pixels high.

This way, when we optimise them for the web we end up with the lowest possible file sizes and the best quality. If files are already low quality and small in dimension, if you need to enlarge the image dimensions you lose pixel quality and they become fuzzy or blurry. You can't effectively put quality back in that was never there.

Image resolution for print is a different story...

Unlike the Web, a file's size is much less important when it comes to printing.  However, it is important to know how large you can print the image while still retaining an acceptable level of quality and detail. Print professionals recommend that, in order to achieve a high quality print, an image should be saved at a minimum of 300ppi (or 300dpi - dots per inch, as it relates to printing).

I hope you find this information useful.



Tweet|