Optimizing & converting Images

9 min readMay 19, 2018

A short overview of some tools you can use to compress and optimise images.

Reduce images

For Mac and Windows (Linux) GUI based

PngOptimizer (gui, Windows): http://psydk.org/PngOptimizer.php

Cleans your PNG files of useless or wrong information and Reduces your PNG files weight. It also Converts into PNG other lossless image formats (BMP, GIF, TGA). There is support for animated PNG (APNG).

ImageOptim (gui, Mac): http://imageoptim.com

ImageOptim optimizes images — so they take up less disk space and load faster — by finding best compression parameters and by removing unnecessary comments and colour profiles. It handles PNG, JPEG and GIF animations.

ImageOptim seamlessly integrates various optimisation tools: PNGOUT, AdvPNG, Pngcrush, extended OptiPNG, JpegOptim, jpegrescan, jpegtran, and Gifsicle…etc

This is by far the best tool as it combines several of the best libraries into one tool

ImageAlpha (gui, Mac): http://pngmini.com

ImageAlpha converts 24-bit PNG to paletted 8-bit with a full alpha channel. This greatly reduces file sizes with only minor loss of quality. Such images are compatible with all browsers and even degrade well in IE6.

ImageAlpha can achieve conversion quality better than MacromediaAdobe Fireworks by employing latest pngquant, pngnq-s9.

Even images that need more than 256 colours can be made more compressible using special alpha-channel-aware posterizer.

JPEGmini (gui, Mac): http://www.jpegmini.com(commercial)

JPEGmini is a patent-pending photo recompression technology, which significantly reduces the size of photographs without affecting their perceptual quality. The technology works in the domain of baseline JPEG, resulting in files that are fully compatible with any browser, photo software or device that support the standard JPEG format.

JPEGmini is capable of reducing the file size of standard JPEG photos by up to 80% (5X), while the resulting photos are visually identical to the original photos. The JPEGmini algorithm imitates the perceptual qualities of the human visual system, ensuring that each photo is compressed to the maximum extent possible by removing redundancies, without creating any visual artefacts in the process. This enables fully automatic, maximal compression of photos with no human intervention required.

Ceasium (gui, Windows): https://saerasoft.com/caesium

