Web Performance Tips #02 - Optimize Image (MAC)

image_compression_02.png

As a blogger, I have a habit of managing photos in Lightroom and export them as JPEG files before adding them into my post. They are usually in reduced size of about 400KBytes per photo. If you use web analyzer tool such as PageSpeed or YSlow to analyze your pages, it will complain that your pictures can be further reduced in size. This applies even you use "Save for web" option in Photoshop. 

image_compression_03.png

Why Lightroom/Photoshop from the big company does not fully compress our JPEG files are beyond my knowledge. PageSpeed suggests us to use image compressor such as jpegtran, a command prompt tool to further compress JPEG files in batch. Fortunately for mac users, there is an open source GUI tool called ImageOptim. ImageOptim has a very simple user interface. Basically it allows you to drag and drop folders/files to its main window and the compression will start automatically. It will overwrite original files so make sure you backup your JPEG files before proceeding.

image_compression_04.png

Before adding images for compression, let's check on ImageOptim preference. Personally, I prefer to keep JPEG metadata for copyright purposes so I unchecked "Strip JPEG metadata". Removing JPEG metadata will further reduce the file size but this will also remove the ownership information.

image_compression_05.png

The steps are pretty straightforward. Below are steps I used to optimize images which were already in my server:

  1. Zip and download images from remote server to local drive.
  2. Make a copy of the Zip file for backup purpose.
  3. Extract the Zip file.
  4. Drag-and-drop image folders to ImageOptim. Compression will start automatically.
  5. Zip all the processed images.
  6. Upload it to your FTP server.
  7. Remove exisiting image folders in remote server.
  8. Extract the Zip file.

That's it. Re-run PageSpeed or YSlow and it should now make less complaint on your image files.

About the Author

waco_avatar_s.jpg

CheeWah (Waco) has more than 10 years working experience in IT fields, especially in software development and testing. Some of the key projects included software development and support for production/R&D, software test automation, and Search Engine Optimisation (SEO). He is a food lover and has a food blog at www.noweating.com. Little CPU acts as his IT knowledge sharing hub.