Modern Image Compressors Kornel Lesiński Developer at FT Labs Breathing ne life into eb’s image format 2013-11-12

Other CSS HTML Flash Scripts Images HTTPrchive November 2013 987KB per page 63% of bandidth A picture is now worth 2950 words.

Loading... Compression makes image download 15 times faster.

Red, red, red, red, red, green, green, green, green, green. 5 red, 5 green. Lossless compression.

Crimson, amaranth, scarlet, monza, razzmatazz, malachite, emerald, mint, asparagus, fern. 5 red, 5 green. Lossy compression.

Photoshop 5.5 1999 Photoshop 14.1 2014 Photoshop’s palette-generation algorithms haven’t been improved in 15 years.

flickr.com/photos/ sazfar/10792618 15 years ago computers had Turbo buttons. Now a cheapest smartphone is 5 times faster.

2 red, 2 green, 2 red, 2 green, 2 red. Red, red, green, green, red, red, green, green, red, red. 2 (2 red, 2 green), 2 red. More CPU power allows finding more patterns in the data = better compression.

There are plenty of lossless image optimization tools for command line.

ImageOptim runs all these tools seamlessly for you.

pngquant

PNG 2 colours PNG 4 colours PNG 16 colours PNG 256 colours PNG 224 colours PNG 248 colours PNG 2 levels of grey PNG 4 levels of grey PNG 16 levels of grey PNG 256 levels of grey PNG 216 levels of grey PNG 2 colours ith transparency PNG 4 colours ith transparency PNG 16 colours ith transparency PNG 256 colours ith transparency PNG 224 colours ith on/off transparency PNG 224 colours ith semi-transparency mask PNG 248 colours ith on/off transparency PNG 248 colours ith semi-transparency mask PNG 2 levels of grey ith transparency PNG 4 levels of grey ith transparency PNG 16 levels of grey ith transparency PNG 256 levels of grey ith on/off transparency PNG 256 levels of grey semi-transparency mask PNG 216 levels of grey ith on/off transparency PNG 216 levels of grey semi-transparency mask PNG is not just a PNG. There’s plenty of variants.

2 4 16 256 65536 16777216 2^48 levels of grey colours opaque fully transparent or fully opaque semi- transparent PNG Most tools only support either big fat truecolor with alpha or small files, but with ugly transparency.

