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.

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

A very powerful tool for creating and manipulating images is ImageMagick. With this tools you can create drawings, modify existing images or just process images. The tool is available for Linux, windows and Mac based systems and is free available. Using the command line is Imagemagick the optimal tool to use image functions within your script or application.

Use Imagemagick to watermark your images, to create fancy e-cards or just to convert images into other formats. Basic operations are very easy like

convert resize 50% image.jpg new.png

This simple command will resize your jpg image and safe a copy as some new image in .png format. Just imagine how much code you need with the GD library. As a webmaster you will find ImageMagick with most of the web hosting accounts.

Check Google if you need example code and resources. If you can’t find the information you should try the book “ImageMagick tips and tricks“. This book full of information and tutorials is a good start to learn all basic functions of this powerful tool.

Inside the book you find instructions how to install ImageMagick on different platform and there also basic instructions on how-to install additional fonts. If you’re interested in this feature you should read this article too.

You will find real word examples for each command line tool. Each function has a few lessons of each chapter to train each function with a real world example:

Convert and mogrify

Both functions are used for transformations, while the convert creates a new image is the mogrify function used to change existing images. For examples:

crop an existing image and safe a cropped new version
convert sample.png crop 110x70+60+50 cropped.jpg

draw a line on white background inside a new image
mogrify size 80x100 xcwhite draw 'line 10,10 70,90' line.bmp

Composite and montage

These both functions are used to group or assemble multiple image sequences together like:

Mask an existing logo image with some background and safe it into the result image
composite -compose CopyOpacity logo_mask.png background.png result.png

Other functions like identify, display, import and conjure are explained too, check the book or the IM website for more information.

The book is written to use ImageMagick with php. Use above tools in your PHP code like:

$command = 'convert example.jpg new.png';
exec($command);

Instead of the PHP function exec it’s also possible to process the commands with functions like system, passthru or shell_exec.

After you got all the basic lessons you get some more practice:

• How to call ImageMagick Command-line Utilities within PHP code
• How to Save the Result of an Online Image Processing Task
• How to Start Sessions for our Visitors
• Building a Confirmation-Code Box
• Online Image Water Marking
• A complete E-card application
  Learn how to add different text styles to your e-cards. The tutorial includes the complete code for the following features:
  • Image gallery
  • Image upload / remote copy
  • custom text for the e-cards
  • fomat text on images
  • send the finished  e-card by e-mail

While reading the book you should check this page for example code, screenshots and additional information. If you’re not sure if this book is written for you try this example chapter. The book was released in 2006 but is still “compatible” with current version of ImageMagick.

More ImageMagick resources

• The ImageMagick homepage
• Examples of ImageMagick Usage
• Imagick PHP code tutortials

Similar Posts:

• Best methods to optimize JPEG images for websites
• Database Management with phpMyAdmin
• CSS navigation bar with stylish web2.0 elements