Clever JPEG Optimization Techniques

Advertisement

When people talk about image optimization, they consider only the limited parameters offered by popular image editors, like the “Quality” slider, the number of colors in the palette, dithering and so on. Also, a few utilities, such as OptiPNG1 and jpegtran2, manage to squeeze extra bytes out of image files. All of these are pretty well-known tools that provide Web developers and designers with straightforward techniques of image optimization.

In this article, we’ll show you a different approach to image optimization, based on how image data is stored in different formats. Let’s start with the JPEG format and a simple technique called the eight-pixel grid.

Eight-Pixel Grid

As you already know, a JPEG image consists of a series of 8×8 pixel blocks, which can be especially visible if you set the JPEG “Quality” parameter too low. How does this help us with image optimization? Consider the following example:


32×32 pixels, Quality: 10 (in Photoshop), 396 bytes.

Both white squares are the same size: 8×8 pixels. Although the Quality is set low, the lower-right corner looks fuzzy (as you might expect) and the upper-left corner looks nice and clean. How did that happen? To answer this, we need to look at this image under a grid:

As you can see, the upper-left square is aligned into an eight-pixel grid, which ensures that the square looks sharp.

When saved, the image is divided into blocks of 8×8 pixels, and each block is optimized independently. Because the lower-right square does not match the grid cell, the optimizer looks for color indexes averaged between black and white (in JPEG, each 8×8 block is encoded as a sine wave). This explains the fuzz. Many advanced utilities for JPEG optimization have this feature, which is called selective optimization and results in co-efficients of different quality in different image regions and more saved bytes.

This technique is especially useful for saving rectangular objects. Let’s see how it works with a more practical image:


13.51 KB.


12.65 KB.

In the first example, the microwave oven is randomly positioned. Before saving the second file, we align the image with the eight-pixel grid. Quality settings are the same for both: 55. Let’s take a closer look (the red lines mark the grid):

As you can see, we’ve saved 1 KB of image data simply by positioning the image correctly. Also, we made the image a little “cleaner,” too.

Color Optimization

This technique is rather complicated and works only for certain kinds of images. But we’ll go over it anyway, if only to learn the theory.

First, we need to know which color model is being used for the JPEG format. Most image formats are in the RGB color model, but JPEG can also be in YCbCr, which is widely used for television.

YCbCr is similar to the HSV model in the sense that YCbCr and HSV both separate lightness for which human visual system is very sensitive from chroma (HSV should be familiar to most designers). It has three components: hue, saturation and value. The most important one for our purposes here is value, also known as lightness (optimizers tend to compress color channels but keep the value as high as possible because the human is most sensitive to it). Photoshop has a Lab color mode, which helps us better prepare the image for compression using the JPEG optimizer.

Let’s stick with the microwave oven as our example. There is a fine net over the door, which is a perfect sample for our color optimization. After a simple compression, at a Quality of 55, the file weighs 64.39 KB.

3
990×405 pixels, Quality: 55 (in Photoshop), 64.39 KB.
Larger version.4

Open the larger version of the image in Photoshop, and turn on Lab Color mode: Image >> Mode >> Lab Color.

Lab mode is almost, but not quite, the same as HSV and YCbCr. The lightness channel contains information about the image’s lightness. The A channel shows how much red or green there is. And the B channel handles blue and yellow. Despite these differences, this mode allows us to get rid of redundant color information.

Switch to the Channels palette and look at the A and B channels. We can clearly see the texture of the net, and there seems to be three blocks of differing intensities of lightness.

We are going to be making some color changes, so keeping an original copy open in a separate window will probably help. Our goal is to smooth the grainy texture in these sections in both color channels. This will give the optimizer much simpler data to work with. You may be wondering why we are optimizing this particular area of the image (the oven door window). Simple: this area is made up of alternating black and orange pixels. Black is zero lightness, and this information is stored in the lightness channel. So, if we make this area completely orange in the color channels, we won’t lose anything because the lightness channel will determine which pixels should be dark, and the difference between fully black and dark orange will not be noticeable on such a texture.

