To improve your website performance, you should optimize images for the web. This will result in improved page load times for your website visitors and bandwidth savings for you.
There are 2 primary ways to optimize images for the web:
1. Lossy – reduce the size/quality of jpeg image
I use GIMP to resize the original jpeg image and save with a lower jpeg quality setting. Any image editing application can be used for this purpose.
2. Lossless – remove unneeded meta information, comments, and Exif data from jpeg image
For lossless optimization I use ImageOptim for Mac OS X. There are other front end applications for jpegoptim and jpegtran.
The original jpeg image used in the example below was 3.2 MB (3,198,384 bytes) in size, 2592 × 1936 pixels, and taken with an iPhone 4. I used GIMP to resize the image to 268 x 200 pixels.
The images below were saved with a jpeg quality setting of the original image (95).
The image below was further optimized using ImageOptim.
The images below were saved with a jpeg quality setting of 75.
The image below was further optimized with ImageOptim.
With this optimization you are able to cut the image size down to 34% of the original size without any noticeable difference in quality.
This is the process I follow to optimize JPEG images for the web:
- Resize image to the size needed and saving jpeg image at maximum quality.
- Optimize the image using ImageOptim, setting maximum quality for jpegoptim to 75 (sometimes you need to run it through this app multiple times for maximum optimization).
Here is a link to a larger optimized image of the Epcot International Flower and Garden Festival.
For PNG image optimization techniques refer to my post Optimize Images for Web PNG.