A simple yet effective interface with a real-time preview and multiple image processing at the same time. (https://github.com/Lymphatus/caesium-image-compressor — Mac version soon)

RIOT (gui, Windows): http://luci.criosweb.ro/riot/

A free image optimizer that will let you to visually adjust compression parameters while keeping minimum filesize.

PNGGauntlet (gui, Windows): https://pnggauntlet.com

Combines PNGOUT, OptiPNG, and DeflOpt to create the smallest PNGs.

Trimage (gui, Linux): https://trimage.org

Trimage is a cross-platform GUI and command-line interface to optimize image files for websites, using optipng, pngcrush, advpng and jpegoptim, depending on the file type (currently, PNG and JPG files are supported).

For Mac & Windows (command line):

Pngquant
PNGOUT
AdvPNG
Pngcrush
eOptiPNG
JpegOptim
jpegrescan
Jpegtran
Gifsicle
Posterizer
Pngnq-s9
Zopfli
Guetzli

pngquant: http://pngquant.org

pngquant is a command-line utility for converting 24/32-bit PNG images to paletted (8-bit) PNGs.

The conversion reduces file sizes significantly (often as much as 70%) and preserves full alpha transparency. Generated images are compatible with all modern web browsers, and have a better fallback in IE6 than 24-bit PNGs.

This can offer an impressive reduction for some type of PNG’s, the ones with a minimal colour palette. One rule if the amount of colours is maxing 256 colours convert it to 8-bit

PNGOUT: http://www.advsys.net/ken/util/pngout.htm

PNGOUT is a tool which can optimize PNG files created by other programs. It can be run from the Windows Run dialogue box or at the command prompt. PNGOUT can produce even smaller files than pngcrush -brute or optipng -o7, however, since PNGOUT does not automate trials, you will have to find the right options yourself.

AdvPNG: http://advancemame.sourceforge.net/doc-advpng.html

The main purpose of this utility is to recompress png files to get the smallest possible size. Please note that this utility is not able to read a generic file. It’s granted to be able to read only the files generated by the AdvanceMAME emulator.

To compress the files this utility uses the following strategies:

Remove all ancillary chunks. Concatenate all the IDAT chunks. Use the 7zip Deflate implementation.

Pngcrush: http://pmt.sourceforge.net/pngcrush/

Pngcrush is an optimizer for PNG (Portable Network Graphics) files. It can be run from a command line in an MS-DOS window, or from a UNIX or Linux command line.

Its main purpose is to reduce the size of the PNG IDAT datastream by trying various compression levels and PNG filter methods. It also can be used to remove unwanted ancillary chunks or to add certain chunks including gAMA, tRNS, iCCP, and textual chunks.

OptiPNG: http://optipng.sourceforge.net

OptiPNG is a PNG optimizer that recompresses image files to a smaller size, without losing any information. This program also converts external formats (BMP, GIF, PNM and TIFF) to optimized PNG, and performs PNG integrity checks and corrections.

Jpegoptim: http://www.kokkonen.net/tjko/projects.html

Jpegoptim — utility to optimize jpeg files. Provides lossless optimization (based on optimizing the Huffman tables) and lossy optimization based on setting maximum quality factor.

Gifsicle: http://www.lcdf.org/gifsicle

Gifsicle is a command-line tool for creating, editing, and getting information about GIF images and animations. Making a GIF animation with gifsicle is easy:

JPEGrescan: https://github.com/kud/jpegrescan

JPEGrescan is a Perl script that uses jpeg tools to optimize jpeg compression by micro-managing some of the compression math based on research into some of the most common parameters.

jpegtran: https://github.com/kud/jpegrescan

jpegtran is a utility for lossless transcoding between different JPEG formats.

Posterizer: https://github.com/kornelski/mediancut-posterizer

Median Cut PNG Posterizer reduces the number of distinct colour/alpha intensities in the image. Unlike typical posterization, which distributes levels evenly, this one tries to pick levels intelligently using variance-based Median Cut and Voronoi iteration.

The goal of this tool is to make RGB/RGBA PNG images more compressible, assuming that lower number of unique byte values increases the chance of finding repetition and improves the efficiency of Huffman coding

pngnq-s9: http://sourceforge.net/projects/pngnqs9

pngnq-s9 is a modified version of pngnq, the neural network colour quantizer for png images.

Like pngnq, pngnq-s9 takes a full 32-bit RGBA png image, selects a palette of up to 256 colours, and then redraws the image in 8-bit indexed mode. The resulting image can be up to 70% smaller than the original.

pngnq-s9 adds several new options to pngnq including the ability to augment a user-supplied palette, the ability to quantize in the YUV colour space, and the ability to give more or less weight to specific colour components when quantizing. The program also includes a few bug fixes relative to the most recent version of pngnq.

You are able to find gui applications for these command line tools for either Mac or Windows

Zopfli: https://github.com/google/zopfli

Zopfli is an encoder implementation of DEFLATE, a compression method commonly used in PNG format (among many other usages, e.g. ZIP, etc), designed to produce the likely smallest compressed output. Since it is a lossless transformation, a PNG file that is recompressed with Zopfli still retains all the pixels as expected. (usage: https://ariya.io/2016/06/using-zopfli-to-optimize-png-images)

Guetzli: https://github.com/google/guetzli

Guetzli is a JPEG encoder that aims for excellent compression density at the high visual quality. Guetzli-generated images are typically 20–30% smaller than images of equivalent quality generated by libjpeg. Guetzli generates only sequential (non-progressive) JPEGs due to faster decompression speeds they offer.

Convert image formats

NConvert (gui): http://www.xnview.com/en/nconvert.html

A batch utility to convert graphics files! Support of more than 400 graphics formats!

ImageMagick (command line): http://www.imagemagick.org/script/index.php

ImageMagick® is a software suite to create, edit, compose, or convert bitmap images. It can read and write images in a variety of formats (over 100) including DPX, EXR, GIF, JPEG, JPEG-2000, PDF, PhotoCD, PNG, Postscript, SVG, and TIFF. Use ImageMagick to resize, flip, mirror, rotate, distort, shear and transform images, adjust image colours, apply various special effects, or draw text, lines, polygons, ellipses and Bézier curves.

The functionality of ImageMagick is typically utilized from the command line or you can use the features from programs written in your favourite language. Choose from these interfaces: G2F (Ada), MagickCore ©, MagickWand ©, ChMagick (Ch), ImageMagickObject (COM+), Magick++ (C++), JMagick (Java), L-Magick (Lisp), NMagick (Neko/haXe), MagickNet (.NET), PascalMagick (Pascal), PerlMagick (Perl), MagickWand for PHP (PHP), IMagick (PHP), PythonMagick (Python), RMagick (Ruby), or TclMagick (Tcl/T.K.). With a language interface, use ImageMagick to modify or create images dynamically and automagically.

ImageMagick is free software delivered as a ready-to-run binary distribution or as source code that you may freely use, copy, modify, and distribute in both open and proprietary applications. It is distributed under the Apache 2.0 license, approved by the OSI and recommended for use by the OSSCC.

ImageMagick is basically an incredible tool for converting images, extracting backgrounds or applying all kinds of effects and transformations like adding watermarks or draw lines or text on images.

Base64 encode images

Base64 encoding basically converts the binary into ASCII text encoding

For Mac (command-line):

OpenSSL

OpenSSL (command line): http://www.openssl.org

You could use the OpenSSL command to generate a base64 image:

openssl base64 -in pathToImage

in CSS a base64 image looks like this

#someIdOrClass {
    background-image: url(data:image/
    png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAA
    oLQ9TAAAAGFBMVEX72JUifsDf193vjwDkgGf90ADUKwD8/PwLUeC/
    AAAAVElEQVR42lXMQRLAIAhD0UiU3P/GtUI69u94wwTqZp4ES7RA
    EQUt0Bf+MEYYxijQBVUmyXuDa9eAdaJH4XNDNGSHqbcG0jDpEUPu
    aiPPSKSD/FLpAQfIBa59qc7QAAAAAElFTkSuQmCC);
    background-repeat:no-repeat;
}

The above code displays a small duck icon

Overview of formats for web use

PNG

PNG offers great quality and both index and alpha transparency but comes with a cost, it’s large for photographs, in other words, images with lots of details and colours.

PNG is a bitmapped image format that employs lossless data compression. PNG was created to improve upon and replace GIF (Graphics Interchange Format) as an image-file format not requiring a patent license.

PNG supports palette-based images (with palettes of 24-bit RGB or 32-bit RGBA colours), grayscale images (with or without alpha channel), and full-colour non-palette-based RGB[A] images (with or without alpha channel). PNG was designed for transferring images on the Internet, not for professional-quality print graphics, and therefore does not support non-RGB colour spaces such as CMYK

PNG should be used for images requiring transparency and for images which contain less detail and colours.

24/32 bit and 8 bit. The first one offers alpha transparency a better sort of transparency that offers better blending in with backgrounds and offers a higher amount of supported colours. The latter has maximum 256 colours and offers index-transparency and also alpha transparency a fact not known by many.

Index transparency is good for images that are clearly distinct from the background with no blending in, like logos with a clear border and edge. This offers a smaller size compared to alpha transparency but can not always be used.
Alpha transparency is good for images that need to blend in offering more of a sort of gradient if you like.

You should always try to see if you can use Median Cut PNG Posterizer as it offers a significant reduction in size (not lossless !), next if the images have less than 256 colours go reduce to 8-bit and reduce to the number of colours that still offer a good result.

GIF

Should be avoided as it’s a patent licensed format, it’s old offers no real advantage over PNG and has only 8-bit index alpha. Still in use though and popularised again because of its ability to make short animated ‘video’-clips that were supported cross-platform.

JPEG

The JPEG compression algorithm is at its best on photographs and paintings of realistic scenes with smooth variations of tone and colour. For web usage, where the amount of data used for an image is important, JPEG is very popular. JPEG/Exif is also the most common format saved by digital cameras.

On the other hand, JPEG may not be as well suited for line drawings and other textual or iconic graphics, where the sharp contrasts between adjacent pixels can cause noticeable artefacts. Such images may be better saved in a lossless graphics format such as TIFF, GIF, PNG, or a raw image format. The JPEG standard actually includes a lossless coding mode, but that mode is not supported in most products

The compression method is usually lossy, meaning that some original image information is lost and cannot be restored, possibly affecting image quality. There is an optional lossless mode defined in the JPEG standard; however, this mode is not widely supported in products.

WebP

WebP is a new image format that provides lossless and lossy compression for images on the web. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25–34% smaller in size compared to JPEG images at equivalent SSIM index. WebP supports lossless transparency (also known as alpha channel) with just 22% additional bytes. Transparency is also supported with lossy compression and typically provides 3x smaller file sizes compared to PNG when lossy compression is acceptable for the red/green/blue colour channels.

Downside not supported by all browsers

SVG

SVG is an XML-based vector image format for two-dimensional graphics that has support for interactivity and animation.

Vector format great for crystal sharp images that need to look good on any resolution. Basically, a vector stores the mathematical shape of an object instead of an individual pixel position this allows it to scale better.

As it’s XML a format with lots of repeated fragments of text it can be well compressed with GZIP to a .svgz file