Switch to the A channel, select each block separately and apply a Median filter (Filter >> Noise >> Median). The radius should be as small as possible (i.e. until the texture disappears) so as not to distort the glare too much. Aim for 4 in the first block, 2 in the second and 4 in the third. At this point, the door will look like this:

5
Larger version.6

The saturation is low, so we’ll need to fix this. To see all color changes instantly, duplicate the currently active window: Window >> Arrange >> New Window. In the new window, click on the Lab channel to see the image. As a result, your working space should look like this:


The original is on the right, the duplicate on the left and the workplace at the bottom.

Select all three blocks in the A channel in the workplace, and call up the Levels window (Ctrl+L or Image >> Adjustments >> Levels). Move the middle slider to the left so that the color of the oven’s inside in the duplicate copy matches that of the original (I got a value of 1.08 for the middle slider). Do the same with the B channel and see how it looks:

7
990×405 pixels, Quality: 55 (in Photoshop), 59.29 KB
Large version8

As you can see, we removed 5 KB from the image (it was 64.39 KB). Although the description of this technique looks big and scary, it only takes about a minute to perform: switch to the Lab color model, select different regions of color channels and use the Median filter on them, then do some saturation correction. As mentioned, this technique is more useful for the theory behind it, but I use it to fine-tune large advertising images that have to look clean and sharp.

Common JPEG Optimization Tips

We’ll finish here by offering some useful optimization tips.

Every time you select the image compression quality, be deliberate in your choice of the program you use for optimization. JPEG standards are strict: they only determine how an image is transformed when reduced file size. But the developer decides what exactly the optimizer does.

For example, some marketers promote their software as offering the best optimization, allowing you to save files at a small size with high Quality settings, while portraying Photoshop as making files twice as heavy. Do not get taken in. Each program has its own Quality scale, and various values determine additional optimization algorithms.

The only criterion by which to compare optimization performance is the quality to size ratio. If you save an image with a 55 to 60 Quality in Photoshop, it will look like and have the same size as files made with other software at, say, 80 Quality.

Never save images at 100 quality. This is not the highest possible quality, but rather only a mathematical optimization limit. You will end up with an unreasonably heavy file. Saving an image with a Quality of 95 is more than enough to prevent loss.

Keep in mind that when you set the Quality to under 50 in Photoshop, it runs an additional optimization algorithm called color down-sampling, which averages out the color in the neighboring eight-pixel blocks:


48×48 pixels, Quality: 50 (in Photoshop), 530 bytes.


48×48 pixels, Quality: 51 (in Photoshop), 484 bytes.

So, if the image has small, high-contrast details in the image, setting the Quality to at least 51 in Photoshop is better.

(al)

Footnotes

  1. 1 http://optipng.sourceforge.net/
  2. 2 http://sylvana.net/jpegcrop/jpegtran/
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/images/jpg-optimization-techniques/co-original.jpg
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/images/jpg-optimization-techniques/co-original.png
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/images/jpg-optimization-techniques/channel-a-blured.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/images/jpg-optimization-techniques/channel-a-blured.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/images/jpg-optimization-techniques/optimized.jpg
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/images/jpg-optimization-techniques/optimized.jpg

↑ Back to top Tweet itShare on Facebook

Sergey Chikuyonok is a Russian front-end web-developer and writer with a big passion on optimization: from images and JavaScript effects to working process and time-savings on coding.

