Opinion on image scaling

[wmgill]

I have sites where various sizes of the same image are used. In the
past, for example, I would have a large copy, an medium copy, and a
thumbnail copy, each sized, optimized, and saved externally, then
displayed in their native pixel dimensions. I am redesigning one of
those sites now, and wonder if I would be better off having only one
image (i.e. the large copy), and letting the img height and width
attributes scale it for medium, or thumbnail use. Only 1 image would
have to be delivered, and cached, but is there any price in the quality
of the scaled down versions?

Does anyone have an opinion?

[Richard Owlett]

Interesting question in way possibly not foreseen/intended.

It reminds me of questions asked in a introduction to engineering
course I took over 50 years ago. Its title was "Engineering
Problems and Methods". One of its goals was to force freshman
engineering students to THINK ;/

As to "Does anyone have an opinion?" This *IS* USENET after all.

I don't believe the question is well stated.
More importantly there is an erroneous underlying assumption!

The phrase "but is there any price in the quality of the scaled
down versions" is bothersome. "Fewer pixels" == "less information".

This is a multi-dimensional costs/benefits analysis problem.
Whose costs are to be minimized?
How are those costs specified?
Whose benefits are maximized?
How are those benefits quantified?

IOW, not enough information given.

[James Moe]

On 04/12/2016 11:13 AM, wmgill wrote:
> I am redesigning one of
> those sites now, and wonder if I would be better off having only one
> image (i.e. the large copy), and letting the img height and width
> attributes scale it for medium, or thumbnail use. Only 1 image would
> have to be delivered, and cached, but is there any price in the quality
> of the scaled down versions?
>

Using the width/height attributes still requires that the full size
large image be downloaded regardless of its presentation size. If it is
a really large image, say greater than 1 or 2 MB, the cost is network
bandwidth and download time.
I always found it very annoying when we had basic DSL (1 Mbps) and a
site plopped a 30 MB image (2000px x 1500px) into the page, and scaled
it to 150px.

Another consideration is mobile devices, what with their rather limited
display space and data transfer limits. Here you would normally use CSS
to decide on the image size, using some percentage of the original
image. Then again, there is the bandwidth issue to consider.

Making multiple images is, IMO, preferable. You can automate alternate
size generation with any number of image manipulation tools. But then,
I'm a bit old school.

--
James Moe
jmm-list at sohnen-moe dot com

[Chris F.A. Johnson]

On 2016-04-12, Richard Owlett wrote:
> On 4/12/2016 1:13 PM, wmgill wrote:
>> I have sites where various sizes of the same image are used. In
>> the past, for example, I would have a large copy, an medium copy,
>> and a thumbnail copy, each sized, optimized, and saved
>> externally, then displayed in their native pixel dimensions. I am
>> redesigning one of those sites now, and wonder if I would be
>> better off having only one image (i.e. the large copy), and
>> letting the img height and width attributes scale it for medium,
>> or thumbnail use. Only 1 image would have to be delivered, and
>> cached, but is there any price in the quality of the scaled down
>> versions?

...

> I don't believe the question is well stated.
> More importantly there is an erroneous underlying assumption!

No, it's fine.

> The phrase "but is there any price in the quality of the scaled
> down versions" is bothersome. "Fewer pixels" == "less information".

Whichever method is used, the smaller image will have fewer pixels.

The question is whether the method of reducing the number of pixels
makes a difference to the perceived quality of the image.


--
Chris F.A. Johnson

[Helmut Richter]

My opinion *used* to be that images should preferably be shown in
original size. I have still some test examples from the time I had this
opinion (May 2013) but I do not see the problems any more. The URL is
http://hr.userweb.mwn.de/im/. The text explaining the examples is in
German but there is only one sentence that really matters, to wit the
one before the last image but one. It ("Hier ist ein Bild, ...") says
that the following image -- that is, the last but one -- was produced
with higher resolution and resized to a smaller scale by the browser and
that this looks really ugly compared to all the other images which are
presented in "original" size after diverse attempts to rescale and
improve them with image processing software.

As for now, I do no longer see that the last-but-one image looks uglier
that all the others, which was true when I wrote that. Obviously the
quality of the size reduction by the browser (Mozilla) has improved so
much that there is no longer a need to make the reduction carefully with
better software.

The disadvantage to have the browser reduce a larger image is that the
larger image is transferred, as others have already pointed out. The
benefit is that the user can enlarge it (with Mozilla by Ctrl-+) and get
better resolution back. Try to enlarge all images in that page, and you
will see that the last-but-one image comes out much better than the
others when enlarged. But the *main* benefit will be seen when you print
the page -- and this is really a reason why one should always consider
serving the image in higher resolution than is needed on the screen (but
not in a resolution that would suffice for a poster).

These are drawings. Photos behave a bit differently. For them, bad
quality is only a matter of beauty, not of precision.

Thumbnails as pointers to larger images should be served with minimal
resolution. Their job is to allow selecting images one wants to
download, and this target is missed when you have to download all images
just to see the thumbnails. In large galleries, this will be very
annoying for the user.

