Re: Images: Dynamic Resize? Quality?
- From: "Peter Duniho" <NpOeStPeAdM@xxxxxxxxxxxxxxxx>
- Date: Wed, 24 Sep 2008 01:02:04 -0700
On Tue, 23 Sep 2008 21:11:01 -0700, R Reyes <RReyes@xxxxxxxxxxxxxxxxxxxxxxxxx> wrote:
[...] Well currently, I save 3 versions of every uploaded image on my own
little website:
1. Small: DOWNsize of original image to be used as a thumbnail.
2. Medium: DOWNsize of original image to be used as user avatars/icons in
forums or profiles.
3. Large: Original non-resized version of the image for if a user clicks to
see the image as it was submitted/uploaded to the website.
Obviously, it is a terrible idea to have 3 separate images.
Why? In what context do you mean?
Disk space is cheap and plentiful, bandwidth not so much, and CPU time somewhere in between. If you can spare the CPU cycles, it might make sense to resize images on the fly server-side. Otherwise, you definitely should store multiple appropriate sizes on the server file system and then serve those up to clients as appropriate. There's no good reason to force the client to download the full size only to have it shrunk for display and then them never actually need the large version.
Good thing
traffic is low! With that, my thoughts on saving the images are:
1. I *think* that UP-sizing an image messes up the quality more than
DOWN-sizing. So, should I only save the image one time, as its original
size, then do dynamic resizes every time the image is requested from a web
page?
I agree that if you store only one size, it should be the largest size that your clients will see. This seems obvious to me, as shrinking an image won't lose _any_ quality that the client can see, because they will only be looking at the small version anyway, whereas blowing up an image can produce vastly poorer results than displaying the original-resolution image.
Whether you shrink the image on the fly when request or do it in advance depends on whether you have the CPU cycles to spare for image processing. See above.
- Concern: Would this also mean I should only allow people to submit
images of larger (and more manageable) sizes to the website such as 400x400
so that I can always DOWN-size and keep up the quality?
Impossible to say without knowing the goals of your web site. A site like Flickr, for example, allows pretty much any resolution image. Of course, users who only provide low-resolution images have no way to present higher-resolution images. Again, this is a trivially true fact.
If you want to avoid having any images that cannot be shown in good quality at a specific size, then you should prohibit uploading images of lower resolution. But honestly, I don't see any reason to make that prohibition in most cases; it seems like if users are uploading images, they can make their own decisions as to what kind of quality they want their images to be presented.
There are some obvious exceptions:
-- passports and similar documents. Various governmental immigration departments allow for electronic applications or renewals of passports, with uploading of images. They have minimum standards for resolution for the photo images, and so obviously it makes sense for their systems to simply reject images that don't meet those standards.
-- online photo printing. For any given size reprint, there's a minimum image file resolution that's likely to produce acceptable results. At the very least, such a server might warn a user that image files that don't meet the standard may produce unacceptable results, and in order to keep customer complaints down, one might simply prohibit lower resolution images altogether.
Again, it really depends on the application. There's no single correct answer here.
2. What about panoramic or vertical view pictures? What's the best way to
resize this specific type of image to fit an exact width/height nicely?
In my own image handling code, I generally will preserve aspect ratio, scaling the image as large as it can without being cropped within a specific size. The right way to do this, given an original size and a target size, is to calculate a scale factor in each direction and select the lesser result of the pair.
If you wish instead to crop photos so that they always fill the destination, you can select the greater result of the pair instead.
Some web sites do always do an anamorphic scaling, not preserving the aspect ratio, and yes it looks ugly. But it does preserve the most information. So it depends on your goals.
Another alternative is to select cropping when the orientation of the original matches the orientation of the target size, but to simply fit the image when it doesn't. This potentially loses the most resolution the mis-match case, but will allow for cropping when it's reasonable to do so without losing too much of the image (cropping in the mis-match case could result in the bulk of the image being excluded from the presented image).
Yet another alternative is to allow for different orientations in your output. On a web site I maintain, that's actually what I do. I have thumbnails that are always 480 pixels in size, but either 60x80 (portrait) or 80x60 (landscape). I simply let the thumbnail presentation flow to accommodate the total size. If I have a whole row of landscape thumbnails, then the row only needs to be high enough to allow for 60 pixels of height, but if there's even one portrait thumbnail, the row height expands by another 20 pixels to account for that.
Likewise, the thumbnails always have the same margin between them, but portrait thumbnails demand less width than landscape ones do. In my case, I actually use a table to display the thumbnails, and so when I have rows that have the same number of images but different combinations of portrait and landscape, each column is sized to the width of the widest thumbnail in that column. In other words, if the entire column is portrait thumbnails, then the column takes up only the width needed for a portrait thumbnail, but if there's even one landscape thumbnail, the column is wider and the portrait thumbnails are simply centered in place (and yes, that makes for more whitespace between the thumbnails, but to me it still looks quite nice).
[...]
3. When displaying images in a table, do websites use a specific formula
that works with all kinds of pictures, normal, vertical, and panoramic?
See above. Frankly, for any kind of layout design you can think of, I'm sure there's at least one web site out there that uses it. What you really need to do is decide what works best for your goals, both aesthetically and functionally. Once you've made that determination, the rest is easy.
Finally, I'll point out that other than a brief mention above of an algorithm for calculation image scaling, this has very little to do with ..NET or C#. It seems to me that if you want a really detailed discussion, you should probably find a more appropriate forum, one dedicated to web design issues.
Pete
.
- Follow-Ups:
- Re: Images: Dynamic Resize? Quality?
- From: R Reyes
- Re: Images: Dynamic Resize? Quality?
- References:
- Images: Dynamic Resize? Quality?
- From: R Reyes
- Images: Dynamic Resize? Quality?
- Prev by Date: Re: Using { } blocks to improve readability
- Next by Date: Small syntax question
- Previous by thread: Re: Images: Dynamic Resize? Quality?
- Next by thread: Re: Images: Dynamic Resize? Quality?
- Index(es):
Relevant Pages
|
