How To Resize Pictures Using GIMP's Scale Image Tool

For me, the problem begins with the standard picture size of 640 (width) and 400 (height) pixels. This is smallest predefined picture size available using the free IrfanView program, which is what I used to resize pictures before I started using GIMP.

Here's a 640x400 picture:

See how the right side of the picture is missing the border?

First I click on "Image" then select "Scale Image...":

This brings up the "Scale Image" dialog box. You can tell what image you are working on by the thumbnail picture in the upper right-hand corner.

The chain link indicates that changing one value will also change the other value. This is the most useful part for me. When they start of at different values, I'm sure that there is some kind of math formula out there that will tell you how much needs to change on one when you change the other in order to keep the proper aspect ratio, but I don't need it because GIMP's Resize Tool figures it out for me:

Figuring out how much you need to change the size may take a bit of guess work if you don't already know how many pixels you are allowed for either height or width. Here, the problem is width, and from previous experiments I've decided that taking the width down 50 pixels to 590 works great. It's not the most I'm allowed, but the size looks good to me.

Reducing the width to 590 brings the height to 369:

Which makes the picture look like this:

There maybe times when you do not want to actually resize the picture, but if you have access to the picture with GIMP, just use it to get the dimensions, then add them to the HTML.

This works great if you use the same picture in several places that require different sizes, but use your own online storage like Photobucket. You can keep one version of the picture hosted in storage, then use HTML to resize it right on the different web pages you are displaying it.

Here is the same picture which is 640x400 on my hosting site, with the dimensions added to the HTML:

Here is the HTML used in the very first example (where the border was cut off on the right side:

<p align="center"><img alt="Base Test Image - Resized With HTML" style="border-width:0" src="http://images.animum.info/albums/userpics/test_text_03.jpg" /></p>

Here is what I used to resize it, the highlighted values are the only difference:

<p align="center"><img alt="Base Test Image - Resized With HTML" style="border-width:0" src="http://images.animum.info/albums/userpics/test_text_03.jpg" width="590" height="369" /></p>

Note: Resizing works both ways, but you generally get a better looking picture when you resize from a larger picture to a smaller one.

Here's how it looks if I only resize the height (I substituted smaller text and exaggerated the resize contrast to better show the possible problems):

<p align="center"><img alt="Base Test Image - With Smaller Text" style="border-width:0" src="http://images.animum.info/albums/userpics/test_text_04.jpg" width="640" height="300" /></p>

Here's how it looks if I only resize the width:

<p align="center"><img alt="Base Test Image - With Smaller Text" style="border-width:0" src="http://images.animum.info/albums/userpics/test_text_04.jpg" width="369" height="400" /></p>

GIMP © The GIMP Team

Original content:


How To
Resize Pictures Using GIMP
by CleanerLife
is licensed under a Creative Commons
Attribution-Noncommercial-No Derivative Works 3.0
United States License.