Click here to Skip to main content
Click here to Skip to main content

Automate PNG and JPG Image Optimization

, 6 Dec 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
How to automate PNG and JPG image optimization

Introduction

If you are a web developer, you already know how important it is to reduce the image size by compressing the image. When you are checking the page speed using the tool like “Google PageSpeed Insight” or “Yahoo YSlow”, you can see how many bytes we can save by compressing the image.

Google:Page Speed

Images saved from programs like Fireworks can contain kilobytes of extra comments, and use too many colors, even though a reduction in the color palette may not perceptibly reduce image quality. Improperly optimized images can take up more space than they need to; for users on slow connections, it is especially important to keep image sizes to a minimum.

You should perform both basic and advanced optimization on all images. Basic optimization includes cropping unnecessary space, reducing color depth to the lowest acceptable level, removing image comments, and saving the image to an appropriate format. You can perform basic optimization with any image editing program, such as GIMP.  Advanced optimization involves further (lossless) compression of JPEG and PNG files. You should see a benefit for any image file that can be reduced by 25 bytes or more (less than this will not result in any appreciable performance gain). <Google Inc., 2012. Optimize images  https://developers.google.com/speed/docs/best-practices/payload#CompressImages >

There are some online tools like “Yahoo Smush.it” use lossless compression techniques and reduce file size by removing the unnecessary bytes form the image. But if you want to make it automated, how do you do that? Several standalone tools are available that perform lossless compression on JPEG and PNG files.

For JPG, Google recommended using:

  • Jpegtran – available for both Windows and Linux and Mac
  • Jpegoptim – available only on Linux

For PNG, Google recommended using:

Using the Code

Here I wrote a Windows batch file which recursively searches the given folder and optimized the JPEG and PNG files.

  1. Download jpegtran, OptPNG and PNGOUT executable files. (Or download the attached zip file all the necessary files already included)
  2. Create a folder “ImageOptimization” in your C:\ Drive. (You can change those names and folder location by editing the batch file content) and put the above downloaded utility files there.
  3. Create a batch file “optimize.bat” within the folder and copy the following code into it:
    @echo none
    REM Optimizing JPEG with jpegtran
    forfiles /p %1 /s /m "*.jpg" /c "cmd /c  
    echo processing @path && 
    D:\ImageOptimization\jpegtran.exe -optimize -progressive -copy none -outfile @path @path"
    REM Optimizing PNG with pngout
    forfiles /p %1 /s /m "*.png" /c "cmd /c  
    echo processing @path && D:\ImageOptimization\pngout.exe @path"
    REM Optimizing PNG with optipng
    rem forfiles /p %1 /s /m "*.png" /c "cmd /c  
    echo processing @path && D:\ImageOptimization\optipng.exe -force -o7 @path"
    pause

    Although I included both PNGOUT and OPTPNG in the script. there is no need to use both.

  4. Finally, you can execute the bat file by passing the image folder you wish to optimize:
    optimize.bat “D:\image”

How It Works

  • forfiles command – Select a file (or set of files) and execute a command on each file (Batch processing) Refer to http://ss64.com/nt/forfiles.html
  • %1 – Accept the folder as a parameter. In the above example, this will equal to “D:\Image

forfiles command finds all the images in the given directory (recursively) and executes the optimizing executable by passing the image as a parameter to them (@path).

Try

  1. You can further improve by adding this batch command as a context menu command
    http://msdn.microsoft.com/en-us/library/windows/desktop/cc144169(v=vs.85).aspx
  2. Or even you can use a scheduler (e.g. Windows scheduler) to find the daily updated file and optimize them by slightly modifying the forfiles command with “/d” option. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Tharaka MTR
Technical Lead Eyepax IT Consulting (Pvt) Ltd.
Sri Lanka Sri Lanka
Having more than 9 year hands-on industry experience in software development
Responsible for designing, implementing and managing complex software systems with stringent up-time requirement.

Visit my blog
Follow on   Twitter   LinkedIn

Comments and Discussions

 
Suggestionadd guard feature PinmemberCarlos Luis5-Dec-13 18:56 
GeneralRe: add guard feature PinprofessionalTharaka MTR5-Dec-13 20:26 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150301.1 | Last Updated 6 Dec 2013
Article Copyright 2013 by Tharaka MTR
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid