Glen Charles posted ...

Scaling Images for the web

Login to start new topic
Help topics

Scaling Images for the web

Category: General Discussion

Posted: 03-25-13 5:17 AM - Views: 1256

By: Glen Charles

Back to post list

0

Share this topic with your colleagues

Start of discussion

Discussion on methods of scaling images without introducing artifacts.
Note: the LI site compresses your image 1:5. To get a high quality picture you must start out with an image that has not been compressed more than 1:3

The beginning of the discussion is at the bottom of this thread, so scroll down to follow the entire thread.
Back

Replies ...

Reply Nr.14 from Glen Charles on 11-9-13 9:48 AM

The discussion on scaling landscapes:
The professional way to make a good color landscapes for the web requires these steps:

1. Start with an uncompressed image if you can (TIFF or RAW). Convert it to TIFF 8 bit uncompressed.
Display the TIFF in your editor on a calibrated monitor. Make sure the color profile described in the file EXIF data is correct (usually sRGB, but could be Adobe 1998, or Ektaspace - some programs default to some other space and the colors will not display correctly.)

2. Adjust the color, crop, locally burn and dodge, locally sharpen luminance and locally blur until the picture looks the way you imagined the scene, or the way you wished it had looked.

3. Scale the picture for the web browser using the following method.

A. If there is a lot of fine detail in the original picture such as leaves, ripples in water, flowers, small branches, fine wires (boats), fine hair, macro shots of mechanisms, etc. you must put the image through a low pass filter that will blur any object that is smaller than 2x2 pixels. This is needed because this fine detail will not be seen in the smaller resized picture for the site, yet this fine detail will mess up the scaling.

If you look at http://www.leicaimages.com/showphoto.php?photoid=38617

this picture shows the result of leaving the fine detail in the original picture. When compared to the original and to the middle properly scaled picture, the right frame looks as if the tree has lost some leaves and the leaves are more yellow than red. And if you look at the picture for a while you will begin to notice this:
The branches are more prominent in the right picture, and seem to take over the picture. This is because bi-cubic scaling over-emphasises edges. The overall impression is that the tree is more straggely, whereas the original seems to be full of color and fat with leaves.
There are white spots where there should be golden colored leaves, because highlights on the leaves have been over-emphasised in the scale down. This happens because if a leaf is ,say, four pixels in size, and if one of the pixels is a highlight; in the scale down three pixels have to be converted to 1 pixel and the normal scaling routines bias the 1 pixel towards the highlight. So instead of getting a golden colored pixel, you see a white pixel. These white pixels are a distraction and appear as noise. If you scan over the picture you will begin to see leaves that appear much brighter on the rightframe compared with the left frame. The part of the brain that creates color responds with a message to the sub-conscious that these leaves are white because they are not living - so you dislike the tree (at least that is how I respond to these errors.)

So to prevent this error from ocurring, you must filter out these details before scaling.

You can use a gaussian blur to reduce the details. You will have to experiment with the amount as each software uses a different numbering system to describe the amount of the blurring. On one of my programs it is "2" on another "30%." You can use noise reduction to do the blurring. I sometimes use the built in Mac filters and select a noise reduction level of 10, and no sharpening. That’s what I did with the middle frame of this picture.
When you blur the picture adjacent pixels merge. This gets rid of the problem of a 1 pixel highlight on a 4 pixel leaf.

Still in TIFF file format, scale the image by a factor of 2 or 4 or 8, but not any intermediate number because some programs have a tough time with intermediate scaling. If you scale by 4, then 4 pixels in the original become 1 pixel, which is an easy task. And as I said, If one of the original 4 pixels is a bright pixel, or a dark pixel and the others are neutral tones, sometimes the software gives too much importance to the light or dark pixel and you get a bright spot on the screen where a colored leaf was. This is why we blur the image before scaling, to blend in those light and dark pixels.
To scale the image select the best algorithm for the subject. I seldom use bi-cubic which is the default for many Adobe programs. Adobe also has variations on the bi-cubic. I prefer Lanczos 3 for my scaling. It is slower to do the scaling because it is doing so many calculations.