Advertising
  1. 1

    Woot! First comment! Nice post…very interesting – thanks.

    -3
  2. 2

    Anyway, JPG is not for design. PNG FTW!

    -5
  3. 3

    Very interesting… However a little hardcore manipulation and treatment to apply to a whole lot of jpegs…

    Anyway thanks for the tip !

    -2
  4. 4

    Floris Fiedeldij Dop

    July 1, 2009 2:31 pm

    sh has just proven the next article should be gif vs jpg vs png and their usages in modern web design explained in a case study :)

    3
  5. 5

    Interesting article. Thanks, SM!

    2
  6. 6

    Wow, this was very interesting. I’m not saying I’ll go in to these depths when optimizing, but really nice read. Thank you!

    2
  7. 7

    waste of time. this much work for a few bytes. with the way speed is increasing, a few bytes in a jpeg are no big deal.

    -7
  8. 8

    I agree with Steve, those tiny bits should not make a difference in modern webdesign… I would like to read a more general article about this subject, focussed on the differences with jpg, png, etcetera and the best way to use the different image types. This is probadly too much in depth for me…

    -9
  9. 9

    Individual mentality… 100 bytes per image per person per site amounts to millions of bytes per day that end up clogging the pipes.

    4
  10. 10

    With bandwidth and storage getting cheaper and cheaper, this is kind of a useless guide. Basically, save with whatever level looks ‘good’ and try both “Optimized” and “Progressive” to see which one is smaller. Aside from that, all that extra effort to save a few KB seems like a drastic waste of time.

    That said, it was interesting to learn exactly how JPG works. I never thought of it before.

    -8
  11. 11

    good to know….10x

    1
  12. 12

    Smashing Editorial

    July 1, 2009 2:40 pm

    @Floris (#4): nice point! We would like to welcome authors who could write a very solid, professional article “GIF vs. JPG vs. PNG” – please contact

    editor {]at[} smashingmagazine point com

    only if you have experience and you are sure that you can write a profound and useful article that would help the community. We pay well. Thank you.

    0
  13. 13

    Interesting techniques, look forward to the PNG follow up.

    These minor adjustments may not look like much but every bit helps when slimming down heavily trafficked images or sites, and a few kilobytes is easier to shave off of jpgs then it is on markup.

    0
  14. 14

    Michael Arnaldo

    July 1, 2009 3:01 pm

    Great stuff! This should help in my day to day work. The real optimization troubles i have, deal mostly with GIF and transparency’s.

    I just don’t know how to optimize the use of the format and end up using PNG-24

    0
  15. 15

    I have never commented before in this page.. But this post, this post deserves it. Amazing, thankyou.

    For the ones commenting about the bytes, its not only about lowering the size, its also about getting better quality.

    0
  16. 16

    Although reducing file size by a 100bytes is not going to make any noticable difference to download times, I enjoyed finding out more about how JPG compression actually works.

    A rundown of the best methods for optimising PNG-24 would be very welcome, since Photoshop doesn’t offer any tools for this.

    1
  17. 17

    Very Interesting techniques. They’re pretty complex, but I’ll have to try these out sometime.

    0
  18. 18

    Dial up is still quite common in regional areas and any saving is worth the effort! Good article.

    0
  19. 19

    Very helpful! thank much.

    0
  20. 20

    this is all very boring

    -1
  21. 21

    so…. wait a minute… all this to squeeze 1 KB out of an image?

    -1
  22. 22

    Very interesting. Although I doubt I’ll really ever need these techniques, it never hurts to learn something new. Thanks!

    0
  23. 23

    Great explanation of the theory behind jpg compression. And I did the LAB exercise, too. …don’t totally understand it, but it’s enough to stick in my craw, and make me finally delve into it a bit more. Gracias.

    0
  24. 24

    Shaving 10% off of loading time is a worthy goal for a heavily used production site. Like Samsung’s, for example. It all adds up. There is a reason Netflix has a $1MM bounty for “only” a 10% improvement in its movie-recommendation algorithm.

    Great article, fascinating, and an expert description of how JPEG compression works in certain particulars. Thank you!

    0
  25. 25

    As alwalys, very usefull, you’re great.

    0
  26. 26

    Good but too short – only 2 techniques. Then I doubt the first will actually work – “real life” images have lots of elements, so when you try to arrange A into grids, you fail it with B or C and vice-versa.

    I won’t see me spending time with these practices just to save 5KB. Nice tutorial as always though.

    0
  27. 27

    Chris McCorkle

    July 1, 2009 7:30 pm

    Sweet article. A good read. Thank you!

    0
  28. 28

    this is a very useful when it comes to designing web icons.. Great post! :)

    0
  29. 29

    Nice tutorial.

    Keep posting gud tutorials :)

    0
  30. 30

    Very easy to tell the professionals from the people who have only designed their own site.

    Are some of you serious?

    Only a few bytes?

    Not only will these few bytes make a HUGE difference on a graphics heavy page, but it will add up in the end with bandwidth.

    Go try and get a job working for a heavily trafficked site, or tell a client that wants to save money on bandwidth that it’s “just a few bytes”.

    That is a horrible way to think as well as terrible work ethic.

    As for image files, I use PNG and TGA files, mainly because of embedded alpha channels. GIF files have a very limited number of colors, and JPG degrades.

    Key word here is LOSSLESS. Google that shiz.

    1
  31. 31

    Armig Esfahani

    July 1, 2009 9:05 pm

    wow and i thought I knew all about JPEG optimization… I have a lot to learn from you guys.. thank you..

    0
  32. 32

    Got Samsung microwave too…

    0
  33. 33

    Very usefull, thanx for this article.

    0
  34. 34

    Intrstn artkl 2 falow-up….

    Nyc & 10x.

    Rgads,
    VRVIP

    -1
  35. 35

    Nice article – thanks! Takes me back to the “good old days” of trying to save every last byte on an image with my own compression algorithms. It also reminds me of one particular project where we used Fractal Image Encoding to compress photographic images down to incredibly small sizes which could then be “zoomed in on” beyond 100% and the decoding software would attempt to recreate detail without pixelation or distortion. It was extremely cool. We had to use a ridiculously expensive hardware card to do the encoding but the decoding could be done in software. This was around ’92/’93 and ours was the first commercial CDROM application to use Fractal Encoding – we were able to store a massive number of photos on a single CD, far more than would normally be allowed.

    0
  36. 36

    this is a smart post

    0
  37. 37

    This is a great article~ Great tutorial and tricks. x3

    0
  38. 38

    Nice post thanks.

    Which programs do you recommend for JPEG optimization.

    How do those softwares compare to the Photoshop when it comes to JPEG optimization

    0
  39. 39

    ‘as you already know…’ No I didn’t. Now I do. :)

    0
  40. 40

    This is a great article~ Great tutorial and tricks. x3

    0
  41. 41

    hi to art.lebedev studio ^)
    i use your PNG optimization techniques, tnx!

    0
  42. 42

    Great article, luv the simplicity and can’t wait for the follow up on .jpg vs .gif vs .png

    0
  43. 43

    Adobe (at the CS4 launch tour in Stockholm) has said that use Fireworks instead of Photoshop for JPEG optimization, it has a better engine when it comes to web size (ie not JPEGs that are huge and for print) images.

    0
  44. 44

    What about an article on Adobe(R) programs. Photoshop, Fireworks etc. Which once is best used on what application/image??

    0
  45. 45

    Wow… I didn’t know this about JPG. Great post!

    0
  46. 46

    Unlike many of the other articls on SM, it’s nice to see this one delving beneath the surface a little more.

    Some very interesting techniques, and ones that might prove useful in a situation where every bit counts.

    0
  47. 47

    Nice Post. ~ ~

    0
  48. 48

    Very nice post.

    OT: When I watch this page in Google Chrome the article ist incomplete and stops loading in the Color Optimization part. can anyone confim this?

    0
  49. 49

    @rogerpfaff
    Yeah I had the same result the page stops loading in the Color Opt. I reload the page and everything looks fine. Maybe its a bug or something. Anyway very nice article. Keep it up.

    0
  50. 50

    To those saying it isn’t worth it because you only save a few bytes:

    Do you only have 1 image on your page? Saving bytes on multiple images all adds up.. and if you’re viewing the site on a mobile device that doesn’t have super fast broadband; every little helps.

    0

↑ Back to top