Optimizing JPEG Images for the Web Using GIMP and RIOT

JPEG format is best suited for displaying images that have a large array of colors. The best part about JPEG is that you can adjust the degree of compression and thereby reduce the size of the image with acceptable loss to the overall image quality. In addition to that, you can also implement chroma subsampling which allows one to reduce the chroma information as compared to the luma information taking advantage of the human eye's lower sensitivity for color differences as compared to the luminance.

In this article we will be discussing JPEG optimization using open source tools like GIMP and RIOT. I have also written an article on PNG optimization which you can check out if you want information on the best open source tools to optimize PNG images.

Optimizing JPEG Using Gimp

Gimp does a pretty good job of optimizing JPEG images without the need for any additional plugins. Here are the steps on optimizing JPEG images using Gimp:

Step 1: Open Gimp and Go to 'File > Open' and open the image that you want to optimize.

Step 2: Now go to 'File > Export As...'. This should open a dialog box.

Step 3: In the 'Name' field, add a name to your file ending with a '.jpg'. Eg: image-name.jpg and then click 'Export'.

Step 4: In the resulting dialog box, check the 'Show preview in image window'. You should now be able to see the current file size and an image preview. Refer image below:

Optimizing JPEG using GIMP

Step 5: Lower the 'Quality' setting and see if you are able to get your desired file size with an acceptable image quality.

Step 6: Click on 'Advanced Options' and from the 'Subsampling' menu, experiment with selecting 'Chroma Halved' and 'Chroma Quartered'. See if you can maintain the image quality with a lowered file size.

Play around with the 'Quality' tab and the 'Subsampling' options until you get your desired file size with acceptable image quality.

Step 7: Make sure that the following options are unchecked: Save Exif Data, Save thumbnail, Save XMP data, Use restart markers and Use quality settings from original image.

Step 8: Once you are satisfied with the results, click on 'Export' to save the image.

If you don't have GIMP, you can download it free from here: Gimp.org

Gimp - Save for Web Plugin

The GIMP save for web plugin is a handy tool that can help you optimize JPEG, GIF and PNG images. It's easy to use as it offers an image preview and has settings to remove EXIF info along with reducing quality, cropping and resizing images.

Let's see how you can install and use the 'Save for Web' plugin in Gimp.

Step 1: Download the save for web zip file from here: http://registry.gimp.org/node/33

Step 2: Unzip the file and copy the resulting webexport.exe file in your GIMP plugins directory.

If you don't know where your Gimp plugin's directory is, go to 'Edit > Preferences > Folders > Plugins'. You should be able to see one or more locations here. Go to these locations and if you can find existing plugins there. If yes, that's the folder you want to paste your webexport.exe in.

For me it was this folder under program files: C:\Program Files\GIMP 2\lib\gimp\2.0\plug-ins

In my other machine the folder was: C:\Users\Username\.gimp-2.8\plug-ins

Step 4: To access the program, close and reopen Gimp, go to File > Save for Web and you should be able to see a dialog box with a image preview where you can make the required adjustments to your image.

Saving image using sfw

Adjust the 'Quality' tab until you get your desired result before saving. (refer image below)

using-Using save for web plugin

Optimizing JPEG Using Riot

Riot which is short for Radical Image Optimization Tool, is by far the best open source image optimization tool on the net. It is easy to use, has batch conversation facility and does a great job of reducing the image size while maintaining the overall image quality.

Let's see how you can use RIOT to optimize your JPEG image:

Step 1: Download RIOT from here http://luci.criosweb.ro/riot/download/.

Note: If you don't want to install the software, consider downloading the portable version which you can find on the same download page. With the portable version, no installation is required. You can start using the software as soon as you download it.

Step 2: Considering that you downloaded the portable version, unzip the file and open the application file named 'Riot'.

Step 3: Once you have opened RIOT, go to 'File > Open' and select the image you want to optimize.

Step 4: If you are optimizing a JPEG image, make sure the JPEG tab is selected.

Step 5: Click the 1:1 button so as to get a preview of the image at the original size. Refer image below:

Riot Optimized JPEG Image

Step 6: Lower the quality of the image for as long as you can maintain acceptable image quality.

Step 7: Also experiment with the 'Chroma Subsampling'. I found the 'Medium 4:2:0' setting gives the best results but if that deteriorates your image, reduce it to the low setting.

Step 8: Once done, click on the 'Meta Data' tab (lower right corner next to the 'JPEG Options' tab) and make sure that Remove EXIF, Remove IPTC, Remove XMP and Remove Comments are checked. The 'Meta Data' tab will not be shown for an image if the image does not contain any meta data.

Step 9: Once you are satisfied with the results, go to 'File > Save as...' and save this image as a new file.

The software also has batch conversion facility so you can convert more than one image at the same time. RIOT is also available as a plugin for GIMP which you can download from here.

Putting these Programs to Test

I tried reducing an unoptimized JPEG image which was at 57.75 Kb to 15Kb which is more than a 70% reduction from the original size. The optimization was done using Gimp, Gimp save for web plugin and RIOT. Settings used were as follows:

  • Gimp: Quality: 51, Chroma Subsampling: None, DTC Method: Integer, Encoding: Progressive, Smoothing: None
  • Save for Web Plugin: Quality: appox 70, Smoothing: none, Encoding: Progressive, Strip Exif: Yes.
  • RIOT: Quality: 77, Chroma Subsampling: Medium: 4:2:0, Encoding: Progressive, Metadata: Remove all

Here is the Unoptimized Image at 57.75Kb:

Unoptimized JPEG Image

Here are the optimized images using RIOT, Gimp and Gimp save for web plugin:

Optimized with RIOT - 15KB
Optimized with GIMP - 15KB
Save for Web Plugin - 15KB

As you can see, RIOT has done a great job of reducing the image size while maintaining the overall image quality. The save for web Gimp plugin is not too bad as well. The Gimp output is a little blurry but definitely acceptable.