How to solve colour banding in resized images?

[syd]

<p>G'day all</p>

<p>I have just scanned some transparency film on a Nikon V at the max res 4000 and have noticed that at the full image viewing size this particular image is fine, however. The image contains a large section of tightly stacked stairs under artificial light ... when viewed at 100% it is fine but when I reduce the size or resize down ... there is severe geometric arch shaped banding that covers all the stairs and it makes the image look 'Shagadelic baby'.</p>

<p>So ... how do I resize the image down for web viewing and avoid this geometric banding to preserve the normal view? At first I thought it might have been the scanner ... but it isn't.</p>

<p>Thanks, Simon.</p>

[syd]

<p>P.S I have noted that when I apply lots of Gaussian Blur the banding goes away, but then one is left with a soft set of steps.</p>

<p>Simon.</p>

[Matt Laur]

<p>Do a search on "moire pattern" problems. That's what you're seeing.</p>

[patricklavoie]

<p>depend of the % you are seeing this image.. at 25% - 50% -100% could chance that you wont see this.. if you still see it when you post the image onto your web page, there's not much thing to do honestly without causing other problem to your image.. as you already experienced.</p>

[syd]

<p>I am not seeing the Moire pattern at 100% but when reduced to 1-7 size which is essentially web size, it is very strong indeed. There must be a way to fix this ... the patterns are nowhere to be seen on the original transparency. Is there something I can do at the scan stage to avoid this?</p>

<p>In the meantime I'll do a search on Moire' and see if anything jumps out.</p>

[patricklavoie]

<p>i will post it first and see.. dont take what you see in Photoshop for $.. since it have to recreate a preview for those smaller size, it is possible that what you see moire wise will not be like that on your web page.</p>

<p>post it here and see if it work!.. 700px wide max for your image when post to PN.</p>

[syd]

<p>I already posted it and my wife checked it on another monitor from her work place ... it is there and I have had other confirmation from outside my system as well. If I reduce the image size to 1-2 or 50% it is fine ... once I go below 50% the Moire patterns show up very bold.</p>

<p>I have now noticed that a similar candy pattern effect has shown up on the resize of a totally different image... this time on railings of a shopping center ... the railings start to go into what looks like small alternating colours like candy strips along the railing. When the image is at full size nothing ... but by 1-5 they show up. What gives?</p>

[tom_mann1]

<p>What software are you using when you see the stair-stepping? Some old free image viewers such as VuePro used nearest neighbor selection when they were displaying a image at a reduced size. That always resulted in horrible stairsteps and other problems.</p>

<p>Tom M.</p>

[syd]

<p>Hey Tom</p>

<p>Thanks for chiming in mate ... I am viewing the images in Paintshop Pro but the images have been uploaded to the web also and the Moire patterns are the same online ... so it can't be a viewing program issue. It has got something to do with the way the colour gamut is perhaps not dealing with being sized down? I am not an expert in this in any way but I can see that at 100% the images are fine but if I roll them down with my mouse the whacky Moire patterns appear in certain places. I am assuming that as the image gets sized down, the pixels are being compressed in a way that in certain circumstances creates this Moire effect?</p>

<p>I am now wondering if I need to scan at a lower res for the web and use only the highest res scans for printing ... if I scan at a lower res and size then these Moire patterns ought not to show up at all ... right?</p>

<p> </p>

[tom_mann1]

<p>Hi Simon - OK, so it's not the viewer. It was a long shot, but thought I'd mention the possibility.</p>

<p>I think the only way we're going to get to the bottom of this is by seeing some images (both b4 and after down sizing), and knowing each and every step those images went through between coming out of your scanner and posting on the web or whatever your final product is. In particular, we need to be looking at each place you either intentionally downsized the image, or where downsizing happened automatically, and was beyond your control. For example, did you upload a full size version to some website and their SW down rez'ed it for web display, or did you upload a correctly sized version for web use?</p>

<p>Cheers,</p>

<p>Tom M</p>

 

[syd]

<p>Hey Tom,</p>

<p>My steps were simply ... scan on Nikon V at 14bit @ max res 4000dpi ... saved as TIFF in Nikon View ... then imported into into Paintshop just for some basic experimentation. I then just resized within Paintshop from memory using % of original and then resized from 4000 to 300 in pixels from memory. I have PS CS5 also ... I may have resized for the web in there for one of the images.</p>

<p>I will crop an example of the pattern at web res and one at full to show the difference.</p>

[syd]

<p>Ok ... the first link is to the image is a crop of the stairs at 50% of full res ... no sign of Moire - http://i31.tinypic.com/z3bpg.jpg</p>

<p>The second image is the same image at Web res ... about 13% of full res from memory ... you will see the Moire Pattern. http://i29.tinypic.com/2hgwqjl.jpg</p>

<p>Never figured out how to get images to show in threads in this forum, sorry ...</p>

[syd]

<p>Well after some further research it seems that Moire is not uncommon and that it is a strobing effect caused at different zoom levels of digital images where geometric patterns within an image begin to somehow match the exact same patterns in the viewing platform ... monitors etc ... this can also be made worse or better depending on the size and res of the image. Apparently there are programs which tackle Moire patterns like Neat Image ... so I'm about to download a free trial version and give it a burl.</p>

[joe_c5]

<p>The reason that image looks so terrible is probably the filter used for resampling. Using any sinc or Lanczos filter will probably do much better than bicubic. Your example looks like it may even have been using nearest neighbor resampling.</p>

<p>Here is what I got from your 50% crop using a sinc filter. It may already have had some aliasing added that was not in the original scan, so going from 100% to final size in one step might be better still.</p><div></div>

[syd]

<p>Hey Joe,</p>

