If you work on the web, blogging  or using social media, you will most likely need to post images at some point. The Internet has made it easy for us to post photos and images – just browse for a file and upload it and it’s there! This usually works well for photos taken from our phone, they are most likely taken in an optimized mode. But if you purchase an image or use one from your camera, it may not be optimized.

Optimization

Let’s talk about optimization – what does it mean?  I like this definition from  Elliott Brueggeman , “Image optimization is using the most compressed (smallest file size) yet visually acceptable image in the proper file format for the specific role of the image.“ In other terms, it’s preparing your images in such a way that you page will load quickly (people won’t wait more than a few seconds), yet retain their crispness.

Example of Optimized vs. Unoptimized Images

To optimize your images without losing quality (remember web images will/can look great when compressed), you most likely will need to reduce the size before uploading.

In my example below, let’s look at the size/dimensions of these images that are on my hard drive:

Dimension                      Size
Left:     3072 x 2304px       2.09MB
Right:    266 x 400px             67KB

Although they are different images, they both look sharp, crisp and in focus.If I was going to use the image on the left and uploaded it to my blog software, it would exceed the width of my screen. A computer’s screen (for most website purposes is 960px wide). This image is over 3000px wide! My WordPress uploader would probably ‘time-out’, or give me an error if I tried to upload it. So we must optimize before uploading.

How to Optimize images

To optimize images for the web, first try using the tools you probably have on your computer. For me, I have Windows Photo Gallery. With Windows photo Gallery, I can quickly select a folder of images and resize them as a batch to a large, medium or small format. If I want to use them on-line, I’ll usually choose the smaller. If I’m not sure how many pixels wide I may want an image, I will choose medium because I know I can do some quick sizing with the WordPress software. That saves room on your server and having large photos in your Media Library serves no purpose. If you use Picasa or Photoshop Elements or GIMP, they most likely have this feature. With the last two programs mentioned, you will have many more options available for working with images.

Two important things to remember is it’s best to optimize before uploading and you can always make an image smaller, but you can’t make it larger once it’s optimized.

If you don’t have a desktop optimizer, you could try Free Image Optimizer. This freeware can be used on-line (by uploading your image), or you could download the software to handle batch photo optimization tasks.

Recently, I’ve needed to work with stock photos that a client wanted for their website. He wanted the Home Page to have full-screen-width photos with a text over-lay that faded from one to the next. This took a little more thought and planning. I used WebResizer for this job to make my images all exactly the same size.

Here’s a snapshot from their home page. You can see in a glance all it can do. I especially liked that I could precisely resize my images precisely to 1000 x 450 pixels. My original images were 8000 pixels wide! I had to resize these images before uploading (their max is 5MB, mine was over 8MB).

To get my images to an exact size, I first keyed into the software that I wanted my image to be 1000px wide. When I did that, you can see my image width and height. Well, I need my image to be 450 pixels high. To keep the correct aspect ratio (so it won’t be distorted), next I need to use their crop tool to shorten my image down to 450. This tool let me have the control of how much I cropped from the top and bottom instead of entering in a number and having it done arbitrarily.

This site makes it easy because as you drag your mouse, you can see the height increase or decrease. When it’s where you want it, then click ‘apply crop’ and then you’ll have your image in the size you need. So perhaps not all images will be best to use for this use.

I wish this software had a feature to add text to my image, but it doesn’t. So I used both Photoshop and Picmonkey. I’m still working and deciding which application is best.

What image resizers do you use and why? Are you resizing for the web or for other uses? Please leave a comment.