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.
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.
Related posts
- Image manipulations with Imagemagick
- Upload images for usage in TinyMCE
- Tutorial: FTP Upload via cURL
Comments
Trackback URL for this post: http://www.web-development-blog.com/archives/best-methods-to-optimize-jpeg-images-for-websites/trackback/
I never used Imagick extension because it’s an PECL extension. PECL is not wrong but most provider doesn’t support them. Sure ImageMagick is supported more often and the exec() functions is often disabled 
In my own experience, it’s easy to install ImageMagick on most Linux distros and very easy to use from the command line.
Why not use the -strip function for web optimizing via imagemagick.
This will remove comments aswell as icc profiles, which can easily take up to 10kb…
I find in Photoshop you can compress some JPEGs as much as 35% without much noticeable difference in appearance, obviously it depends on the content of the image but it is surprising how far you can push it before you start getting compression artifacts.
I’ve had pretty good luck with Paint.NET… it’s free and seems to work pretty well at compressing JPEGs without too much quality loss.
The Paint.NET photo editor looks not bad, I will try that piece of software if I get my next windows machine 
Thanks for sharing.
Sorry, the comment form is closed at this time.
Under “Optimize your JPEG images with ImageMagick and PHP”, Why no mention of the imagick extension?