<p>Thanks for sharing this ... I still have not figured out how to fix the problem and yes I did use bicubic to size down ... there are always various options in the drop down and being new to the digital darkroom, I'm not always sure which is the best option for which situation? What is a sinc filter ... I have not seen it in my Paintshop menu, where do I find it?</p>

<p>Best, Simon.</p>

[joe_c5]

<p>Paintshop may only have bicubic as an option. I used GIMP for Lanczos and ImageMagick for sinc.</p>

<p>Sinc is the ideal sampling reconstruction filter, short for <em>sinus cardinalis</em> (cardinal sine). Lanczos is a windowed sinc function, meaning that it cuts off after a few pixels instead of going on forever. Resizing an image can use any of these filters or others, with some filters usually giving better results.</p>

[syd]

<p>Joe,</p>

<p>Thanks for the summary ... I have just bought Photoshop CS5 - does CS5 or PS have these resizing filters and algorithms inherent to the program or do I need to download them as a distinct external prog or plug in for PS? I don't know what GIMP is either though I assume it is a specific program?</p>

<p>Thanks for your advice and help here!</p>

[joe_c5]

<p>I don’t think CS5 has sinc or Lanczos built in, but I would expect a plug-in to support it.</p>

<p>GIMP is an image editor, yes. It isn’t as slick as Photoshop, but it is free.</p>

<p>I had forgotten about the gamma correction. Resizing in a gamma space tends to make images darker, so images should be converted to gamma 1.0, resized, and then back to gamma 2.2, probably all done in 16 bit to avoid quantization errors.</p>

<p>Here is what that looks like.</p>

[joe_c5]

<p>Attached a .png to the last message and it didn’t display inline, here’s a .jpg this time.</p><div></div>

[joe_c5]

<p>The .png looks better then the .jpg, so here it is after all.</p>

[syd]

<p>Joe,</p>

<p>On my monitor, your original version of the steps is better than the last two you have shown ... in the last two I can still see some faint Moire but in the first one posted it is pretty near perfect. What did you do with the first one? Can you help me with work flow for this also? I should do all my adjustments to the image in RAW and CS5 anf then when it gets to resizing use GIMP for the final resize yeah?</p>

[tom_mann1]

<p>Hi Simon -</p>

<p>Because of the presence of the strong repeating pattern of parallel lines, your image presents a serious challenge to any downsampling algorithm. If you have not delved into the subject of down-rez'ing, there is a large literature on the subject. For example, you may want to look at the following pages:<br>

http://www.xs4all.nl/~bvdwolf/main/foto/down_sample/down_sample.htm<br>

- especially the graphics just before the bottom of the page<br>

http://www.all-in-one.ee/~dersch/interpolator/interpolator.html<br>

- check out how nicely the sinc function works.</p>

<p>Unfortunately, the optimal algorithm to use depends on the image. Specifically, some algorithms sacrifice sharpness to suppress halos and ringing (which turn into Moire on repeating patterns), whereas, for other images the opposite tradeoff is a much better choice.</p>

<p>The fundamental reason your image is giving you so many problems is that the repeating pattern has strong high spatial frequency components. If you don't want to go outside your usual workflow, you can help matters tremendously by simply blurring the image somewhat before downsizing, and just use your usual algorithm (as long as it is not nearest neighbor ;-) ). Attached is an example where I applied a Gaussian blur of about r=3 to your image, then downsized using Photoshop's ordinary bicubic algorithm, then did a final resharpen using smart sharpen. Although it's better to do so, for the sake of speed of workflow, I did not transform to and then back from a gamma=1 space to down-rez. I stayed in the usual gamma=2.2 space for everything, although I did use 16 bpc. </p>

<p>This approach clearly is not as good as the sinc function, but is fast, gets rid of most of the Moire pattern and produces a reasonably sharp image, and, perhaps useful, allows you to stay with your usual software.</p>

<p>HTH,</p>

<p>Tom M.</p>

<p>PS - As I recall, XnView and Irfanview offer a choice of several sampling algorithms. The price is right for both of them. You may want to check them out as well.</p><div></div>

[syd]

<p>Joe & Tom,</p>

<p>A huge thank you to the both of you for all your advice and help in this. I have managed to improve the result dramatically by using GIMP as suggested by Joe earlier - I selected the Sinc size option from the menu - selected 17% for resize and 300dpi for resolution and saved from TIFF to Jpg. When I reopened the file in Paintshop Pro I would say that the Moire is about 95% absent from the scene and with a little Gaussian blur on it I should think this solved the problem and makes the image quite acceptable for web viewing.</p>

<p>I just then applied about .50 of Gaussian blur to the steps and this renders the scene about 99% clean from Moire ... but I am going to try and apply the Gaussian Blur again to the scene BEFORE down rez with Gimp and see if that is even better again. I am wondering is this will allow resharpening of the stairs in post, without a return of the Moire patterns.</p>

<p>Best, Simon</p>

[tom_mann1]

<p>Hi Simon - You are quite welcome. Yes, definitely apply any blurring b4, down rez'ing. Doing it afterwards just makes everything, well ... blurry. ;-)</p>

<p>Similarly, sharpening should be done afterwards, not before. </p>

<p>Gotta run.</p>

<p>Tom M</p>

<p> </p>

[syd]

<p>Ok ... well it seems that even after I tried using Gaussian blur before Sinc resizing, while the result was marginally better than the addition of GB after the resize as in my first attempt ... even with the Sinc resize method, the moment I added a standard amount of default sharpening in PS, the Moire pattern appeared again. Now ... I haven't played with more subtle sharpening yet but I'll do that now with unsharp mask and see how much I can get away with before the Moire pattern returns to the area of the stairs. So as long as Sinc is used and then some GB applied, the Moire seems to be kept at bay.</p>