This is the final optimized image with the High Pass Filter applied that I'll be creating in this example: ( It's only 42K! )

Photographer Aaron Hewitt

2. Resize the image:

a. Go to Image > Image Size from the top menu of Photoshop
b. Resize image to 72 dpi first
c. Then set the Width and Height. This step depends upon how we've decided to build your site. In either case, you'll want to leave "Constrain Proportions" and "Resample Image" checked.

1) All the exact same size images: If we have decided that your images must all be the same size then you'll want to enter those exact numbers into Width and Height. You may have to crop the image to allow for the Width and Height to be exact because we want the image proportion to stay even such that your image does not become distorted.

2) Different size images: If we have decided that the images on your site can be different sizes, then I have given you a Maximum Size or Max Width and Height.

The Max Width and Height are the largest that you're image can be and still fit into the design of your site. Depending upon whether it is a vertical or horizontal image, you'll choose to constrain the proportion to either the Max Width or Max Height.

Rule of Thumb for Max Width/Height: Verticals by Height, Horizontals by Width:

Vertical Images: With vertical images, you usually want to set the image height by using the Max Height dimension I've given you, and then let the Width automatically adjust to proportion. You'll notice that the Width size in pixels will almost always be smaller than your Max Width.

Horizontal Images: With horizontal images, you usually want to set the image Width, and let the Height automatically change to be smaller than the Max Height.

Rule of Thumb for All Images Same Height with Varied Width: Both Verticals and Horizontals by Height.

Alternatively, we may have decided that we want all your images to have the same height and vary only in width. This can many times allow for much smoother transitions because only one dimension needs to smoothly transition instead of two.

Vertical Images: Follow the same rules as above.

Horizontal Images: This is a little trickier- You'll need to set the DPI to 72, then set the Height in pixels to the vertical height we want. Before you click OK, you'll want to check the Width variable that has automatically changed and make sure that it is smaller than the Max Width or the amount of space we have available width wise in your site for your images. If the Width is in fact larger that the Max Width, you'll need to crop the image so that it will fit.

a. Drag the current layer down to the new layer icon:

b. This will give you two identical layers of your image:

4. Apply the High Pass Filter
Make sure that your new layer or the layer on top is selected. Then from the top menu go to Filter > Other > High Pass

A window will open, showing you the options for the High Pass Filter.

The Radius value should be set somewhere between 0.3 and 1.0 or so. I've found that 0.4 is a good value. The result you want is to just barely see an outline of your image. Once you have set the Radius Value, click ok. The top layer will now be a dark grey solid with a faint outline of your image, and the bottom layer of your image will still be the original image.

Here's what your Layers Palette will look like now:

5.Change the Blending Mode
Now you'll need to change the Blending Mode of the layer that you have just applied the High Pass Filter to. From the Layers Palette, there is a pulldown menu that says “Normal” this is your current Blending Mode. You'll want to pulldown to "Hard Light".

After you change the Blending Mode, you'll notice that the Grey High Pass Filtered layer has blended into your original image. Try clicking the "eye" icon next to the image to see the results of the High Pass Filter. You should notice that with the High Pass Layer visible, your image looks crisper with added detail that was lost when you resized the image.

Make sure to leave the High Pass Layer visible when you are done checking the results.

6. Save your Image for Web.

a. From the top menu, click File > Save for Web.

b. The Save for Web window will open.

c. Make sure that the 2-up tab at the top is selected. This will show you your original image on the left and the optimized web version on the right.

d. On the right below the Save, Cancel, Done buttons are the settings you'll be adjusting.

Your image will be a JPEG with Optimized checked, Progressive UNchecked and ICC Profile UNchecked.

It's very important that Progressive is unchecked because Flash cannot load you're images if this box is checked!

You will want to set the Quality here while keeping an eye on the size of the image below the Optimized view on the right and at the same time keeping an eye on the degradation of quality of the image itself in the right window (a.k.a. jpeging). The example here is 42.02 Kilobytes at 50% quality. A good rule of thumb for quality is to set it anywhere between 40 and 60. The more detailed your image is, the higher you want the quality setting. However, the final size of the image is the most important because this reduces the time that you're users will have to wait to see the image. A good final size is somewhere between 30-70 Kilobytes for full size images, and under 20K for thumbnails. If your website has large images, a good final size will be somewhere between 40 and 150K.

7. Click Save and you're almost done! Click the Save button, and a window will open where you can name your image and save it into the correct folder.

8. Image Naming and Grouping Conventions.

a. Galleries

Rule of Thumb: Group each Gallery by Folder, Name all images the same prefix followed by consecutive numbers dictating the order of the images.

Say you have 10 galleries on your site, each gallery is named by the content included in it (the client, the event, the project, etc), and will be accessed from your main menu by your users with this name. For each of the 10 galleries, create a folder with the same name as the menu link that will open this set of images. Make sure to include only lowercase letters, numbers, or the underscore ( _ ) in your folder name. Don't use other characters such as !.@#$%^&*()/?<>, etc..

If you have image thumbnails, save your images and thumbnails into the same folder with corresponding names so that you have one folder with img1.jpg, img2.jpg, img3.jpg and th1.jpg, th2.jpg, th3.jpg... etc This way each image has a corresponding thumbnail. If we are not using image thumbnails, you can just put your full size images directly in the gallery folder.

• Choose a text prefix, and number the images in each folder in the order you would like them displayed on your site.
• Name your images with your chosen prefix + image number + .jpg: Ex: img1.jpg, img2.jpg, img3.jpg... If you are on a Mac it is important to make sure the image is being saved with the file name extension (.jpg) because your server and website will require the extension to determine what type of file it is.
• Use only lowercase letters and numbers in your image names.
• Make sure to name the images with exact numbers- i.e. no prefixed zeros: don't use img01.jpg, img02.jpg... or img001.jpg, img002.jpg...
• It is more convenient to have all of your images for EVERY gallery in your site have the same text prefix - i.e. don't use img1.jpg, img2.jpg, img3.jpg for Gallery 1 and image1.jpg, image2.jpg, image3.jpg for Gallery 2. It doesn't matter what the prefix text is, just that each gallery uses the same prefix across your entire site.
• The same rules for naming images apply to the thumbnails except you should use a different prefix like thumb or th.

b. Single, Non-Galleried Images (ex: an image that goes on your about us page next to your company bio copy)

Rule of Thumb: Group all single images for your site together into one folder, and name each image the name of the page it will be used for.

For images that are not going into galleries, the order does not matter, but instead the where the image should go. Instead of having a few folders with single images in them, let's keep it simpler and create one folder for all supplemental images. Then name each image in that folder with it's intended placement. So maybe you'll have aboutus.jpg, services.jpg and contact.jpg. If you have more than one image as an option for each page, you can include them by naming them in the order you like them, ex: contact1.jpg, contact2.jpg, etc. As with gallery images, you'll want to use only lowercase letters and numbers in your image names. If you need a space to seperate words use the underscore character ( _ ) ex: about_us.jpg. Make sure to name the image with the proper extension (ex: .jpg ) as well.

9. Delivery Options

1. Zip
Take the folders of images that you have created and zip them into a zip file. Make sure to use the .zip extension, and name your zip file with alphanumeric conventions avoiding spaces and non-alphanumeric characters. If you have a lot of content on your site, you may have to sub-group folders into separate zip files. A good rule of thumb for zip file size is to keep it under 4-5MB.

2. Email (or FTP)
Shoot me an email with the zip file(s) of your images attached. If you're having problems getting your images to me this way, you can FTP them up onto my server as well. Email me, and I'll send you the login and password you need to get access.