Images: Dynamic Resize? Quality?

[=?Utf-8?B?UiBSZXllcw==?=]

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" <RR****@discussions.microsoft.comschreef in bericht
news:19**********************************@microsof t.com...

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!

[=?Utf-8?B?UiBSZXllcw==?=]

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"?

"Cor Ligthert[MVP]" wrote:

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" <RR****@discussions.microsoft.comschreef in bericht
news:19**********************************@microsof t.com...

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!

[Peter Duniho]

On Wed, 24 Sep 2008 08:25:01 -0700, R Reyes
<RR****@discussions.microsoft.comwrote:

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

Or larger.

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.

Correct. Even if the server has the CPU cycles to burn, it would slow
down the response time to the client. When the client is downloading an
image that's only been shrunk modestly, that time performance could be
hidden by the data transfer time, but for thumbnails it'd probably be very
noticeable.

It's my general opinion that caching all the possible sizes to disk by
resizing the images once when they are uploaded is better for the client
experience than resizing them every time they are fetched would be. I
just mean that there are no hard and fast rules, and depending on your
criteria you could do it other ways.

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

And it sounds nice too!

There's nothing magic about it. I simply create an HTML table where each
<tdelement is a thumbnail. The HTML layout engine in the client's
browser takes care of the rest (assuming alignment, etc. has been
specified correctly in the table).

Pete