Optimize PNG images and minify JavaScript and CSS files, the easy and fast way? With YUI Compressor and OptiPNG on the Windows-, Linux- and macOS command line of course! Compacting HTML, CSS, and JavaScript can speeds up your website because of smaller and faster downloads, parsing, and execution time.

OptiPNG and YUI Compressor to optimize images and minify JavaScript and CSS the easy way

Fire-and-forget JavaScript and CSS minification and PNG image optimization on the Linux-, Mac OS X and Windows command-line interface.

Google PageSpeed Insights recommends optimizing or compressing images such as PNGs, and to minify Javascript and CSS. Minifying resources refers to eliminating unnecessary bytes, such as extra spaces, line breaks, and indentation.

OptiPNG and YUI Compressor on Linux

To compress CSS and JavaScript in the Bash shell, all we need to do is install OptiPNG and YUI Compressor. You can then use YUI Compressor to compress CSS and JavaScript in Bash, neat! :-)

sudo apt-get install optipng
sudo apt-get install yui-compressor

and run the commands from within our static content directory:

find . -type f -name "*.js"
 | while read line; do (yui-compressor --type js "$line" -o "$line");
 done

find . -type f -name "*.css"
 | while read line; do (yui-compressor --type css "$line" -o "$line");
 done

find . -type f -name "*.png"
 | while read line; do (optipng -o5 "$line");
 done

In stead of doing a find search and a while read line loop, using YUI Compressor you can minify CSS and minify JavaScript files easily in one directory too. The help for -o <file> states:

Place the output into <file>. Defaults to stdout.
Multiple files can be processed using the following syntax:
java -jar yuicompressor.jar -o '.css$:-min.css' *.css
java -jar yuicompressor.jar -o '.js$:-min.js' *.js

All our JavaScript, CSS and PNG images are minified and optimized.

This may interest you:   How to delete all MAILER-DAEMON emails in Postfix queue

Compress JavaScript in Bash on the fly with UglifyJS 2

UglifyJS 2 is another great tool to compress JavaScript files in Bash on the fly. Here is how to install UglifyJS 2, and how to use it.

Install UglifyJS 2 from Git
The easiest way is to git clone UglifyJS:

git clone git://github.com/mishoo/UglifyJS2.git
cd UglifyJS2
npm link .

After UglifyJS 2 is installed, you can loop through it on the Bash shell, compressing all JavaScript files on the fly:

find . -type f -name "*.js"
 | while read line; do ( ~/dev/UglifyJS2/bin/uglifyjs "$line" -o "$line" --compress --mangle );
 done

YUI Compressor on Mac OS X

Mac OS X users can use brew to install YUI Compressor:

brew install yuicompressor

And compile OptiPNG from source:

  1. Download the compressed source code
  2. Open the file, optipng-0.7.5.tar.gz in the Finder. It will create a folder called optipng-0.7.5
  3. Open the Terminal, found under Applications -> Utilities
  4. In the Terminal, type cd then drag the optipng-0.7.5 folder into the Terminal, and press Return on the keyboard. This puts you inside that directory
  5. Type ./configure and press Return
  6. Type sudo make install and press Return

YUI Compressor on Windows

Java is required to run YUI Compressor on Windows (as it is on Linux and Mac OS X too). Download and install Java first.

  1. Download and unzip YUI Compressor
  2. Using cmd.exe use the following command to execute YUI Compressor:
    java -jar yuicompressor-2.4.7.jar style.css -o style-min.css

    The yuicompressor-2.4.7.jar file is located in the build folder.

OptiPNG and YUI Compressor on Windows 7, Windows 8, Windows 8.1

For Windows 7/8/8.1, you can use OptiPNG on the command line as well: compress images in bulk. Let’s dive more into OptiPNG and YUI Compressor:

Suppose my website dev content is located in E:\Data\Codebase\sites\saotn.org\www and I’ve placed YUI Compressor and OptiPNG in C:\Temp.

OptiPNG: lossless compressing images on the fly

The following command lossless compresses all PNG files recursively, from within my content directory:

FOR /F %I in ('dir /b/s *.png') DO @C:\Temp\optipng-0.7.5-win32\optipng.exe -o5 %I

YUI Compressor: compress or minify JavaScript and CSS on the fly

The following command compresses, or minifies, all CSS stylesheet files recursively, from within my content directory:

FOR /F %I in ('dir /b/s *.css') DO @java -jar C:\Temp\yuicompressor-2.4.7\build\yuicompressor-2.4.7.jar %I -o %I

The following command compresses, or minifies, all JavaScript files recursively, from within my content directory:

FOR /F %I in ('dir /b/s *.js') DO  @java -jar C:\Temp\yuicompressor-2.4.7\build\yuicompressor-2.4.7.jar %I -o %I