How-to optimize JPEG images for websites

Even if internet connections becoming faster and faster, it’s still important to keep your website as fast as possible. One of the “slow” parts of your website are the images. In this article we show several ways to compress photos and JPEG images for your website.

Update: Since 2011 is the page speed an criteria how Google ranks websites. Google will not remove “slower” websites, but together with all the other ranking factors is your website’s speed something you should think about. There is also some other reason why you should care about file sizes: Bandwidth, if your website has many visitors, every saved KB of bandwidth you save will lower web hosting expenses.

How to compress photos?

If you build your website, you should compress your photos, banners and most other web elements. Your favorite image editor should have some function to down-size your images. For this article we compare 4 ways to compress our example photo (original file-size 393KB):

Adobe Photoshop

If you use the “Save for web…” function it’s possible to create a web optimized version from your image that is small enough and has a quality which is good enough for your website. In our example we used the preset “High Quality” which is equal to 60% quality. The result is a smaller file with a file-size of 95KB.

Adobe Fireworks

Fireworks is my favorite web image editor because of the unique feature to have bitmap and vector elements in a single file. We did an export with 80% quality and the compressed version has a file-size of 85KB.

GIMP (free Image Editor)

Both Adobe products are not free and are only available for Windows or Mac. If you need a free editor you should try Gimp, an Image editor which many functions like the other commercial products mentioned before. The editor has also a “Safe for web” function and we used and 86% quality for our export file which becomes a size of 87KB. If you use GIMP to down-size your photos from your digital camera you should check the option “Strip EXIF”, removing the photo’s meta data will make the file smaller for another ~10KB.

ImageMagick (command line tools)

Our last option is ImageMagick a Linux command line tool. Using the following command the file is down-sized using an 80% quality (file size after conversion is 89KB): convert original_100.jpg -quality 80 imagemagick_80.jpg Sure this method works different from the other methods but the good point is that you can use this code in your PHP scripts or just from the command line of your web server.

Original image and compressed copies

Check the images below and note that the quality for the compressed images (file 2-5) is very similar.

The results after the photo compression is very similar and the file size is between 85KB (fireworks) and 95KB (Photoshop). If you’re looking to down-size another 5-10%, you should try Smush.it a free service from Yahoo. They offer a tool which is able to optimize your images for 5-10% smaller file size without to lower the grade of quality.

Optimize your JPEG images with ImageMagick and PHP

If you need to optimize the images for your existing website, the following PHP code might be useful:

<?php
$dir = '/home/some_directory/'; // the directory with your files
$compr = 80; // the quality precentage
if ($handle = opendir($dir)) {
	while (false !== ($file = readdir($handle))) {
		$path = $dir.$file;
		if (is_file($path)) {
			$ext = pathinfo($path, PATHINFO_EXTENSION);
			if (preg_match('/^(jpg|jpeg)$/i', $ext)) {
				exec(sprintf('convert %s -quality %d %s', $path, $compr, $path));
			} 
		}
	}
	closedir($handle);
}

Just enter the path to the the directory you like to optimize safe the code as a PHP script and execute the file from the command line of browser. Using this PHP script, only the photos (JPEG files) are getting compressed. Compress your photos to make them load faster, but be careful don’t compress your images too much.

Published in: Website Development