Advanced Image Optimization Tricks

http://sixrevisions.com/web-development/advanced-image-optimization/

by jggube • 13 years ago

68 20 13 years ago

brissmyr• 13 years ago

"Selective JPEG Compression" was a new one for me.

For PNG, always run your images through ImageOptim (http://imageoptim.com) before committing your work.

And for large PNGs, ImageAlpha (http://pngmini.com) lets you reduce bit depth, keep transparency and maintain a decent image quality.

markdown• 13 years ago

For PNG, always run your images through ImageOptim

Why only PNG?

samsolomon• 13 years ago

Anecdotally, I find the best image compression using ImageOptim for PNGs and JPEGmini for JPGs. However, ImageOptim can also compress JPGs.

xsmasher• 13 years ago

I'm not the OP, but I've had trouble with the JPEGOptim feature of ImageOptim. It created JPEG files that crashed the JPEG decoder on some older android phones.

The files worked fine elsewhere, so I think it was an decoder bug not an invalid file, but I had to avoid optimizing JPEG files to avoid the problem.

This was about two years ago, so I don't recall version numbers or phone models.

xfs2• 13 years ago

Gaussian Blur JPEG Optimization

Blurring reduces noise/entropy so that JPEG compresses better. You can use a bilateral filter (Photoshop: Surface Blur; GIMP: Selective Gaussian Blur) for larger amount of smoothing while preserving edges.

Image Posterization

This is actually called image quantization. pngquant[1] and pngnq[2] are two specialized open-source tools for automatically selecting the best palettes to represent the image with least perceptual error.

Selective JPEG Compression

JPEGmini[3] automatically selects areas of interest with custom perceptual metrics and preserves quality within those areas while optimizing out other areas. I tested the sample image in the article: JPEGmini obtained 6.7% decrease in size without manually selecting the mask.

[1] http://pngquant.org/

[2] http://pngnq.sourceforge.net/

[3] http://www.jpegmini.com/main/shrink_photo https://news.ycombinator.com/item?id=2940505

jbri• 13 years ago

Given that these techniques seem to be well-known, it would be interesting to see a JPEG compressor which uses what we know of human vision to minimize filesize while keeping the image visually the same.

JPEGmini seems to go partway with selective compression, but it seems like there's room to improve the actual compression algorithm to do things like gaussian smoothing instead of just truncating the high-frequency components to reduce filesize.

jacobolus• 13 years ago

Well the whole point of a compression scheme like JPEG is to use what we know about human vision to minimize file size while not visually changing anything.

But JPEG is a pretty crude algorithm designed mainly to be computationally cheap [to match the capabilities of computer hardware in 1992 when it was created]. Trying to make better encoders within the limits of what JPEG decoders can handle is quite limiting, and yields only marginal improvements.

It’s possible to do much better if we’re willing to accept more CPU time spent in encoding/decoding using fancier algorithms. Unfortunately it’s really hard to get traction for anything else, because the whole world already has JPEG decoders built into everything. For instance JPEG 2000, designed to be a general purpose replacement with many improvements over JPEG, is now 13 years old but used only in niche applications, such as archiving very high resolution images.

But for use cases where you control the full stack, better compression is quite viable. Video game engines for instance devote considerable attention to image compression formats.

xfs2• 13 years ago

uses what we know of human vision to minimize filesize while keeping the image visually the same.

This is what JPEGmini is doing, perceptual compression metric.

gaussian smoothing instead of just truncating the high-frequency components

Gaussian smoothing does remove high-frequency components.

leeoniya• 13 years ago

also RgbQuant :)

demo: http://o-0.me/RgbQuant/

repo: https://github.com/leeoniya/RgbQuant.js

xenator• 13 years ago

I've read this 10 years ago.

sandGorgon• 13 years ago

here's an older related HN post on a similar topic https://news.ycombinator.com/item?id=4623160.

I again wish there was an Imagemagick/Graphicsmagick script to do this.

pornel3• 13 years ago

Photoshop posterizes evenly and doesn't touch alpha channel.

It's possible to pick posterization levels more fitting the image:

http://pngmini.com/lossypng.html#posterization (https://github.com/pornel/mediancut-posterizer)

lyndonh• 13 years ago

OK, interesting article and some quite effective tricks but this is not "optimization". Optimization means getting the best possible result from something, by some criterion. For example, blurring an image and then getting a bit better compression is not optimal. But if it could be shown that was getting the best possible compression for JPEG then it would be optimal.

The article should be called "Image Compression Tricks". I don't think any of the techniques are considered advanced in today's technology.

therobot24• 13 years ago

advanced...really?

rebel• 13 years ago

The example images they use are the ideal use cases for each of these techniques. The rocks photo has no hard edges. Wood texture by nature is similar to what posterization does. These tricks won't help in many cases. Although if you do happen to have something that fits the criteria, these should be quite useful.

Advanced Image Optimization Tricks

Related Stories