The results with Lanczos 3 are always better. The middle frame is was rescaled using Lanczos3. There are several programs that offer scaling routines in addition to bi-cubic. Bi-cubic scaled pictures always look blurry compared with Lanczos 3.

After the scaling you will need to do some edge sharpening on the luminance layer (or use unsharp mask if you prefer which is the way most programs do edge sharpening by default.)
You can select the luminance layer and sharpen it.

Now you have to do the conversion to JPEG for the web. Always choose maximum quality (above 90%) and if you have a choice of color conversion select 4.4.4, or 4.2.2 not 4.2.0. After the conversion to JPEG you need to convert the image to sRGB if it was something else.
You must CONVERT the file to sRGB, not APPLY sRGB to the file, or ASSIGN sRGB to the file.

Now, if the image is destined only to be seen in a web browser, you should choose to embed the color profile in to the image, and you must delete the EXIF color profile identification (when you check the EXIF data or the Extended EXIF data there must be no "sRGB" listed as the color profile. This should be blank. This is required because Safari and IE and Chrome Browsers, do not read the sRGB from the EXIF file, whereas Firefox does read it. Firefox displays a different tone (usually more red) than the other browsers, unless you embed the color profile into the actual image.

I use Graphic Converter to embed the color profile and remove the EXIF data from the file. When I select Save for Web, there is the option to do this. You will have to check how your software does this action.

Now compare your picture with the original full size image and look for a good color match. Zoom in 300% to make sure there are no artifacts or banding in the neutral areas.

BANDING: Banding is also posterization where there is a sudden jump in the brightness of a color - this is easily seen in skies. You will see lines in the sky and if you zoom in you will see that there are definite steps in the blue, sometimes across the entire width of the sky as the lightness of the sky changes with altitude. Banding is caused by JPEG compression being too severe. When you save to JPEG you must always save at more than 90% quality. Also choose color encoding on save to JPEG at 4.4.4, not 4.2.0.

Ron Bigelow has an interesting article on how he repairs a picture with banding in it by adding noise to the picture.

http://ronbigelow.com/articles/posterization/posterization.htm

When you compare pictures, it's no use setting the images to the same size. Each must be at 100% because the viewing program has its own way of scaling images to fit the screen. Some programs give you control over this, and you can stop the program from aliasing the scaled image. (more on this if any questions.)

Here for this demo, I had to zoom out for the left frame (which is at 12.5% zoom) and since Graphic Converter has a good zooming algorithm the colors stayed the same as full size.

If the pictures look the same, you have done a good job.

If you miss any of these steps you not show the capabilities of your camera and lens. Worst of all you may be turning people away from your work because of one or two poor quality pictures.
Reply Nr.13 from Glen Charles on 04-6-13 12:17 AM

Updated with information on banding artifacts (in skies mostly.)
Reply Nr.11 from Glen Charles on 03-26-13 11:50 PM

Herman:
The question of unsharp pictures on the LI site.

Often - in my case anyway - the original picture is not sharp due to focussing errors, inadequate depth of field, and camera motion. The 50mm lens at f5.6 on a full frame camera has a DOF of only 4 feet at a 10 ft distance to the subject, and only 1.5 ft at a distance of 6 feet. I often see pictures labelled as being taken at f2 on a 35mm lens which provides a DOF of only 1 foot, so much of the scene will be OOF. If the foreground is closer than 5 ft, in this case, it will be OOF, and blurred in the picture. When the foreground contains important detail and is OOF, the entire picture will seem fuzzy.

Secondly it isn't possible to eliminate camera motion altogether at exposure times longer than 1/500 sec. Yes, I know you can make handheld exposure down to 1/30 - I do it all the time - but the pictures are not sharp. A lot of shots here are longer than 1/100 sec so they can't be sharp.

The camera may be set for low sharpness, or the picture taken at high ISO.
Unsharpness results from scaling the image an uneven fraction of the original in order to be under 1500 pixels wide. For example from 4000 pixels to 1200 pixels = 30% rather than 25% scaling.
Another factor is the compression algorithm chosen for the scaling, and the JPEG "quality" setting. Default setting for JPEG compression is 50% but should be set to 100% for the highest quality.
Color conversion from YUV to RGB is by default 4.2.0 for JPEG, but 4.4.4 should be chosen on every save to protect colors.
ISO settings affect the dynamic range and so affect shadow detail. DR drops 1 EV for every doubling of the ISO from the natural ISO of the camera, Often it is necessary to shoot ISO 1600 to stop subject motion under natural light, but quality suffers. Under studio lighting t is better - even 3200 ISO can produce a good picture if the contrast range (CR) of the subject is very low (4 stops.) But I have seen high ISO shots of subjects with huge CR, - tone and detail in the shadows suffer.

A good picture results if all of these factors - which are the nuts and bolts of "photography" -are carefully controlled.
Reply Nr.10 from Glen Charles on 03-26-13 5:13 PM

REVISED APRIL 12
Herman:
You are very kind to ask me a question about photography.
You are very talented, and a good photographer, so perhaps there isn't much I can show you. I love your Begging Dog, and Raining is Singapore, and a whole lot more.
For the sake of others who may also join this discussion, let's talk a bit about the images here on the site, without being critical of the design of the picture or of the subject, only about the technical aspects of the shot.
Let's deal with the second question.

You said that some of the pictures posted here "become less sharp."
I have found that the process of posting of the picture on Leicaimages affects the sharpness. The site compresses images 1:5. If you post a heavily compressed image it will be treated badly by the LI software. I have posted an example on todays page (April 12)

The browser window will limit the picture to something less than the actual pixels, and the browser interpolation will soften the picture.
For example: the picture of the Diving equipment:
http://www.leicaimages.com/showphoto.php?photoid=28239
was actually 2048 pixels wide when posted but is downsized to 1500 pixels wide by the LI server.
This display I am using today (at a friends house) is 1600 pixels wide (LG LED monitor) and the browser shows the picture in a 1500 pixel wide window. There is a loss of sharpness compared to the original, but it is only slight.

Another picture of a beach:
http://www.leicaimages.com/showphoto.php?photoid=24167
is 1150 pixels wide and so within the limit, and no interpolation is needed. It looks sharp in my browser.

In order to keep M9 pictures within the limit of LI, they must be scaled from 5212 x 3472 to 1303 x 868 for best scaling interpolation (4 x linear reduction.) I actually use an old Mac application that can scale intermediate values quite well. It does a lot of calculations. It is called Live Picture 2.6 and runs in classic mode on Mac PPC computers running OSX 10.4.11 only. But most of the time I use Graphic Converter for scaling as it has Lanczos 3 as one of its scaling algoritms. I use Nikon NX2 for a lot of work, but it doesn't scale nearly as well as GKON. I occasionally use CS in Lab mode, and PS various flavors so I can use some old filters that are no longer available.

Most of the unsharpness on this site is due to the photographer. And a lot to do with how he compresses the image. More on this next post.
Reply Nr.8 from Glen Charles on 03-25-13 7:13 AM

The JPEG file format was never intended to be used for photographic adjustments. The standard file format for professional work is the universally recognized TIFF format.
JPEG was a quick and dirty way to scale images so that they could be passed over the internet. JPEG creates image artifacts and reduces the number of tones in the image (it doesn't have to do this but this is how it has been implemented on many cameras.)

[In the old days the internet was too slow for TIFF files, and most mail programs and no browser could handle the large TIFF files. Of course, JPEG was no use for magazines, and other high resolution uses such as medical pictures, moon pictures, surveillance etc. So Kodak and others created an uncompressed image format that could be sent over the internet a screenful at a time - that was less than 1 MB at a time. They pulled additional data from the servers as the image was scrolled.
The internet is so fast today that TIFF images can be sent quickly.]

Not only do professionals use TIFF format, many print houses, museums, image archives, and high quality magazines demand TIFF formatted images (or RAW if accompanied by a print.)

RAW is not a universally recognized format. It is a file format created by camera manufacturers to get you to buy more of their own products. The RAW file has to be converted to TIFF in order to view it. The resulting image depends on which software you use to do the conversion. Adobe has agreements with the most common camera manufacturers which allows them to include the conversion algorithms in PS. But many cameras have a proprietary scheme for their image data (Fuji, Sony, Foveon,) and Adobe cannot create the same image from the RAW data as the manufacturers themselves.

This is why museums demand a print from the photographer along with the RAW data, because they wouldn't necessarily be using the original software 20 years from now, and they have to know what the photographer intended for the data.
The TIFF format has been accepted for many years and will continue to be used into the future as the standard for the industry.

DNG format is just a way for Adobe to lock you into their software upgrades. It's not better than TIFF. There is a more embedded data in a DNG file that is related to Adobe (such as the revision number.) And DNG format has matured over the years, whereas TIFF has stayed the same.

Convert to TIFF at the first opportunity; file away the original JPEG and don't touch it; do all edits in TIFF (8bit is fine); convert to JPEG in the final step only. Archive the original JPEG, the full size TIFF file with adjustments; and the final scaled down JPEG file.
Reply Nr.7 from Glen Charles on 03-25-13 6:46 AM

Now you have to do the conversion to JPEG for the web. Always choose maximum quality (above 90%) and if you have a choice of color conversion select 4.4.4, or 4.2.2 not 4.2.0, The file will be bigger. You need to be under 2MB for leicaimages site. After the conversion to JPEG you need to convert the image to sRGB from whatever you had selected for your working space (Adobe 1998, Ektaspace etc.)
You must CONVERT the file to sRGB, not APPLY sRGB to the file, or ASSIGN sRGB to the file.

Now, if the image is destined only to be seen in a web browser, you should choose to embed the color profile in to the image, and you must delete the EXIF color profile identification (when you check the EXIF data or the Extended EXIF data there must be no "sRGB" listed as the color profile. This should be blank. This is required because Safari and IE and Chrome Browsers, do not read the sRGB from the EXIF file, whereas Firefox does read it. Firefox displays a different tone (usually more red) than the other browsers, unless you embed the color profile into the actual image.

I use Graphic Converter to embed the color profile and remove the EXIF data from the file. When I select Save for Web, there is the option to do this. You will have to check how your software does this action.

Now compare your picture with the original color adjusted original image and zoom in 300% to make sure there are no artifacts or banding in the neutral areas.

BANDING: Banding is also posterization where there is a sudden jump in the brightness of a color - this is easily seen in skies. You will see lines in the sky and if you zoom in you will see that there are definite steps in the blue, sometimes across the entire width of the sky as the lightness of the sky changes with altitude. Banding is caused by JPEG compression being too severe. When you save to JPEG you must always save at more than 90% quality. Also choose color encoding on save to JPEG at 4.4.4, not 4.2.0.

Ron Bigelow has an interesting article on how he repairs a picture with banding in it by adding noise to the picture.

http://ronbigelow.com/articles/posterization/posterization.htm

When you compare pictures, it's no use setting the images to the same size. Each must be at 100% because the viewing program has its own way of scaling images to fit the screen. Some programs give you control over this, and you can stop the program from aliasing the scaled image. (more on this if any questions.)

If the pictures look the same, you have done a good job.

If you miss any of these steps, then you will not be doing credit to your vision. Nor will you be showing off the capabilities of your camera and lens. Worst of all you may be turning people away from your work because of one or two poor quality pictures.
Reply Nr.6 from Glen Charles on 03-25-13 6:34 AM

To scale the image select the best algorithm for the subject. I seldom use bi-cubic which is the default for many Adobe programs. Adobe also has variations on the bi-cubic. I prefer Lanczos 3 for my scaling. It is slower to do the scaling because it is doing so many calculations, and in the beginning of photo editing it was so slow no-one would use it and so we got the bi-cubic method which was quick and acceptable for screen display and print quality in the old days. That's when we were using 640 x 480 monitors with big pixels. Today we have 4 MP monitors with 300 pixels per inch. Bi-cubic doesn't look so good any more. But the software people are still offering it.

The results with Lanczos 3 are always better.

After the scaling you will need to do some edge sharpening (not unsharp mask) on the luminance layer which is the way most programs do edge sharpening by default. Or you can select the luminance layer and sharpen it. You might then port the image over to another application that can enhance various aspects of the picture (Snapseed, NIK effects, NX2.) for special effects (Drama, foggy etc.)
Reply Nr.5 from Glen Charles on 03-25-13 6:28 AM

Still in TIFF file format, scale the image by a factor of 2 or 4 or 8, but not any intermediate number because some programs have a tough time with intermediate scaling. If you scale by 4, then 4 pixels in the original become 1 pixel, and the program only has to average out the 4 pixels to make 1 new pixel (it's actually a little more complicated than this,) which is an easy task. If one of the original 4 pixels is a bright pixel, or a dark pixel and the others are neutral tones, sometimes the software gives too much importance to the light or dark pixel and you get a bright spot on the screen where a colored leaf was. This is why we blur the image before scaling, to blend in those light and dark pixels.
Reply Nr.4 from Glen Charles on 03-25-13 6:21 AM

The professional way to make a good web image requires these steps:
Start with an uncompressed image. Convert it to TIFF uncompressed.
Display the TIFF in your editor on a calibrated monitor.

Adjust the colors, crop, locally burn and dodge, locally sharpen (not using unsharp masking) and locally blur until the picture looks the way you imagined the scene, or the way you wished it had looked.
Scale the picture to fit the final display using this method.

If there is a lot of fine detail in the original picture such as leaves, ripples in water, flowers, small branches, fine wires (boats), fine hair, macro shots of mechanisms, etc. you must put the image through a low pass filter that will blur any object that is smaller than 2x2 pixels. You can use a gaussian blur and you will have to experiment with the amount as each software uses a different numbering system to describe the amount of the blurring. On one of my programs it is "2" on another "30%." If you miss this step your JPEG image will be full of 1 pixel black and white dots wherever there was fine detail in the original You can see examples of this happening on this web site.
Then ...
Reply Nr.3 from Glen Charles on 03-25-13 6:08 AM

No matter which algorithm you select for compression, the image will not be at its best unless you do some pre processing of the image in your editor before compression. Most people don't know about this. I will talk about blurring the image before scaling later in this thread.


And after compression (but before final conversion to the JPEG format for the site) you will have to sharpen the image, because the scaling usually makes the image look a little soft - some algorithms are better than others at keeping the details sharp.

Most web sites require JPEG images, but several browsers can display PNG and TIFF images. To make things a little more complicated, some browsers are not color aware and so will convert any image that is not sRGB embedded, to sRGB so destroying your carefully adjusted picture which had a different color proflile attached to the header of the image.
Reply Nr.2 from Glen Charles on 03-25-13 5:43 AM

Most cameras do not offer the option of capturing an uncompressed image. The professional Nikon cameras (TIFF), Leica M cameras (DNG uncompressed), and several of the older cameras (TIFF) do. Other cameras offer a RAW format which is unique to each manufacturer and is a compressed format enclosed in a TIFF file - it is usually compressed 2:1. These file formats contain all the data from the original capture. This is the best we can do with production cameras. By the time we convert to JPEG for the web the original data has been mashed so much that it is only by a miracle that our brain can reconstruct the original scene.
Some images on this site have suffered mightily from the compression algorithms chosen to make the image fit the screen. There are some twenty different compression schemes available today. Some photo editing applications let you choose from those twenty, some limit you to the proprietary algorithms of the software manufacturer, some are not offered because of licensing restrictions.
Reply Nr.1 from Glen Charles on 03-25-13 5:27 AM

When you start with a 12 - 16 MP original (or even 24 MP) and want to present the picture in a browser application, you have to throw away 90% of the original data collected by the sensor. The method you select to do this can result in a picture full of compression artifacts and poor tones, or it can faithfully retain the character of the original capture. On this site are examples of both.
I have carried out hundreds of experiments with thousands of images from many digital cameras. I think I have figured it out, and I'd like to discuss it with you'all.

Waeshael in Charleston, SC
Please login to post or reply

Advertise your company and services on LeicaImages.
Send us an email to support@leicaimages.com

LeicaImages is 100% free to you.
Even a one time donation or subscription can really go a long way in helping to run the site.

Thanks for your support !