Small Fish Services

How do you get images just the right size for your web pages? I recommend using WebResizer.com, but that's just one of the free online tools available.

Before you use WebResizer

• Determine the optimal size for your site. It looks nice if you have a standard size. Here are some sizes that work in the templates my clients are using (width x height in pixels).
  • Grace Presbyterian Church
    • Homepage rotator images – 420 x 240
    • Header images on the inside pages – 546 x 136, though the height can vary
    • Preschool classroom photos – 200×133 pixels
  • ECHO
    • Header rotator images – 165 x 124
  • SCA
    • Ad rotator – 175 x 125
    • Header rotator – 650 x 250
    • Standard size for post images – 250 width
• Get the image onto your computer in a folder you can locate. This may mean copying from a CD or downloading from somewhere on the internet. Use the biggest, closest to original image you have, as long as it is less than 5MB.
• If you need to remove red eye, use another program. In Microsoft Office Picture Manager, click Edit in the toolbar and choose Resize in the panel that pops up to the right. You can also use a free download such as Picasa.

To get to know WebResizer, there is a great tutorial on YouTube. Here are the step-by-step instructions.

• Go to http://www.webresizer.com/resizer/.
• Click "Choose File" and find the image on your computer.
• Click "Upload Image."
• If you need to crop the image
  • Adjust the size to be big enough that your cropped image will be the exact right size. For example, if you want the final image to be 250 pixels wide, resize to 500 before cropping. Enter that larger width in the "New Size" box and click "Apply Changes."
  • Now click "Crop Image."
  • Enter the final dimensions in the boxes that pop up.
    • If that gives you a box that is the wrong size for the image, you may need to do this in multiple steps. Start by cropping to the width you want (by dragging the box handles) but keeping the full height. Then change the width to the correct dimension and crop again for the height.
  • Click "Apply Changes."
• If you don't need to crop
  • Enter the final width in pixels in the "New Size" box and click "Apply Changes."
  • Confirm that the height is correct. You may still need to crop.
• If anything goes wrong, click the "Start Over" button!
• Now you can look at the other features if you like.
  • The Sharpen feature can be great for fuzzy pics.
  • You may want to adjust the Image Quality if your image is still relatively large. Right under the image, it shows the file size of the optimized image. This affects how long it takes for your page to load.
• When you're satisfied, click "Download This Image."

Now go to your website and insert your image. For WordPress sites, you will usually go to the page or post where you want the image to appear and click the Upload Media button.