Goodbye JPEG - hello WEBP?

Google is introducing a new open-source image format: "WebP" (pronounced ‘weppy’).

Google claims that images in the WebP image format will be close to 40 percent smaller than JPEG files while providing for images that are of higher quality by virtually eliminating the image artifacts associated with JPEG compression. At the present moment, WebP is still in a very early stage of development and hence, unlike the JPEG file format, WebP is not yet built into cameras, web browsers, image-editing programs, etc.

JPEG vs WebP compression at 100%From left to right: Original image, JPEG compressed, WebP compressed.JPEG vs WebP compression enlargedFrom left to right: Original image, JPEG compressed, WebP compressed.
WebP uses the Y'UV color model that is used in the NTSC, PAL, and SECAM composite color video standards. It is a bit like the LAB mode color model that is used in PhotoShop, and other imaging applications, in that the Y component, like the "L" channel, determines the lightness of the color (referred to as luminance or luma), while the U and V components, like the "a" and "b" channels, determine the color itself (the chroma).The Y'UV color model - From left to right: Original composite image, "Y" component, "U" component, "V" component.
For image compression, WebP uses the VP8 video codec - the same methodology that is used to compress keyframes in videos. This codec uses predictive coding to encode an image by using the values in neighboring blocks of pixels to predict the values in a block, and then encodes only the difference (residual) between the actual values and the prediction. The residuals typically contain many zero values, which can be compressed much more effectively.

So far, while it is still a "lossy" compression technology, WebP compressed images certainly appear to deliver a higher level of compression (and thus smaller file size), and much higher image quality than the current standard JPEG image compression method. This is a good thing, not only for images for web application, but possibly for print application as well.

Google Chrome will likely be the first consumer application to support "weppy" compression in order to provide a faster user experience on web sites while reducing bandwidth and hosting costs.

On the other hand

Since the Y'UV color model is similar in principal to the Lab color model...why not apply the same compression methodology to an image that's in Lab mode? I've done some testing with high JPEG compression of the "a" and "b" channels of a Lab image and easily achieve file sizes that are only 20% of the original file size with no apparent image degradation. In fact they look very similar to the results obtained with the WebP image format.
Left image WebP - right image Lab compressed using very high JPEG compression for the "a" and "b" channels of an Lab image.
Left image WebP - right image Lab compressed using very high JPEG compression for the "a" and "b" channels of an Lab image.
If the Y'UV compression method could be applied to Lab images then the graphic arts industry could continue to use a color model that is well understood and in use today rather than import a new color model from another industry.

JPEG images for print production - the facts

Saving an image file in the JPEG format is a commonly used method of "lossy" compression for digital photographic images. The degree of compression can be adjusted, allowing for a user selectable tradeoff between storage size and image quality. The greater the image compression the smaller the resulting image file and the greater the loss of image quality.

By default, images are JPEG compressed when saved as a PDF file.

How JPEG compression works

JPEG compression works by chunking similar image pixels that have slightly different color values into groups of pixels with the same color value.
The above original image file size is 1.5 MB.
The same image file saved at highest compression/lowest quality is only 92 KB. (Note: this level of extreme image compression would never be used in production work.)
Subtracting the pixels of the original image from the JPEG image reveals where pixels are different. Note that large areas of no detail like the sky have been chunked into large pixel groupings while areas of fine detail have been chunked into smaller pixel groupings.
The resolution of the original image impacts the effect of JPEG image compression

On the left is the original high resolution image. On the right is the JPEG version. Note that the JPEG artifacts are barely visible.
On the left is an original medium resolution image. On the right is the JPEG version. Note that the JPEG artifacts have become visible.
On the left is an original low resolution image. On the right is the JPEG version. Note that the JPEG artifacts are now very visible.

Bottom line - high resolution images can tolerate a greater degree of compression than low resolution images.

Resaving images, even edited images, in JPEG format does NOT reduce quality further

