1. Web Images

1. Lower resolution due to display screen limitations.
2. Image artifacts due to data compression, which is utilized to reduce the amount of data, in order to speed up page loading.

1.1 Lower resolution

A 3 MegaPixel digital camera can create a 2048x1536 pixel image with over 3 million pixels.  However, on the web, that image might be displayed at 512x384, with fewer than 200,000 pixels (only 6% of the original data), as shown here;

or even smaller at 256x192, with fewer than 50,000 pixels (only 1.5% of the original data), as shown here.

The previous images were created with a common automatic reduction technique, but without enhancement to visually compensate for the reduced resolution. Here, we show what such compensation can do.

This is the original 512x384 image, followed by an enhanced version for comparison.

Here, on the left is the original 256x192 image, and an enhanced version on the right.

Regardless of whether the images are enhanced or not, a lot of information was lost in creating these lower resolution images. We can look at what happens to the actual pixels by blowing up a small part of the original, and each of the non-enhanced reduced versions.  First, a blowup of the left center part of the original.

This is a blowup of the same part of the 512x384. Note the coarse pixelation.

And this is a blowup of the same part of the 256x192 version.

Although this pixelation is not noticable in the original displays, it becomes very noticable if we try to enlarge the image. We’ll revisit this later in Image Resizing.

1.2 Image Artifacts

In order to speed up page loading, the amount of image data is usually reduced through data compression techniques. This often results in further loss of information and the introduction of artifacts, which sometimes are quite noticable. Both images below are displayed at 256x192 resolution.  On the left is a high qualitiy JPEG version, with no noticable artifacts. On the right is a low quality JPEG version that would download 3 times as fast. Note the “ripple” artifacts in the sky between/around the palm trees.

2. Resizing Images

When any image is resized, the image quality is degraded by some amount. Whether this matters (or is even noticable) depends on the original image quality, the amount of resizing, and the intended use.

For example, although the right image above might be fine for its intended purpose, if we try to enlarge it by 2 times, to 512x384, we would simply enhance the artifacts and emphasize the lower resolution, as shown here.

On the other hand, if we work from the original image and reduce it along with enhancement, the result can be much better, as shown here.

Some web pages allow the browser to resize images. This should never be done if image quality matters. Here, the browser resizes the the high quality JPEG (left) to be slightly larger (right). Note the blocky result.

And here, the browser resizes the low quality JPEG (left) to be slightly larger (right), further emphasizing the compression artifacts.

Multiple resizings can rapidly degrade quality. For example, if you send an image from your web page (below left) to an assiciate to post on their web page, they will likely resize it for their needs, with less than ideal results (center). If you instead send them an already resized version from the original, the result can be much better (right).

The bottom line is: Resizing must be carefully thought through, and in web imaging, smaller is often better, if done judiciously and with enhancement tailored to the image.

3. Enhancing images

As demonstrated above, judicious resizing and processing can turn an “okay” web image into one that is more striking and engaging. Some additional examples are presented here.

For more examples, please visit sayasystems.com and select Imaging Solutions, then select Web Imaging or Image Processing.

This original image below was out of focus and under exposed.

The enhanced image is sharper with corrected exposure. It was reduced in size to provide the sharpest image while not emphasizing the flaws in the original.

This original image below was out of focus and under exposed.