| 
singapore-business-database

Best methods to optimize JPEG images for websites

While 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 down-size the JPEG images for your website.

If you design your website should use some compression for your photos, banners and many other web elements. You favorite image editor should have some function to down-size your images. For this article we compare 4 ways to compress our example photo (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 the Internet. 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 Wndows 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)

The last option is a tool we used via the command line. 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.

Original 100% Adobe Photoshop 60% Adobe Fireworks 80% Imagemagick 80% GIMP 86%

The results after 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 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. Note only the JPEG files are getting compressed.

Optimize your images top make them load faster, but be careful don’t compress them too much. Similar Posts:

  • Image manipulations with Imagemagick
  • Upload images for usage in TinyMCE
  • Tutorial: FTP Upload via cURL