Images: Dynamic Resize? Quality?

[R Reyes]

Hi!

This discussion may help other programmers get a better idea of how to save
uploaded images through a website.

Why? 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. 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?
- 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?
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?
- Problem: If I resize a normal image to 200x300 the image will look
okay, BUT (always a but!) if that same picture was a panoramic version it
would look deformed and weird...not to mention terrible quality! Also,
resizing by percent never does a good job and leaves too much "whitespace" in
the background/canvas.
- Example: If I have a bunch of images, 25 images, which should all be
displayed as 200x300 in a table 5 rows and 5 columns, the resize formula will
work in terms of displaying the images in a table with the correct width and
height.
- HOWEVER, the resize will not work well in the example above UNLESS
all pictures are near same dimensions and none are panoramic/vertical views.
The images will all be displayed as 200x300 neatly in a table but the actual
images may look REALLY deformed (again, terrible quality!). This usually
happens when a mix of panoramic or vertical sized images from a camera are
submitted and displayed in a table with normal 4x6 (inches) camera sized
images.
3. When displaying images in a table, do websites use a specific formula
that works with all kinds of pictures, normal, vertical, and panoramic?
-SUPER FORMULA??: Maybe these websites use a formula that tests
widths/heights to see if a picture if normal, panoramic, vertical, and then
resizes based on that result? I could see it this way, however I haven't
seen any examples for this on the web, so I wouldn't know how to do this.

Most websites I've seen have source/explanation for:
1. Resizing to thumbnail.
2. Resizing to width X and height Y.
3. Resize by percent.
4. Resize for quality.

HOWEVER, they do not take into account the dimensions of the image that was
submitted (panoramic, vertical, or normal).

Hopefully you all understand my issue and can shed some light on the subject
as I'm STILL not sure what is best to do but I hope to code images being
saved the right way some day!

Thanks much for your time!

 

[Cor Ligthert[MVP]]

R.

You forgot an importent aspect in your question.

What kind of image compression do you want to use (jpg, tiff, gif etc), as
you add that to your question you have and endles problem.

As it was my idea, I would bring it first back to the essentials of your
problem before you going on a road as in my idea now with problems long time
running image software companies are strugling still as well with.

Just my idea,

Cor

 

[R Reyes]

Oh right! The main format would be .JPG.

I would probably accept any format that displays well on a website, but
given that most people are taking pictures from their cameras I'm guessing
that .JPG would be the easiest and most familiar for them to submit.

What other formats are common to the "average user"?

 

[R Reyes]

[...] 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.

Okay, that makes me feel better!!! Guess it wasn't the worst idea after
all...

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.

Well, it doesn't really take that long to resize and save during the image
upload (several seconds I'm guessing) so I could keep storing pictures this
way, if needed. One thing I'd be worried about when resizing on the fly is
that most pictures people submit from their cameras can be up to 1MB on
average? So if you display a webpage with 4x4 pictures it would be 16MB
downloaded, then resized on the fly which could take a while if I didn't
resize them to thumbnails previously during the upload instead.

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.

Definitely I wouldn't want to restrict the kinds of images they upload. I'm
all about giving users the best experience possible - if it's within my
programming experience!

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.

Honestly, the submissions are most likely going to be pictures of people
from parties, like a club or bar. The user would go on to the site, submit a
picture from their night out of partying and then everyone else can view it
in a table or in detail.

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.

This is where it gets tricky for me. I need to brush up more on image
programming and learn how to preserve aspect ratio, scaling an image as large
as it can be scaled (within the bounds of the canvas I assume), calculate a
scale factor in each direction and select the lesser result of the pair
(little lost on this part)? I will definitely have to read up on this and
picture what you're doing from a "visual standpoint" and tie it into these
"programming directions".

If you wish instead to crop photos so that they always fill the
destination, you can select the greater result of the pair instead.

I'd like it to fill most of the destination, but if I don't have to crop I'd
rather not unless it really makes the pictures more visually appealing.
Maybe I'd have to mix both crop and non-crop, given a certain result of the
picture dimensions?

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).

Ah, so I guess there are times when we should crop and times when we
shouldn't according to what you wrote here!

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.

NICE!!! I wanna know how to do that...and not just for thumbnails either!

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).

And it sounds nice too!

[...]
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

I'll check around for a web design issue website and see what I can dig up
there as well. Thanks for the detailed explanations!