Dynamic Image Gallery - Optimize Your Images

The first "To-Do" that need to be performed before you even think about publishing images is to convert the monsters pictures generated by your digital camera into a more civilized version that is suitable for viewing on the web, that is about 800 width x 600 height, and about 100 kb in size.

In this section we will describe step by step the follow topics:

  1. How to optimize your pictures once you've got it out of your camera.
  2. How to create thumbs version of your images.
  3. How to copy (or move) your optimized images to your website.

The assumption is that you are familiar with Photo Shop and FrontPage (or similar software) for your website work.

We also assume that you can create folders and manipulate files (Copy, Cut Paste ETC.)

We also assume that your source of images is a digital camera, and that the size is larger then 800 x 600.

NOTE: If your images are smaller then 800 x 600, skip the Resize step below.

It is recommended to print this page so you can keep read it as you go.

How to optimize your pictures into a civilized web compatible images.

  1. Using your Windows Explorer, find you have downloaded your pictures from your camera.
  2. Inside the folder where your pictures saved, create subfolder with meaningful name, such as "The Trip To Alaska"
  3. Inside that subfolder, "The Trip To Alaska" create another subfolder, name thumbs. This folder is all lower case, and MUST be named thumbs.
  4. Rename ALL the original images and give it a meaningful names, such as "Wife and kids eating ice creem.jpg" Make sure to keep the extension!
  5. Now open your Photo Shop.
  6. Open one of the images that you've downloaded from your camera.
  7. If you do not see the "Action" window in your Photo Shop, click on Window, Action.
  8. In the Action window, click on Create New Action. Name it OptimizeMyPhotos.
  9. Click on Image, Image Size.
  10. Make sure that the "Constrain Proportions" is checked.
  11. Change the Width to 800 (You may change to any other size that you want.)
  12. Note the the Height will changed, in most cases to 600.
  13. Hit Enter.
  14. Click on Image, Adjustments, Auto Level.
  15. Click on Filter, Sharpen, Sharpen.
  16. Click on File, Save for the Web.
  17. In the setting, select JPEG Medium. If you are familiar with this screen, you may choose different properties to suit your needs.
  18. Click on Save.
  19. Navigate to the subfolder (In our case, to "The Trip To Alaska")
  20. Save the image in it.
  21. Click on Image, Image Size.
  22. Change the Width to 100 (The height will change accordingly)
  23. Click on File, Save for the Web.
  24. Navigate to the thumbs folder.
  25. Save the image in it.
  26. Click on File, Close, and choose NO when ask if you want to save. (This way you keep the original image untouched.)
  27. In the Action window, click on Stop Playing / Recording.
  28. The hard part is now done...
  29. Click on File, Automate, Batch.
  30. In the Action, Select "OptimizeMyPhotos"
  31. In the Source, select Folder
  32. Click on Choose, find and then select the folder where your original images are saved (I am talking about the folder where the monsters images from the camera are saved, NOT the "The Trip To Alaska" folder.)
  33. Select NONE in the destination.
  34. Make sure that the Override Action... Include... and Suppress... options NOT chacked.
  35. Click on OK.
  36. You should now see how Photo Shop process each image found in the folder where your original images are saved.
  37. When Photo Shop is done, switch to Windows Explorer, and find the "The Trip To Alaska" folder. In it, you'll find all your images in a smaller version of 800 x 600, and about 90kb in size.
  38. Copy (or Cut) the "The Trip To Alaska" (the entire folder, not individual images in it), and paste it in your website, in the proper location. Example: images/The Trip To Alaska.

At this point, you have optimized the monsters pictures from your camera into a web compatible images and have saved it in your website. From this point, Click Here to go to the "Dynamic Image Gallery - How to link it"

Next ->