Emagine Web Marketing

Preparing Photos for the Web

home title Posted by on Mar 15th, 2009 home title

The following steps are recommended for cropping, adjusting and optimizing your images to be used on the web.  You can use Adobe Photoshop, Fireworks or your favorite image editor:

1)  Adjust color
If your photo needs some adjustment to make the colors more vibrant, choose:

Filter, Adjust Color, Choose “levels”….
Adjust the slider bars below the histogram to be lined up evenly with the starting points of the histogram on either side.  Then begin adjusting further (make sure “preview” is on so you can see the changes “live”) and adjust the image to your preference.  When you are happy with the adjustment, click “ok”.

adjust_image

2)  Crop the image
Cropping an image can give it more impact and provides a means of eliminating any unwanted image data in a photo.  Click on the crop tool (see image icon below), then click and drag on the image,  starting from the upper left corner of where you want to crop from moving towards the right and down.  Once you have the crop area the size you need you can click on the canvas again and then position the crop box precisely over the image – when you are ready to apply the crop, double click within the crop area.

crop1

3) Sizing & Optimizing for the Web
When working with images for the web it is best to set the image resolution to 72 dpi.  Typically images taken with a digital camera are at 300 dpi (which is a great setting for print).  Photos used for websites can be a variety of sizes from 50 pixels wide up to 600 pixels wide (on average).  Change the dpi setting for your image first and then adjust the pixel dimensions for the width and make sure to choose “constrain proportions” which will automatically adjust the height to be proportionate to the width.

image_size1

4)  Sharpen the Image.
Now that you’ve cropped and sized your photo, it’s time to sharpen up the image, as some quality has been lost in the sizing process.  Choose “select all” and then “filter”, “sharpen”.  You should visibly see the image get clearer.

sharpen

5) Save the image for the web
Save your edited image with a new file name as a jpg, medium quality is fine.  Avoid using spaces or special characters in the file name.

Now your image is ready to upload into your content management system.

Add an appropriate title for every image, set alignment and in some cases you can add a border around the image if desired.

Be Sociable, Share!

Related Posts:



Author | Michelle Harrington of Emagine Web Marketing
Michelle is a web development and internet marketing professional dedicated to helping small businesses in Hawaii achieve success online. Michelle provides free advice, tips and how to's on the Small Business Internet Marketing Blog.


Comments are closed.

line