Luminous Landscape Forum
Raw & Post Processing, Printing => Digital Image Processing => Topic started by: mbalensiefer on December 27, 2009, 10:43:18 pm
-
Hello!
I am resizing images for display on the Web.
What I am doing is putting up an image gallery that will browser-resize my images into something 480 pixels in height. There is javascript coding that takes in my full-sized (528 pixels, or 10% larger) images...and then downsizes to this-odd-pixel-number to display on one's Web browser.
I have noticed in my photoshopping work the "screen door" effect however; that artifacts and/or creates the pantyhose/screendoor effect when certain ratios of image height reduction are used.
Is there an OPTIMAL (or ill-advised) ratio of what-sized images I ought load to BEST display my images at 480 pix?
Thanks!
~Michael
-
If the quality of displaying in this gallery is important, then would not be the best way to create exactly as large versions of the images, as they will be displayed? And determining that size based on the "native" image sizes, so that an optimal resizing can be done? The sharpening should be done anyway depending on the presentation size.
-
I don't understand the question. What do you mean by "ratio of what sized images......."? As a general rule, most displays have resolution in the range of about 72 ~ 96 PPI. If the height is 480 pixels, select a relevant PPI within that range, divide that number into 480 and the result is the corresponding height in inches, but unless your software or method needs it, this is really quite irrelevant for web images where it is the linear pixel count and the resolution (PPI) which matter. Keeping both low is a good way to prevent your images from being hijacked, but they should not be much lower than screen resolution for good quality viewing.
-
this is really quite irrelevant for web images where it is the linear pixel count and the resolution (PPI) which matter. Keeping both low is a good way to prevent your images from being hijacked, but they should not be much lower than screen resolution for good quality viewing.
Mark, the resolution (PPI) of the image does not play any role in how an image is displayed on monitor.
-
You usually need to select that variable in resizing for web, and all I'm saying is that you don't want to select a resolution much greater than the display can show.
-
To clarify, let me give an example:
Image "A" is 1000 pixels in height, native.
Image "A" displays a screen door, rotated off center a simple 1.4 degrees.
This screen door won't look right when viewed on your monitor while shrunk down. It will display "harmonics."
This means that at a reduction in image size (height) for this image, the focus points of a cross-hatched screen door, when mated to its respective pixels as displayed on your monitor, will take on a warped effect. I don't think I need to describe this warped effect to photographers.
SIMILARLY, when some images of "x" height are reduced by "x" amount, they too look like khrap.
Why? well, two pixels can be reduced into one pixel and still look good if the beginning file was large enough...AND this is an "even" reduction in pixels.
But when 1 pixel is reduced in size to .7 pixels--then what showed up originally as a straight, angled line will have to cover one extra, or one less, pixel when resized.
I'm looking for help in resizing an image of a given dimension DOWN without having to approach this problem.
Thanks
~Michael
-
I'm looking for help in resizing an image of a given dimension DOWN without having to approach this problem.
What you're talking about is called aliasing. The screen resizing algorithm used by Photoshop and most web browsers will exhibit aliasing when using uneven size reduction ratios (anything other than 2:1, 4:1, 8:1, etc.). However, when downsizing using Bicubic or Bicubic Sharper, these problems are avoided because a better (but slower) resizing algorithm is used.
Forget DPI/PPI when dealing with web images, the number is totally irrelevant. The only thing that matters is pixel dimensions. For typical web/monitor display, the maximum pixel dimension should be about 800.
-
For downsizing, you would preferably use BiCubic Sharper rather than BiCubic.
I repeat, when sizing images for the web, yes, it is the total pixels which matter and the display decides on the output resolution, but when preparing these images for the web, a resolution setting is needed in the appropriate input field. Photoshop automatrically uses 72 PPI in its Save for Web and Devices algorithm. If you are re-sizing manually you need to enter a resolution in the Image Size dialogue, and usually using either 72 or 96 is fine. I agree with the 800 total pixel maximum linear dimension.
-
If you are re-sizing manually you need to enter a resolution in the Image Size dialogue, and usually using either 72 or 96 is fine. I agree with the 800 total pixel maximum linear dimension.
You can put whatever value you like in the "pixels per" box, as long as the actual pixel values are what you want. See here:
http://www.visual-vacations.com/Photography/digital_dpi.htm (http://www.visual-vacations.com/Photography/digital_dpi.htm)
-
Not wanting to cloud up the confusion you tried to clear (your site ref), but if we define resolution in terms of PPI, a 100 PPI image has less resolution than a 200 PPI image. If you were to print thte 8*10 at 100 PPI and the 4*5 at 200 PPI, while the total pixel count in the image is the same, the resolution and indeed the appearance will not be the same.
Now getting back to PPI in the Image Size box when making a JPEG for the web - yes you are correct that in the final analysis it is the pixel dimensions which count, and you get 800 pixels by telling the box 800 inches at 1 PPI or 10 inches at 80 PPI, or just telling it 800 pixels. Keying the inputs to some notion of display size and resolution is intuitively sensible if you are not necessarily stuck on one set of pixel dimensions and what to think about how different configurations may look on "the average display" (ha). But technically yes, any combination of inches and PPI yielding the desired pixel count on display will do the same.
-
Not wanting to cloud up the confusion you tried to clear (your site ref), but if we define resolution in terms of PPI, a 100 PPI image has less resolution than a 200 PPI image.
That is your fundamental error; you cannot meaningfully define a digital image's resolution by the PPI setting, ever. The only meaningful description of a digital image's resolution is the pixel dimensions, period, end of story, there are no exceptions. That is the point of my comparison; it doesn't matter whether the PPI setting is 1 or 1000, equal pixel dimensions result in identical images on-screen, and if you make equally-sized prints, the prints will be identical as well.
Don't confuse people with pointless irrelevancies; focus on what's really important--the pixel dimensions. As long as those are set appropriately, it doesn't matter what PPI number you use.
-
There is no fundamental error. Nor am I basically disagreeing with you. But how you handle the matter depends on your definition of resolution and what you do with the output, which is not always display. I'm talking more generically, you're talking display-specific. And that's fine.
-
If you downsample an image you get aliasing (this is a consequence of the resampling theorem).
Aliasing artifacts are produced for every downsampling, but generally you can see them more on geometric structures and for strong downsizing.
If aliasing artifacts are visible, the only way to reduce them is to use a low-pass filter before downsampling.
After downsampling a sharpening filter may recover the smoothing (not a true detail recovery).
But, if I understood, your downsampling is not strong, so I suspect that the main problem is a poor resampling algorithm.
Jacopo
-
There is no fundamental error. Nor am I basically disagreeing with you. But how you handle the matter depends on your definition of resolution and what you do with the output, which is not always display. I'm talking more generically, you're talking display-specific. And that's fine.
Even when broadening the scope beyond monitor display, basing the notion of a file's resolution on PPI is unreliable at best. I've had people give me grief about using a full-resolution 1DS file in an 8.5x11" flyer because the PPI tag happened to be set to 200 and they didn't think that the file had enough resolution, and I've also had people send me a web JPEG to use on a 24x36" poster because the PPI tag had gotten set to 300 and they figured that meant the file was good enough. It's much simpler to deal directly with pixel dimensions instead of the added complexity of PPI and inch-based dimensions, and many people's inability to perform the basic multiplication needed to convert from one to the other. It also avoids the thorny issue of whether an 800x1000 pixel file is 8x10" @ 100 PPI, or 4x5" @ 200 PPI, etc. Many people are simply not capable of understanding the equivalence there.
-
If aliasing artifacts are visible, the only way to reduce them is to use a low-pass filter before downsampling.
Does this mean applying a small blur before downsampling?
~Michael
-
Does this mean applying a small blur before downsampling?
With a good resampling algorithm, this is not necessary, the correct filtering is designed into the resampling algorithm. Theoretically, if you applied the right blur manually first, you could downsample with nearest-neighbor and get good results. But in practice this is more hassle than it's worth; you're better off using a decent resampling algorithm that doesn't require such stupidity in the first place. Bicubic Sharper is one of the best available options in Photoshop, especially if you don't do any sharpening after resampling.
-
That's a very good point Jonathan - one does need to handle sharpening very carefully after such processing, and I too have found that a combination of capture sharpening and downsizing doesn't leave much, if any , room for further sharpening without the image starting to krinkle.
-
That's a very good point Jonathan - one does need to handle sharpening very carefully after such processing, and I too have found that a combination of capture sharpening and downsizing doesn't leave much, if any , room for further sharpening without the image starting to krinkle.
I've been playing with upsizing and downsizing algorithms lately for this project (http://www.visual-vacations.com/media/PixelClarity.zip), and resampling without aliasing while retaining sharpness is a lot harder than it looks. It's actually a real PITA.
-
I opened up one of my own files in PixelClarity. It's hard to understand how exactly to use this.
After clicking on "reinterpolate image" in this program, the left-side screenshot looks much better than the right-side original.
I don't know how to export it, however; or when to use it for what-percentaged-sized reductions.
-
Does this mean applying a small blur before downsampling?
Gaussian blur is not the best low-pass filter to reduce aliasing, but it can do the job.
No perfect antialing filter exists, so you have to compromise between blurring and aliasing.
With a good resampling algorithm, this is not necessary, the correct filtering is designed into the resampling algorithm.
In any case the low-pass filter must be applied before sampling.
Jacopo
-
I opened up one of my own files in PixelClarity. It's hard to understand how exactly to use this.
After clicking on "reinterpolate image" in this program, the left-side screenshot looks much better than the right-side original.
Right now, what you have is just a tech demo; I put it up to get feedback on the quality of the interpolation algorithms I'm using for upsizing and downsizing. It doesn't have a save option enabled yet. The goal is for the resized image to be as sharp as possible with the least aliasing regardless of the rescaling percentage.
-
[...]you're better off using a decent resampling algorithm that doesn't require such stupidity in the first place.
I fully agree. It's amazing that after all these years there is still no option for a slower but much better behaved downsampling algorithm in Photoshop.
Bicubic Sharper is one of the best available options in Photoshop, especially if you don't do any sharpening after resampling.
I disagree on the 'one of the best' part. With regards to aliasing it is worse than regular bicubic (as implemented in Photoshop).
I did a number of comparisons several years ago that show the potential differences/risks:
http://www.xs4all.nl/~bvdwolf/main/foto/down_sample/down_sample.htm (http://www.xs4all.nl/~bvdwolf/main/foto/down_sample/down_sample.htm)
and for some less theoretical examples on a real image:
http://www.xs4all.nl/~bvdwolf/main/foto/down_sample/example1.htm (http://www.xs4all.nl/~bvdwolf/main/foto/down_sample/example1.htm)
Especially the aliasing of the sunscreens will be what probably can be seen in the OP's 'screen door' effect.
Cheers,
Bart