Today I came across an article about jpg optimization. It sounds like something worth knowing .. better. Because I know something about it, but you can never know too much.
So, I’ve read the article, I’ve searched for others and I’ve read the Photoshop's Help.
After that I thought it will be a good idea to tell you about it.
First let’s see what’s a JPG image :
“Joint Photographic Experts Group ( the original name of the committee that wrote the standard ) format is commonly used to display photographs and other continuous-tone images in hypertext markup language documents over the World Wide Web and other online services. JPEG format supports CMYK, RGB, and Grayscale color modes, and does not support transparency. Unlike GIF format, JPEG retains all color information in an RGB image but compresses file size by selectively discarding data.”
Optimizing an image as a JPEG format relies on lossy compression, which selectively discards data, meaning that the decompressed image isn't quite the same as the one you started with.
When it comes to representing real-world scenes, no digital image format can retain all the information that impinges on your eyeball. By comparison with the real-world scene, JPEG loses far less information than GIF.
The real disadvantage of lossy compression is that if you repeatedly compress and decompress an image, you lose a little more quality each time. And so it’s a good idea to save the source file in its original format (for example, Photoshop .PSD) if you plan to edit the file further or create additional JPEG versions.
But enough with the theory, the internet is full of that ! :)
Let’s start with the main Photoshop’s dialog box for “Save for Web & Devices” which saves an optimized image for the Internet or mobile devices.
Open a photo and the go to File > Save for Web & Devices ( Ctrl+Alt+Shift+S )
This is what you’ll have if you’re using Photoshop CS5. The lower versions looks almost the same.
I usually use Optimized preview (see upper-left part of the dialog box). But you can use the 4-Up preview and Photoshop will let you choose from a variety of file formats and quality level.
Now let’s start describing the buttons.
I’ll start with the Quality, from the top right corner.
Quality determines the level of compression. The higher the Quality setting, the more detail the compression algorithm preserves. But the 100 quality is only a mathematical optimization limit. Using this limit you will end up with an unreasonably heavy file. Setting the Quality to 95-96 is more than enough to present loss, and you’ll notice that the dimension of the file will be reduced.
As you can see, we’ve saved 23 KB of image data and the quality of the image is the same.
Optimized : Creates an enhanced JPEG with a slightly smaller file size. The Optimized JPEG format is recommended for maximum file compression;
Progressive: Displays the image progressively in a web browser. The image appears as a series of overlays, enabling viewers to see a low-resolution version of the image before it downloads completely.
The Progressive option requires use of the Optimized JPEG format.
Blur: Specifies the amount of blur to apply to the image. This option applies an effect identical to that of the Gaussian Blur filter and allows the file to be compressed more, resulting in a smaller file size. A setting of 0.1 to 0.5 is recommended.
Embed Color Profile : Preserves color profiles in the optimized file. Some browsers use color profiles for color correction.
Matte: Specifies a fill color for pixels that were transparent in the original image.
Click the Matte color swatch to select a color in the color picker, or select an option from the Matte menu:
-- Eyedropper Color - to use the color in the eyedropper sample box
-- Foreground Color, Background Color, White, Black, or Other - to use the color picker.
If optimizing an image with an embedded color profile other than sRGB, you should convert the image’s colors to sRGB before you save the image for use on the web. This insures that the colors you see in the optimized image will look the same in different web browsers. The Convert to sRGB option is selected by default.
From the Metadata menu, choose what metadata to save with the optimized file.
-- None: - no metadata saved, except for the EXIF copyright notice in JPEG files. Produces the smallest file size.
-- Copyright: saves copyright notice, rights usage terms, copyright status, and copyright info URL.
-- Copyright and Contact Info: saves all copyright information, plus the following information: creator, creator job title, e-mail, address, city, websites, etc.
-- All Except Camera Info: saves all metadata, except EXIF data about camera settings such as shutter speed, date and time, focal length, exposure compensation, metering pattern, and flash use.
-- All: saves all metadata in the file.
At the bottom right of the dialog box is the section called Image Size. If you know the dimension you want the image to be, enter the width or height.
If you don’t now what size you want your picture to be and you just want the file size smaller you can enter a percent reduction.
For the quality from this section this is what I know :
Nearest Neighbor is the most basic, and it's very fast: to create a new pixel, Photoshop simply looks at the pixel next to it and copies its value. Unfortunately, the results are usually lousy unless the image is made of colored lines or shapes.
Changing the width and choosing nearest neighbor for quality will have this effect for the image :
Bilinear is slightly more complex and produces somewhat better quality: the program sets the color or gray value of each pixel according to the pixels surrounding it.
Bicubic tells Photoshop to figure out the colors of new pixels by averaging the colors of the pixels directly above and below the new one and the two pixels so to its left and right.
Bicubic Smoother is similar to bicubic in the way it’s creates new pixels, but this method blurs pixels slightly to blend the new ones into the old ones, making the image smoother and more natural looking. This method is recommended for enlarging images.
Bicubic Sharper is also similar to Bicubic, but it’s softens only the pixel’s edges. This method is recommended for downsizing images.
And .. that's it ! I hope you've learned something new today !