--
Helmut Richter

[dorayme]

In article <0euvtc-...@cfajohnson.ca>,

Never noticed quality problems with downscaling by browsers unlike
with upscaling. But really big pictures that few if any will see at
their natural size is not very nice for those having to download them
to see smaller.

--
dorayme

[tlvp]

On Tue, 12 Apr 2016 14:13:10 -0400, wmgill wondered ... :

> ... if I would be better off having only one

> image (i.e. the large copy), and letting the img height and width
> attributes scale it for medium, or thumbnail use. Only 1 image would

> have to be delivered, and cached ...

Perhaps, but won't the browser *actually* download the large image once for
each instance of the image (no matter whether scaled down or not) on the
page? Is it preferable to download the same large image three times, only
to scale it down in the browser twice, to medium and thumbnail? Or to
download each image in its *desired* size, chewing up perhaps only 1.5x the
data traffic of the single large image rather than full size, using up 3x?

If I'm mistaken, if the browser can somehow get away with downloading the
full-size image *only once*, yet use it at three different sizes in
different parts of the page, well, in that case, go for it, it's far more
efficient :-) .

Cheers, -- tlvp
--
Avant de repondre, jeter la poubelle, SVP.

[Adam H. Kerman]

Aren't thumbnails separate images? I don't see the image it references
being served unless the user clicks on it.

[Helmut Richter]

I am sorry, I was too verbose. Here is a summary.

Am 13.04.2016 um 01:50 schrieb Helmut Richter:

> My opinion *used* to be that images should preferably be shown in

> original size. [...]

> As for now, I do no longer see that the last-but-one image looks uglier
> that all the others, which was true when I wrote that.

1. If the image is downscaled by the browser, it does normally little
harm to quality.

> and this is really a reason why one should always consider
> serving the image in higher resolution than is needed on the screen (but
> not in a resolution that would suffice for a poster).

2. Serving an image in better quality (up to 4 times each side, i.e. 16
times as much binary data) and having it downscaled by the browser
results in better quality for print-outs (or when manually upscaled by
the user).

> These are drawings. Photos behave a bit differently. For them, bad
> quality is only a matter of beauty, not of precision.

3. Drawings used to be much worse than photos when the browser changed
the resolution. This effect is much less now than it used to be. Still
better is to use a vector format like .svg for drawings if possible.

> Thumbnails as pointers to larger images should be served with minimal
> resolution. Their job is to allow selecting images one wants to
> download, and this target is missed when you have to download all images
> just to see the thumbnails. In large galleries, this will be very
> annoying for the user.

4. Thumbnails should have small binary data (i.e. not more pixels than
what is shown) lest they fail to achieve their purpose.

--
Helmut Richter

[wmgill]

Thanks dorayme, and Chris

I am aware of the network noise, and performance impact of unnecessarily
forcing the download of very large image files. I was going to mention
that, but thought my question was too wordy as it was. In cases where
large, high definition images are involved I always provide them via an
explicit link informing the user so they don't have to wait for a major
download of an image unless they actually need/want it. The images I'm
talking about here are all appropriate for display on a page in their
native dimensions. Usually about 500 or 600 px square, and around 60kb.

As I said, in the past I scaled and optimized them externally (e.g. in
an image editor) in order to have more control (a throwback to my past
engineering, control freak compulsions). I knew that modern browsers can
scale them, but wasn't sure what kind of algorithm they use.

Sounds like I can be comfortable using browser scaling, as long as I'm
careful with the aspect ratio.

[Scott Bryce]

On 4/13/2016 1:14 AM, tlvp wrote:
> Perhaps, but won't the browser *actually* download the large image
> once for each instance of the image (no matter whether scaled down or
> not) on the page?

The browser will download it once, and store it in its cache. After
that, it will pull it from the cache, after doing a quick check with the
server to confirm that what it has in its cache is the same image.

[wmgill]

On 04/13/2016 08:52 AM, Helmut Richter wrote:
> I am sorry, I was too verbose. Here is a summary.
>

Thanks Helmut,

I didn't find them too verbose. I had considered most of the
network/performance issues, but hadn't really thought about the quantity
of images on an individual page. Mostly because the pages I'm looking at
don't involve very large images, or large numbers of them per page.
However that may not always be the case, and it's good to be reminded of
the cumulative consideration.

[wmgill]

No, the browser will cache the first referenced instance of the source
image, and refer to it on all subsequent requests, regardless of their
displayed size. With the discrete image approach the browser will be
forced to download two or three different images.

[wmgill]

Not necessarily. For example (and in the case of this particular site) I
may have a page showing several art pieces for sale. Each or them is
linked to an individual page for each piece. On the individual piece
page is a single larger (e.g. 500px X 500px) image of that piece, but on
the parent "collection" page there are several thumbnails, one for each
piece. These thumbnails are just smaller versions (e.g. 200px x 200px)
of the images on each individual page.

