Resizing Images for Slide Show Programs

Resizing Images for a Slide Show Program

After you get a slide show program for your blog, you need to populate the slide show with images. The quality and formatting of the images you use will make a big difference in the quality of your website. This is why everyone who markets slide show software uses sharp, well composed images to demonstrate their software.

Picture Size

All slide show software allows you to specify a size in pixels of the images you are using for the slide show. You specify the height and width and the images will be proportional to the height and width you specify, e.g. a picture 400 pixels wide by 200 pixels high will be twice as wide as it is high. Like this one:

Resizing Images

You will probably want to add images to your slide show which aren’t already the correct size. Most slide show software will automatically resize images for you but you may not like the results. It is often better to resize the images yourself before you upload the images to your slideshow. This way, you can control the result and know exactly what you’re getting.

You resize the images with an image manipulation program. Some commonly used image manipulation programs are Windows Paint, free with Windows, iPhoto, free with Macs, Photoshop, Photoshop elements. I use a free easily downloadable program called Irfanview. I find Irfanview hits the sweet spot of combining simplicity and power which lets me get my images out the door quickly while making them look good.

Resizing consists of using two windows in Irfanview: the Resize window and the Canvas window.

The Resize Window

The resize window looks like this:


Pretty straightforward; You enter the new size, in pixels, where its labeled Width and Height. What is more subtle, but necessary to understand is the checkbox for “Preserve aspect ratio (proportional)”. Here’s how this works.

Let’s say you start out with a 400px by 200px image like the one above, and you resize it to 200px by 200px. Irfanview won’t let you do this unless you uncheck the “Preserve aspect ratio” checkbox. You get an image that looks like this:


Notice how the girls face is squashed. Irfanview has packed 400 pixels worth of horizontal image data into only 200 pixes. This is a problem if you have an image you need to resize, and the new size is not proportional to the old size. You are going to get some distortion like this.  You might be able to get away with this on a landscape image if you are only changing it about 5% but you can’t radically change the proportion like this and have the image look okay.

Two Methods of Resizing the Image

If you are resizing a image to fit into a radically different shape than the original image, then you must crop the photo. That’s what we are doing here where we are taking a clearly rectangular picture and trying to fit it into a square. Two methods exist to get the image into a square: The first method is to decide what square part of the photo we want to keep. Crop the image to keep that part, then resize the image. The second method is to resize the image so it fits into the target size, but place it on a “canvas” which is the target size.

Cropping the image

You can manually crop the image in Irfanview by dragging the focus around the part of the image you want to keep, then pressing control-y to keep that part of the image. Then, you resize that image to 200px by 200px. You get something like this:


Enlarging the Image

This is a little more complicated, but has the advantage that you get to keep the whole image. You start by resizing the image so it will fit into the required size. Since the image is 400px by 200px we resize it, retaining the aspect ratio, to 200px by 100px. Proportionally, it’s the same, but the whole image will fit into 200px by 200px. Next, you change the canvas size. The canvas refers to the total size of the image. Your image will be placed on the canvas. Here’s what the canvas window looks like:


Note that our canvas is 200px by 200px. That is the size that our slideshow needs for the image. The image however is 200px by 100px since we resized it. The new image is larger than the current image. We are specify that we will place the current image in the center of the new image and that the part of the new image which doesn’t have the original image in it will be black (the canvas color). Here’s what this will look like:


Note that the image is centered on the 200px by 200px canvas and has a black border, all of which we specified in the canvas window.




Leave a Reply

Your email address will not be published.