[thelist] Letting the browser resize an image

Roger Ly rogerly at bareviking.com
Tue Jan 28 18:16:01 CST 2003


--
[ Picked text/plain from multipart/alternative ]
Hey all,

I'm working on a photo album-type application that allows you to display
your digital camera photos on the web in a variety of different layouts.
The basic premise is this:

*	You upload your photos
*	You choose a layout for your photos
*	We automatically create smaller, thumbnail-sized images of your
photos
*	We then generate an HTML photo album which displays your
thumbnailed photos.

Currently, I take the large photos and scale them down with an
application so it's maximum width/height is 100px.  The photo is scaled
maintaining aspect ratio, etc.  The placeholders in the album are sized
at 100x100, so we can fit the images in place, without having to let the
browser resize the image (the images will all "fit").

We want to add some new layouts, but don't want to be shackled by the
100x100 placeholder size in all the layouts.  We also, however don't
necessarily want to generate new thumbnails that conform to the new
layout sizes.  For example, if a new layout had placeholders for 75x75,
we don't want to have to make thumbnails at 75px max width/height, since
it could potentially duplicate the number of thumbnails we maintain.
Therefore, we will just determine the new width/height of the image
after scaling, and use the <img> width and height attributes to scale
down the image on the page.

Has anyone seen or heard of any studies that analyze the tradeoffs
performance and display-wise of using HTML to scale images in different
browsers?  We will never scale an image to something larger than it's
thumbnail's size (we will only scale down).  Can I assume that an image
scaled with Photoshop or any other image editing application will look
better scaled and previewed at the new and actual size, than that same
image scaled in HTML?  Is it more processor intensive to scale in the
browser?  Is it better to scale by some even factor (scaling by 50% is
better than by 55%)?

I imagine the placeholders will range from 50x50 to 100x100px.  So, in
theory, if my original image was 100x100, then by scaling it to fit to
50x50, I could potentially save up to 75% of the file size from being
downloaded by a browser if I pre-scale the image and use a 50x50
thumbnal instead of the 100x100 one.

Thanks,

Roger
--




More information about the thelist mailing list