Before anyone asks, a relatively small, medium quality image is adequate
for displaying these pieces, and a much larger high definition image
isn't necessary. If it was, I would provide a well commented link to
afford the user the option of downloading a 4 or 5 Mb image, if that's
what they really need.

[Adam H. Kerman]

wmgill <wmg...@domain.invalid> wrote:
>On 04/13/2016 08:25 AM, Adam H. Kerman wrote:
>>wmgill <wmg...@domain.invalid> wrote:

>>>I have sites where various sizes of the same image are used. In the
>>>past, for example, I would have a large copy, an medium copy, and a
>>>thumbnail copy, each sized, optimized, and saved externally, then
>>>displayed in their native pixel dimensions. I am redesigning one of
>>>those sites now, and wonder if I would be better off having only one
>>>image (i.e. the large copy), and letting the img height and width
>>>attributes scale it for medium, or thumbnail use. Only 1 image would
>>>have to be delivered, and cached, but is there any price in the quality
>>>of the scaled down versions?

>>>Does anyone have an opinion?

>>Aren't thumbnails separate images? I don't see the image it references
>>being served unless the user clicks on it.

>Not necessarily. For example (and in the case of this particular site) I
>may have a page showing several art pieces for sale. Each or them is
>linked to an individual page for each piece. On the individual piece
>page is a single larger (e.g. 500px X 500px) image of that piece, but on
>the parent "collection" page there are several thumbnails, one for each
>piece. These thumbnails are just smaller versions (e.g. 200px x 200px)
>of the images on each individual page.

In your example, the thumbnail is a separate image from the main image.
The user doesn't see the main image unless he clicks.

[wmgill]

On 04/14/2016 10:27 AM, Adam H. Kerman wrote:

> In your example, the thumbnail is a separate image from the main image.
> The user doesn't see the main image unless he clicks.
>

No in my example it's the same image, but with different height & width
attributes.
<img src="images/egret.jpg" alt="Egret" height="200" width="200">

and

<img src="images/egret.jpg" alt="Egret" height="600" width="600">

[Adam H. Kerman]

My error. Unless the image were further compressed, I wouldn't use
the term "thumbnail", and as a user, I'd really prefer that highly
compressed images were on the index page. I don't want to wait for
it all to load.

[Dr J R Stockton]

In comp.infosystems.www.authoring.html message <0euvtc-
2oj...@cfajohnson.ca>, Tue, 12 Apr 2016 15:21:04, Chris F.A. Johnson
<cfajo...@cfaj.ca> posted:

>
> The question is whether the method of reducing the number of pixels
> makes a difference to the perceived quality of the image.
>

The quality depends on whether of not the scaling amounts to multiplying
or dividing the size by an integer.

Natural scenery will not be visually degraded by non-integer scaling;
but anything with straight lines is liable to show artefacts with non-
integer scaling.

You should integer-scale the originals down, before transmitting, as
much as possible without making them smaller than the largest that needs
to be displayed.

I consider those to be obvious but not tested!

--
(c) John Stockton, Surrey, UK. 拯merlyn.demon.co.uk Turnpike v6.05 MIME.
Merlyn Web Site < > - FAQish topics, acronyms, & links.

[dorayme]

In article <neo63k$plo$1...@dont-email.me>,

wmgill <wmg...@domain.invalid> wrote:

> I knew that modern browsers can
> scale them, but wasn't sure what kind of algorithm they use.
>
> Sounds like I can be comfortable using browser scaling, as long as I'm
> careful with the aspect ratio.

Yes, aspect ratio is important but generally it is very easy for you
when specifying the smaller versions, the width alone can do, modern
browsers will deduce the appropriate scale for height from the native
size. There may be some advantage in speed to specifying height as
well, you then have to do a little maths - or math as yanks like to
say (sounds so strange to me!). <g>

As for how they scale images, there is at least one I use regularly in
Photoshop. There may be better ones, there are certainly worse ones.
Good is "bicubic" which works out the dots from some sort of average
in a sample area.

--
dorayme

[tlvp]

On Wed, 13 Apr 2016 03:14:20 -0400, tlvp wrote:

> If I'm mistaken, if the browser can somehow get away with downloading the
> full-size image *only once*, yet use it at three different sizes in
> different parts of the page, well, in that case, go for it, it's far more
> efficient :-) .

I owe a debt of gratitude to sbryce and wmgill for disabusing me of my
mistaken 20th century notion that a browser would need to download the same
image multiple times, rather than know how to rely on a single cached copy.

Learn something new nearly every day in these pages :-) . Cheers, -- tlvp

[Ed Mullen]

On 4/15/2016 3:19 AM, tlvp's fingers rattled off:

Keep in mind that some users run with the browser cache disabled. I
have a 100 Mb connection and have turned off all browser caching. :-)

--
Ed Mullen
http://edmullen.net/
Your density is wearing thin.

[Jonathan N. Little]

Ed Mullen wrote:
> I have a 100 Mb connection and have turned off all browser caching. :-)

If only the rest of us has such access that was promissed and paid for
25 years ago >:o

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com