Here are some tips on gathering graphics for your web site. Keep in mind that it is better to have fewer pictures and have them be terrific, than to have lots of mediocre ones. Sometimes investing in one or two stock photography images really pays off. People coming to your site judge the quality of your services by the quality of your graphics.
PREPARING YOUR IMAGES FOR THE WEB:
What resolution to scan images?
It is always a good idea to save your original copy.
If you have a picture that you want to alter, choose "save as" and give it a different name. Then make alterations to the copy - the one that you've renamed. That way, no matter what you do to the picture, you can always go back to the original and start again.
72 dots per inch
Computer monitors only display 72 dots of color per inch. If you need to upload images to a database driven site, like cyber-rentals or ebay, make sure that the image is exactly the size you want it to appear when it is set to 72 dots per inch. Often these image upload interfaces will compress the images and sometimes resize them for the web, so make sure that the jpgs that you upload have not been previously compressed.
Fuzzy JPG
Web browser can display the following image formats: jpg, gif, and png.
Generally, the JPG format is used for photographs. If you are displaying graphics with solid colors (like a logo) a gif is often the format of choice.
Every time you save a jpg it compresses the image, and the image gets a little fuzzy. Let's say you have a photograph.jpg, and you crop it. When you save your change it gets fuzzier. Each time it is altered and saved it loses clarity.
If you do send your web designer a jpg, send it exactly as it came off the camera. Do not alter it and resave it, OR if you alter your jpg image, make sure you choose NOT to compress it. Save it at 100%.
Preparing JPG Images for the web
Web browsers display jpg images with the following codex: sRGB IEC6 1966-2. This profile has a smaller range of colors than the usual RGB profile that you might see when you preview your photo on photoshop or in your camera software. A picture that looks vibrant and rich on your camera can be put up on a web page and look flat and bland.
What you can do to prevent this is to convert the jpg image to the color profile sRGB IEC6 1966-2 in photoshop (Image/Mode/Convert to Profile) and then work with the saturation, levels and sharpness of the image in your image editor until you see the results with the colors and vibrancy that you want. Do this before you post it to the web.
Images on the internet are viewed at 72 dots per inch. To have an accurate idea of the image size you are working with, go to Image/Image Size in your photoshop menu and set the image resolution to 72 dots per inch (dpi), then adjust the width and height to your desired size. After you resize an image to a smaller image resolution, you usually need to re-sharpen the image to make it look more like the original image.
I don't recommend the "Save for the web" option in image editors. This option will compress the images, and if you are going to be doing further work on them, or uploading them to the web through a content management system, you don't want the image compressed at this point - or you'll end up with fuzzy jpgs (see above).
Product shots for the web.
Because a computer monitor only shows 72 dots per inch (as opposed to a magazine or catalog that shows anywhere from 300 to 1200 dots per inch), and the size of the image displayed is limited to the format of the web design, you cannot expect the same depth and detail in a photograph displayed on your web site as you would in a magazine. Distance shots or group shots of products are not as successful.
If you are selling a product it is important that you take some photographs that really zoom in on the product. That way you can supplement the less detailed pictures with some very clear detail shots. Here is an example.
 |
 |
| Both these pictures are the same width. See how much more information you can give your consumer with a zoomed in shot? | |
Portraits, staff and people pictures
If you need a picture of yourself or your staff for your web site, here are some rules of thumb.
RELATED LINKS
