Photoshop JPEG quality 51 trick

Photoshop Save for Web Optimize settings

I’ve been using this trick for years but it seems it’s never really been blogged about. When saving JPEG files using the “Save for Web” feature (“Save for web & devices” in CS3), the quality slider exhibits some strange behavior. Increasing the quality setting by a single percent usually adds only a little extra file size (about half a kB for the test file I used). Going from 50 to 51 with the same file added a full 10 kB. There’s also quite a difference in image quality between 50 and 51. In fact I feel 51 looks pretty good and is the optimal setting for most web projects. Anything above that is a waste of bandwidth, except perhaps for photography portfolios and such.

So the slider appears to have a little ‘speed bump’ in the middle. Anything up to and including 50 will definitely get you visible artifacts and mediocre image quality at best, anything above 50 looks OK, with 51 being an ideal trade-off between file size and quality. It is definitely true that tweaking these settings for each individual output file will get you the best possible results, but for batches, droplets and brainless image saving, JPEG 51 works better than any other setting.

(Thanks to Anko Elzes for discovering this and telling me about it)

Roy | July 12, 2007 | English,Software,Web design | Comments (7)

7 Comments

  1. Heeej, still designing for bandwidth? :-)
    Wel een goeie vondst; the jpeg quality tipping point…

    Hoe’st nou?

    Comment by Roy Scholten — July 25, 2007 @ 8:25 am

  2. Maybe you should study the JPEG compression procedures and report to us what the mathematical reason for this kind of behaviour is…

    Lot’s of information in this article: http://en.wikipedia.org/wiki/JPEG ;-)

    Comment by Sint — July 26, 2007 @ 9:28 pm

  3. huh for all my life I used a brainless 80, only on sundays 65. But it seems like I’m now gonna switch to 51. :-) kudos roy!!

    Comment by Max — October 25, 2008 @ 10:57 am

  4. The reason for this is that at 50% and below, Photoshop uses 4:2:0 color subsampling for the saved image. This means that it reduces the color channels (as opposed to the luminance channel) to half the resolution, both horizontally and vertically. At 51% and above, Photoshop saves all channels at full resolution.

    When using “Save As” instead of “Save for web”, it uses a scale of 0 to 12 instead, where ’7′ is the equivalent of 51%. At 6 and below, Photoshop uses 4:2:0 color subsampling.

    More information can be found here:
    http://en.wikipedia.org/wiki/Chroma_subsampling

    In particular, compare the top image below, before applying color subsampling, with the bottom, which has 4:2:0 subsampling. This image was chosen for its contrasting colors.
    http://en.wikipedia.org/wiki/File:420-original444.png
    http://en.wikipedia.org/wiki/File:420-progressive-still.png

    Color subsampling is also used in compressed video (ie, MPEG like on DVDs and digital TV).

    Comment by Thomas Rutter — January 2, 2009 @ 1:28 pm

  5. thank you very nice

    Comment by hospital — March 19, 2009 @ 4:44 pm

  6. Thanks for this!
    It can work the other way too – I find that for my images, the bump in filesize from 50 – 51% comes with no visible advantage, so I use 50%.

    Comment by Orion — June 2, 2011 @ 8:56 pm

  7. The JPEG version of Area 51….! Spooky. Thanks for the tip Roy, Please keep up the good work.

    Comment by Easy Ways To — June 17, 2012 @ 12:22 pm