Resizing photos

Sending photos by email?  Uploading them to your website?  Wondering how to make them the right size?  Let me tell you what I do.

Recently I was emailing a couple of people on this topic, so I thought I’d copy the information here.

This is actually pretty important for email and blogs and websites.  In email, you don’t want a file that takes 18 minutes to send and receive.  When it’s received, it’s nice to be able to see it on the screen easily.  On websites, it’s nice if your picture doesn’t take 6 minutes to load.  Even too many seconds is too long.  Someone with a slow connection will leave your site rather than wait 20 seconds for the photos to load.

So here’s what I usually do to "optimize" photos for the web – that is, make them the right size (visually), and fast loading.

1. Download and install Irfanview
2. Load your photo into Irfanview
3. Crop as necessary
   If you’re using the photo on a website, it will probably end up fairly small.  Make sure you crop it so that the important stuff can be seen at that size.  Just click and drag anywhere on the photo to make a square around the part of the photo that you want to keep.   Then click Edit, then Crop selection.
4. Resize
   To resize your photo, click Image then Resize/Resample.  In the box that opens, be sure Preserve aspect ratio is checked.  Then, simply enter the new width and click OK.

   How big?  Usually for a website the width ends up being around 100-450 pixels.  For email, a size no greater than 800 pixels wide and 600 pixels high is usually safe (this is the size of a low-res monitor.  Most people have larger monitors, but they often view email in a smaller window).

5. Save the photo
   This is the tricky part.  You’ll probably want to save your photo as a jpg file.  Go to File, then Save as.  Now, enter the file name (Website tip: It helps to use keywords in your filename – ie jim-with-taco.jpg, not file0024.jpg.  That way search engines will find it easier to recognize.)  For the Save as type, choose JPG – JPG/JPEG Format.
   Now look at the little window on your right.  Uncheck everything.  Now, you’ll need to change the Save quality.  What I do here is simply keep changing it until I come up with a file size that I want.  For example:

   I save the file to my desktop with a quality of 50.  I right click on it, choose Properties, and see that it’s 25.8kb.  Too big for me (I always aim for under 16kb – better if it’s under 10kb.  That’s for a website – for email you can go a little higher – 50-75kb or even more is usually ok for most people.  For grandma who wants to print it out, go with higher quality – even a MB or two).  So I save it again with a quality of 15.  Now it’s 11.6kb – getting better.  I open the new file, however, and find it a little too distorted (the lower the quality, the more distorted it gets.).  So I raise the quality to 25.  Now it’s 16kb, and I can live with the quality.  Ok, I’ll leave it at that.

   Tip:  Usually website visitors aren’t quite as picky as you when it comes to quality.  Go with a quality slightly worse than you would like.

   So basically there are 3 easy things to do to make a smaller file:
   a) crop it (so that you can resize it smaller)
   b) resize it smaller
   c) save it at a lower quality

   Play with it until you get a quality/size combination that you are happy with.  Ideal is 15kb for the entire page, but 15kb per picture is probably a reasonable compromise.

   One last tip:  If you end up with a file size that’s larger than ideal, try checking the Save as progressive JPG box.  That way the person visiting the page will see it as its loading, so they’ll know something is there even before it’s fully loaded.  This doesn’t apply when sending a photo by email.

6. Upload or email!

Note that this assumes a few things.  I use a Windows operating system, and to simplify things I simply used the jpg format.  This works well for photos, but if you have simple color or black and white cartoons, icons or diagrams, you might want to use gif or another type of file.

Also, remember that this optimizes the photo for viewing on the computer, not for printing.  For printing, the higher resolution the better.  Here at CottrillCompass.com I have a photo gallery that has full size high quality photos.  For example, on this post I have a photo optimized for the web, but if you click on it you will go the the photo gallery.  Click the numbers beside Full size on your right, and you’ll see the full size – high quality version, suitable for printing.

Thanks for keeping the web fast!