Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Optimizing JPG images – Part 1

Saturday, February 1st, 2014 by Servage

Optimizing JPEGs

JPEG optimization is slightly more straightforward than GIF. The general strategies for reducing the file size of JPEGs are:

• Be aggressive with compression

• Use Weighted (Selective) Optimization if available

• Choose Optimized if available

• Soften the image (Blur/Smoothing)

This section explains each approach, again using Photoshop’s and Fireworks’ optimization tools. Notice that there is no color table for JPEGs because they do not use palettes. Before we get to specific settings, let’s take a look at what JPEG compression is good at. This will provide some perspective for later techniques in this section.

Getting to know JPEG compression

The JPEG compression scheme loves images with subtle gradations, few details, and no hard edges. One way you can keep JPEGs small is to start with the kind of image it likes.

Avoid detail

JPEGs compress areas of smooth, blended colors more efficiently than areas with high contrast and sharp detail. In fact, the blurrier your image, the smaller the resulting JPEG. The example shows two similar graphics with blended colors. You can see that the image with contrast and detail is more than four times larger at the same compression/quality setting.


Avoid flat colors

It’s useful to know that totally flat colors don’t fare well in JPEG format, because the colors tend to shift and get mottled as a result of the compression, particularly at higher rates of compression. In general, flat graphical images should be saved as GIFs because the image quality will be better and the file size smaller.


Be aggressive with compression

The primary tool for optimizing JPEGs is the Quality setting. The Quality setting allows you to set the rate of compression; lower quality means higher compression and smaller files. The below example shows the results of different quality (compression) rates as applied in Photoshop and Fireworks.

Notice that the image holds up reasonably well, even at very low quality settings. Notice also that the same settings in each program produce different results. This is because the quality rating scale is not objective—it varies from program to program. For example, 1% in Photoshop is similar to 30% in Fireworks and other programs. Furthermore, different images can withstand different amounts of compression. It is best to go by the way the image looks rather than a specific number setting.

Photoshop Editing


Fireworks Editing


Unpredictable Color in JPEGs

In GIF images, you have total control over the colors that appear in the image, making it easy to match RGB colors in adjoining GIFs or in an inline GIF and a background image or color.

Unfortunately, flat colors shift around and get somewhat blotchy with JPEG compression, so there is no way to control the colors precisely. Even pure white can get distorted in a JPEG. This means there is no guaranteed way to create a perfect, seamless match between a JPEG and another color, whether in a GIF, PNG, another JPEG, or even an RGB background color. If you need a seamless match between the foreground and background image, consider switching formats to GIF or PNG to take advantage of transparency and let the background show through.

Optimizing JPG images - Part 1, 3.0 out of 5 based on 2 ratings
Categories: Tips & Tricks

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.