Save Images for the Web

The image used for this tutorial started large, but using these simple steps we now have a fast loading image that your visitors won't have to wait for.

Look at the changes each step makes to your photo!

Process Level	file Size	Load Time
Scan at low resolution 75dpi	733kb	308 seconds (over 5 min)
+ Crop unwanted area	336kb	120 seconds (2 min)
+ Optimize Image	19kb	8 seconds

Lets begin

1. Use your usual method to save your image onto your computer usually scanning or import from digital camera Note if scanning images for the web they only need to be 75dpi
2. Start Serif PhotoPlus
3. Open your saved image. File > Open
   You will see this nice little box that lets you preview the image to make sure you get the right one
   
4. First we need to crop our image using the Crop tool
   • Select the Crop tool from the Tools toolbar.
   • Drag out a rectangle and adjust the edges as needed.
   • Double-click in the rectangle to crop
   
5. Next we change the size of our image.
   First make sure you are viewing the image at full size go to View > Normal Viewing (1:1)
   Don't worry if your image is now to big for the screen we are now going to make it fit
   Image > Image Size shows this box
   
   Make sure the top two boxes are checked, this will keep the image in the right proportions
   Because we are saving for the internet we only need to worry about the first section Pixel Size
   Try to keep your images as small as possible, I am going to change the width to 350 pixels (don't make the image larger).
   Most of the images on this page are 400px wide which fit very well on most visitors screens
6. Last step is to optimize the image. first lets have a quick look at what file sizes mean the original image I used here was scanned at 75dpi (low resolution) it's lets look at the box that does this File > Export Optimizer
   
   I have used the 4x view here so we can compare the settings you can change yours on the bottom left of the box. In the 4x view I can apply a different level of quality to each by clicking on a section to hilight it before changing the quality. If you need to see a different part of the image drag it around with your mouse.
   Now lets optimize
   • Set format to JPG
   • Move the quality slider till you are happy with the image
   • click Export, name and save your file.

   Naming convention for web files is all lowercase letters, numbers or underscore, no spaces or special characters

   Good Choices

   • taffy
   • taffy_1
   • penybank_domain

   Bad Choices

   • Taffy
   • taffy?1
   • Penybank Domain (imp)

Finished

©2004 the horse host