The original image saved at highest compression/least quality to exaggerate the effects of JPEG compression.
The same image resaved 15 times at the highest compression/least quality. The image was altered before each save to force recompression.
Subtracting the pixels of the original image from the 15th version of the resaved JPEG image reveals where pixels are different. Note that only the areas where the image was altered are different despite being resaved 15 times with high compression/low quality. All other pixels are the same.

Resaving images that have been cropped DOES reduce quality further

On the left is the original image saved with high compression/low quality. On the right is the same image that has been cropped and resaved with the same high compression/low quality setting. Cropping the image causes the chunking of pixels during compression to be redone and introduces artifacts.
Subtracting the pixels of the original image from the cropped version of the resaved JPEG image reveals where pixels are different.

Bottom line - multiple resaves of images with JPEG compression has no effect on pixels (image detail) that have not been edited. Pixels that have been edited will be "chunked" to the same degree as the pixels in the original image. In other words, images do not degrade after multiple resaves using JPEG compression.

The most common level of compression used does NOT result in any visible image degradation.

Click images to enlarge
Original image at left - high quality/low compression on right (Photoshop level 12)
Original image at left - high quality/low compression on right (Photoshop level 10 - the most common level of JPEG compression)
Original image at left - medium quality/medium compression on right (Photoshop level 8)
Original image at left - medium quality/high compression on right. (Photoshop level 6)
Subtle image degradation is becoming visible.
Original image at left - low quality/high compression on right. (Photoshop level 4)
Image degradation is becoming visible.
Original image at left - very low quality/very high compression on right. (Photoshop level 2)
Image degradation is clearly visible.
Original image at left - extremely low quality/extremely high compression on right. (Photoshop level 0)
Image degradation is obvious
Bottom line - at typical JPEG compression levels there is no visible degradation of the original image. In fact, one has to go to unusual levels of compression before artifacts are seen (at least level 8 in Adobe Photoshop).
Images with lots of small detail compress less and mask JPEG artifacts better than images with large smooth tone areas.

Double bottom line - there is no reason to be concerned about saving images in JPEG format so long as the highest quality/least amount of compression option is selected.

Special blog production note.

Unless otherwise stated, all "Original" images were low resolution images. JPEG compression was "0" (lowest quality/highest compression). It was the only way to exaggerate the difference enough to demonstrate the issues. If I had used the actual original images - 14 megapixels in this case - the differences would mostly have been invisible. Note that the Blogger website compresses the images that I upload so there will be compression artifacts in the posted "Original" images that were not in the images that I uploaded.

I strongly encourage you to repeat any of these tests yourself with your own images to confirm, or contradict, my findings.

I'm not suggesting that you use JPEG as your preferred image file type. My intent is only to show how saving an image in the JPEG file format introduces, or does not introduce, artifacts and hopefully shed a light on some commonly held beliefs about this image file format.

Fixing art for the web so that it can be used for print

One of challenges that face printers is dealing with substandard – for print application – art supplied by their customers. Sometimes, art that has been prepared for the web ends up in layouts intended for the press. Often, the graphics contain defects like jpeg compression artifacts or pixel noise in flat color areas. On the left is a supplied graphic at 100% and to it's right a small area enlarged to show the problem artifacts more clearly.
[Click on the image to open a larger version in a new window]The tool to get rid of the image artifacts while preserving the graphic detail is the "Smart Blur" filter in Adobe Photoshop. Below is its dialog box. You will need to experiment with the settings according to the specific image that you are working with. In general the "Radius" setting will be lower than the "Threshold" setting. The preview window shows the effect of changes you make to those settings. Sometimes, if the adjustments result in degrading the image, it's better to leave some artifacts and remove them afterwords using the clone or other tools. Always use the "High Quality" setting with "Mode: Normal."The final result – the artifacts in the graphic are cleared away while the detail of the text and art is preserved.
[Click on the image to open a larger version in a new window]