` 2 4 16 256 65536 16777216 2^48 levels of grey colours opaque fully transparent or fully opaque semi- transparent PNG pngquant uses the best combination that gives good compression and full alpha transparency.

255 255 244 117 128 131 155 160 148 34 31 29 255, 255, 244, 128, 117, 131, 160, 155, 148, 31, 34, 29 You get 3 bytes per pixel for RGB, 4 for RGB+transparency. 1 megapixel photo = 3 megabytes.

237, 40, 57, 10, 128, 22, 10, 128, 22, 237, 40, 57, 10, 128, 22, 237, 40, 57, 237, 40, 57, 10, 128, 22, 1, 2, 2, 1, 2, 1, 1, 2, 2nd = 10, 128, 22 1st = 237, 40, 57 Instead of writing each color component every time in full PNG can create a palette and then just refer to color number.

237, 40, 57, 255, 10, 128, 22, 255, 10, 128, 22, 255, 237, 40, 57, 255, 10, 128, 22, 255, 237, 40, 57, 255, 237, 40, 57, 255, 10, 128, 22, 255, 1, 2, 2, 1, 2, 1, 1, 2, 2nd = 10, 128, 22, 255 1st = 237, 40, 57, 255 Transparency can be put in the palette as well. That gives almost 75% file size savings — if the palette has 256 colors or less.

Choosing 256 colors out of thousands is much harder than it seems. It’s vector quantization, an NP-hard mathematical problem.

COLOR IMAGE QUANTIZATION FOR FRAME BUFFER DISPLAY Paul Heckbert Computer Graphics Lab New York Institute of Technology ABSTRACT Algorithms for adaptive, tapered quant- ization of color images are described. The research is motivated by the desire to display high-quality reproductions of color images with small frame buffers. It is demonstrated that many color images which would normally require a frame buffer having 15 bits per pixel can be qua ntized to 8 or fewer bits per pixel with little subjective degradation. In most cases, the resulting images look significantly better than those made with uniform quant- ization. The color image quantization task is broken into four phases: i) Sampling the original image for color statistics 2) Choosing a colormap based on the color statistics 3) Mapping original colors to their nearest neighbors in the colormap 4) Quantizing and redrawing the original image (with optional dither). Several algorithms for each of phases 2-4 are described, and images created by each given. CR CATEGORIES: II.3.3 (Information Stor- age and Retrieval): Information Search and Retrieval - clustering; search process; 1.3.3 (Computer Graphics): Picture/Image Generation - digitization and scanning; display algorithms; 1.4.1 (Image Process- ing) : Digitization - quantization. General Terms: Algorithms. Additional Key Words and Phrases: dither. Permission to copy without fee all or part of this material is granted provided that the copies are not made or distributed for direct commercial advantage, the ACM copyright notice and the title of the publication and its date appear, and notice is given that copying is by permission of the Association for Computing Machinery. To copy otherwise, or to republish, requires a fee and/or specific permission. 1982 ACM 0-89791-076-1/82/007/0297 $00.75 INTRODUCTION The power and versatility of frame buffers has created an increasing demand for them in industry, education, and the home. Most of these frame buffers are capable of displaying a static color image, yet many of them do not contain the amount of memory necessary to match the spatial and color resolution of the human eye. The eye is capable of distinguishing at least fifty thousand colors [15]. There- fore, it would take a frame buffer with at least ]5 bits per pixel to reproduce and display a color image with no noticeable contouring. On smaller frame buffers, contouring effects can become objectionable. One way to eliminate some of this quant- ization error is to employ the method of tapered quantization. The purpose of this paper is to explore techniques for color image quantization with the goal of high-quality image display on frame buffers. The Original Image Our input data are the red, green, and blue separations of a digitized color image. A typical form for the input image is a rectangular array of pixels each hav- ing 24 bits (8 bits per component). The color components are usually represented by numbers in the range [0,255]. If the original image is in this form, then strictly speaking it has already been quantized (when it was digitized from a video signal, for instance). We will assume that this initial quantization does not cause perceptible quantization errors. This will be the case if (a) the full gamut of RGB space is used, that is, if the digitization equipment is set up so that black is quantized to (r,g,b)=(0,0,0), white to (255,255,255), red to (255,0,0), etc. and (b) the 256 levels are approx- imately equally spaced perceptually. Given these conditions, we can regard the 24-bit original image as the "true" image. We will try to approximate it as closely as possible when we quantize. fig. 14:24 bit original image of "Surface" (the surface of the RGB color cube unrolled). fig. 15: popularity algorithm, 256 colors. fig. 16: median cut, 256 colors. fig. 17: median cut with dither, 256 colors. fig. 18: exploded view of 16 tapered quantization cells in the RGB cube. I’ve found the original paper describing algorithm used in pngquant, and worked on improving it.

The author's implementation on a VAX 11/780 can quantize a 512x486x24-bit image to 256 colours in under one minute. Machine sold for $250,000 needed almost a minute to generate image that’s 1/4th of iPhone’s screen size.

113093 times faster With ridiculously fast CPUs more advanced algorithms are much easier to implement and can work with much higher precision.

pngquant 2 Ta-da!

59KB 401KB 24+alpha vs pngquant2+ImageOptim. 85% reduction!

pngquant2 is lossy, but generally the loss is not very noticeable.

50KB of 59KB 50KB of 401KB but over 6x speed improvement is noticeable!

81KB Photoshop 256-color 59KB pngquant2 Photoshop’s Save for Web doesn’t support palette with alpha transparency, and still generates larger files!

• dobe Photoshop • GIMP • Pixelmator • ImageMagick • PHP GD • PIL … • pngquant2 • x128 quantizer • dobe Fireorks • pngnq Sadly, there are very few programs that can correctly generate PNG8.

pngquant.org pngquant is free and open-source. There’s command-line version to use on servers, there’s C library to use in programs and plug-ins.

pngmini.com tinypng.org and there’s a GUI for Mac, and a web service that works without needing any software installation.

1. 2. Mac pngmini.com imageoptim.com indos Linux pnggauntlet.com trimage.org tinypng.org Convert PNG to PNG8 first, then losslessly optimize PNG8 files further.

1. 2. pngquant --quality=70-99 input.png -o output.png don’t use pngquant 1.0 optipng or pngcrush or pngolf advpng or pngout or zopflipng Servers 3. You can do it automatically from scripts as well.

EOF titter: @pornelski slides: speakerdeck.com/pornel Don’t leave any images unoptimized and spread the word, so we can all enjoy faster websites!