Resizing Photos for the Web with GIMP

Resizing Photos for the Web with GIMP

The internet is not a big truck. It’s not something you can just dump something on. It’s a series of tubes! That infrastructure has a maximum capacity which we are just now fully realizing. Despite this, people expect the websites they visit to be snappy. As you progress down this path of web development, you will begin to seek out ways to reduce the bandwidth (the amount of data transferred) required for your website. The less disk space your website eats up, the faster it can be streamed to another computer. Mere milliseconds can make the difference between a visitor as complacent and mild-mannered as Bruce Banner and a raging, ferocious, green monster.

Optimizing your web images is perhaps the easiest and most beneficial action you can take toward improving your website’s loading time. Most of your web images aren’t going to be very big. Lets say for the sake of example that they average about 600 pixels wide. That’s a very small fraction of the image size that comes off your digital camera. You’ll remember from the chapter on images that we could resize a huge image to fit on our page with the width tag. You’ll also remember that I immediately shunned such behavior. Resizing images the proper way, with an image manipulation program, is crazy easy. Best of all it’s crazy free! And I’m not just talking about root beer. It’s free as in speech, too. The GNU Image Manipulation Program, or GIMP, is a free and open-source photo and graphics editor. If you are fortunate enough to be running a Linux distribution, chances are good that you already have GIMP installed. The less fortunate may check out for instructions on installing the software. Once you have GIMP up and running, open up a photograph that needs resizing. I’m going to take a look at that glamorous robot picture again.

open big image

That’s hot. It’s also enormous. To scale this image, first click on the “Image” menu at the top of the program, then select the “Scale Image…” option.

03 - Scale Image

Not only is this image too wide, it also has an unnecessarily high resolution for a web image. Generally speaking, we want to set web images at a resolution of 72 pixels per inch. Anything higher is meaningless to our computer monitor. Unless of course you are optimizing for retina displays, but that’s a discussion for another day. Go ahead and set the resolution to 72 and the width to 600, then click the scale button.

05 - scaled

That is much better. Now we just need to export it. From the menu at the top click on “File” then “Export”.

GIMP is smart enough to know how to format your image simply by checking the file extension, so make sure the name of your image ends in “.jpg” before you click “Export”.


You will then be prompted to make some adjustments to the jpg export options. I generally leave the quality setting around 95-97. The visual difference between 95 and 100 is negligible, but the file size difference is significant.

jpg quality

Click export, close GIMP (without saving), and we’re done!

Resizing Photos for the Web with GIMP was posted by on . JR is one of the three humans that run the behind-the-scene affairs of The Hello World Program. He is interested in spreading the good robot word over the vast Inter-webs. His contributions to the show include editing, web programming, design, and music composition.

Discuss this article in the Comments below, or and it with your friends. Learn more about Web Development by subscribing to The Hello World Newsletter .

Join the Discussion

Subscribe to our Mailing List

Stay up to date on the latest videos and tutorials with our monthly newsletter

The email entered is invalid

Want to Learn HTML?

Master the essential web language with our free 10 day course. Get entertaining web development classes emailed directly to your inbox.

The email entered is invalid