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 gimp.org 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.
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.
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.
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.
Click export, close GIMP (without saving), and we’re done!