Optimizing JPEGs (JPGs) - Get The Most Out Of Your Kilobytes

Friday, October 19th, 2007

Each day, I’d estimate that I make an average of 10 JPEGs (or JPGs, whatever you prefer). I figure that there are many people out there that do similar things. When it comes to web development and web design, I think it’s important to know how you can balance quality versus file size. This is especially important if you’re catering to a demographic with slower internet connections or impatient users.

As a general guideline, people prefer fast sites to slower ones. Obvious, no? If you’re thinking to yourself: “it’s only a difference of 10kb”, you’re right. But that 10kb starts to make a difference as your server load goes up and as your viewer’s internet connection speed goes down. Besides, if you’re doing this as your develop the website, you’re hardly losing any time.

What Are JPEG Artifacts?

Simply put, JPEG artifacts are the blurry, off-color pixels or blockiness that are the result of the JPEG image compression. The more you compress your image, the smaller the filesize becomes, unfortunately, the smaller the filesize, the more noticeable the compression becomes apparent.

Saving JPEGs in Photoshop

Photoshop has been the best image compressor in my experience. It’s worth noting that you don’t obtain the best file size by simply going to File -> Save As. but to Save for Web & Devices. You’ll get a lot more options there. The most important important is the quality slider.

Save For Web Devices

Manually Set The Quality - Go between various values and hand select your compression depending on the image
Avoid <60 and >90 - I’ve never encountered an image that needed to above a quality of 90 or an image that looked good below 60.

Using Masking To Apply Different Qualities To Different Areas of the JPEG

What’s not commonly known is that you can apply different image quality to different areas of a JPEG without much Photoshop knowledge. Let’s say we have the following image:

Original

We create a channel (it’s on a tab close to your layers) that consists of a general area around the area you want to have good quality (white = good quality, black = bad quality). Given our picture it should look something like this:

Outline

After that, go to Save for Web & Devices. After clicking the mask button (circled), you can select your mask and set an image quality range.

Save for web alpha channel

It may not seem like much, but for this specific image, the file size went from 29kb to 28kb. The filesize difference will depend on the image and image size, so don’t use my example as a guideline.

Optimize Your JPEGs on an LCD Monitor

Design for your lowest denominator. In this case, our lowest common denominator are those with crisp monitors. CRTs (or the big obsolete big anchors they call monitors) tend to not be as crisp and can make poorly compressed image look good. If you compress on an LCD, you’ll know the worse your JPEG will look.

That’s all for now, hope that helps.