[thelist] Letting the browser resize an image

[Andrew Clover]

Roger Ly wrote:

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

Don't know about studies, but -

  - rendering is not significantly slower when scaling images on most
    browser
  - download time is suboptimal. Though if you are talking the difference
    between a 100x100 image and a 75x75 one that's not too signiifcant.
  - it always looks rubbish

> Can I assume that an image scaled with Photoshop or any other image
> editing application will look better scaled

Ohhh yes. Typically, image editing tools resize using bilinear or bicubic
filters, which roughly means the area of a pixel in the small image is
coloured the average of pixels in the same area of the large image. This
results in a smooth image.

Browsers, on the other hand all (at the moment) use a 'nearest neighbour'
scaling system, which takes the colour of the nearest pixel in the large
image and ignores the rest. Which normally results in quite jaggy images.

> Is it more processor intensive to scale in the browser?

No, less, but only because the browser uses the simplistic 'nearest neighbour'
algorithm.

> Is it better to scale by some even factor (scaling by 50% is better than
> by 55%)?

Generally yes, although the difference is small compared with the
difference between bilinear filtering and nearest neighbour. You notice
the difference most on things like diagonal lines.

Once you start scaling things *much* smaller than the original image it
doesn't matter too much about ratios though.

> 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

Yes, though in practice you'd save less due to file format overheads, and
compression working better with a larger, less detailed image.

The optimum solution is a have a thumbnail script like:

  <img src="/scripts/thumb.cgi?image=1234;w=75;h=75" alt="(thumbnail)" />

which you can call to make a new thumbnail of any size you like* on the fly
and return it to the browser. You'd need an image-handling library such as
PIL for Python or Graphics2D in Java, and a bit of coding work. It would
add more workload to the server too. (One might cache generated thumbnails
to reduce this.)

* - well, limit the size to a certain range, of you'd have an easy denial-
    of-service attack by calling the script and asking for a 999999 by 999999
    pixel image!

--
Andrew Clover
mailto:and at doxdesk.com
http://www.doxdesk.com/