Image Optimisation Notebook

4 April 2018
Image Optimisation Notebook
Table of Contents

About

The images uploaded to your website should be optimised for the user’s experience. Both the visual appearance of images and the time it takes to load them have an undeniable effect on the overall user experience of your website and whether you retain your users. In order to minimise the time and bandwidth impact of loading images, web developers or content creators should be optimising the images they upload to their websites.

The code library Mozilla JPEG Encoder (MozJPEG) is one of the leading and most effective tools that can be used for better JPEG encoding in order to optimise the size of your images.

MozJPEG is a code library that you generally have to compile yourself, and only then you can use the cjpeg sample command line interface application to optimise your images. MozJPEG is especially useful for developers to automate the optimisation of images. See the instructions below on how to compile and use MozJPEG and the cjpeg command line interface.

Alternatively, you can simply download and use the fantastic cross-platform GUI application Imagine which uses MozJPEG under the covers for optimisation of JPEG images, and also provides functionality to optimise PNG files as well. This is a great tool for less technical content creators to use, as they can simply change quality settings and quickly visually compare the differences between the images.

Bookmarks

More tips on image optimisation can be found in the following Google Web Fundamentals documentation:

The Mozilla JPEG Encoder (MozJPEG)

Depending on your technology set, you could use NPM to download and install (an old version of MozJPEG), or you can compile the latest version yourself.

Installation

In order to install an old 2015 build via NPM:

  • npm install mozjpeg -g
  • mozjpeg is an alias for %USERPROFILE%\AppData\Roaming\npm\node_modules\mozjpeg\vendor\cjpeg.exe
  • Run: mozjpeg ...

Compilation

Alternatively, compile the latest version yourself.

Prerequisites

  • VC++
  • Install NASM - choco install nasm
  • Install CMake - choco instal cmake
  • Clone mozjpeg repo:
    • cd repos
    • git clone https://github.com/mozilla/mozjpeg.git
    • see BUILDING.md for more compilation instructions

Sanity Check

"C:\Program Files\CMake\bin\cmake" --help

The output of "C:\Program Files\CMake\bin\cmake" --check-system-vars contains the following, even though nasm is installed and in the PATH environment variable:

  • "-- NASM = NASM-NOTFOUND"

Don’t know why… but this will cause problems with compilation - see below.

Create Make Files

  • Create solution file for use with the Visual Studio IDE: "C:\Program Files\CMake\bin\cmake" -G "Visual Studio 15 2017 Win64"

OR

  • Create make files for use with NMake: "C:\Program Files\CMake\bin\cmake" -G "NMake Makefiles" -DCMAKE_BUILD_TYPE=Release

After running cmake, open the folder in VSCode, find NASM-NOTFOUND in all files, and replace with nasm.exe - otherwise the compilation will fail.

If you need to recreate the make files, clean out the cached ones:

  • del CMakeCache.txt
  • rmdir -s CMakeFiles

Compile

  • Run nmake

Usage

  • cjpeg-static.exe -quality 80 -outfile for-web.jpeg input.jpeg