Quick an' Dirty Image Sizing for Websites

By Gyasi Bourne

Content management is an essential component of any modern website, and your designer is doing you a disservice if they do not offer a decent content management system (CMS) when they develop your website. Most users have no problem logging onto their site to update and add information — it’s easy to cut and paste text into the site. However, when it comes to adding imagery many users run into difficulty: without professional image editing software, the average user lacks the tools to prepare their images at the right size and resolution for their site.

Why is image sizing important?

There are two primary reasons to ensure that your images are sized properly: download speed and aesthetics. I am focusing only on download speed in this article, although both are equally important. (I will talk about cropping images for aesthetics in a future article)

I’m sure you have been to websites in which images take forever to download: it’s a frustrating experience that often has you leaving the site before it finishes loading. Who has the time to wait? In this article I will explore techniques to size images to ensure good download speeds using commonly available tools on Windows and Macintosh computers; I will also look at an easy web-based cropping tool.

A little background

In the interest of simplicity, I will just talk about images in terms of size — the techniques I describe below automatically deal with resolution, so you don’t need to consider those factors.

In this day and age of digital photography, it is very common to acquire photographs that are much too big to place on websites. Your typical 8-megapixel camera will give you images that are 3264 x 2448 pixels. Even my phone’s camera gives me images that are 1600 x 1200 pixels. (In contrast, the images on this website are around 500 x 300 pixels.) Most CMS will allow you to upload your full size image to your website, but will display it in the small area designated for images. So, even though it looks appropriately sized to the viewer, the gigantic image still needs to download to the viewer’s browser, resulting in slow loading speeds. Furthermore, in most cases we are only interested in a certain part of the photo so we need to crop it.

Quick an’ Dirty Image Sizing on a Mac

  1. Find the image you want to size on your computer
  2. Open it using Preview (your default image viewer)
  3. Use the zoom control until the area of interest in the photo is approximately the correct final size
    sizing in window
  4. Press Command+Shift+4. Your cursor will turn into a crosshair with coordinates.
  5. Click and drag a box around the area you want to capture. Pay attention to the coordinates and you can make your images precisely the right size (because your designer told you what size to make images, right?)
    cropping
  6. Presto! A file called ‘Picture 1.png’ appears on your desktop. You can now rename this to whatever you want and upload it to your website.
    final crop

Quick an’ Dirty Image Sizing on a PC

  1. Find the image you want to size on your computer
  2. Open it using Windows Picture and Fax Viewer
  3. Resize the window until the area of interest in the photo is approximately the correct final size.
    resize
  4. Press Alt+PrtScn (That’s “Print Screen”. It’s the button next to Scroll Lock on most keyboards)
  5. Open Windows Paint. Go Edit>Paste. (Or Ctrl+V)
  6. Grab the crop tool and crop your image to the final size.
    cropping
  7. Start by grabbing one of the corners and dragging. There are coordinates at the bottom of the window that tell you how big your crop box is.
  8. Save the image. JPEG format is generally most appropriate for complex images with gradations (Photographs, complex 3D graphics). PNG is generally used for less complex graphics with flat colour fields.
    final crop

Quick an’ Dirty Image Sizing on the Web

This is by far the most powerful-yet-easy way to resize images. In fact, it is so easy and well explained I’m not going to regurgitate the instructions. I will, however, give you some tips! A caution though: this technique is a bit slower because you have to upload them before you can resize them — you’ll recall that slow downloading (or uploading) speeds is the precise reason we’re even doing this!

Start by going to http://www.resizr.com/ and following the easy instructions.

  1. To crop your image to a specific size (I hope your designer specified this for you!) this is what I do:
  2. Use the yellow slider to size the area of interest to approximately the right size
  3. Select the “Manual” button
  4. Type in the final cropped size you need
  5. Move the marquee around to locate the right area to crop.
  6. If you need to adjust the overall size: do so, and then repeat steps 2. to 4. (This is necessary to reset the box to the right size)
  7. Click the “Resize My Image” button

See more at the Newsletter archive.

top

 

ENGAGE YOUR AUDIENCE