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?

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?
>
> Does anyone have an opinion?
>
>

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.

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

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

Am 12.04.2016 um 20:13 schrieb 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?

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

In article <0euvtc-2oj.ln1@cfajohnson.ca>,
 "Chris F.A. Johnson" <cfajohnson@cfaj.ca> wrote:

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

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

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.

wmgill <wmgill@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.

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

On 04/12/2016 07:51 PM, dorayme wrote:
> In article <0euvtc-2oj.ln1@cfajohnson.ca>,
>   "Chris F.A. Johnson" <cfajohnson@cfaj.ca> wrote:
>
>> 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.
>
> 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.
>

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.

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.

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.

On 04/13/2016 03:14 AM, tlvp wrote:
> 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 :-) .

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.

On 04/13/2016 08:25 AM, Adam H. Kerman wrote:
> wmgill <wmgill@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.

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.

wmgill <wmgill@domain.invalid> wrote:
>On 04/13/2016 08:25 AM, Adam H. Kerman wrote:
>>wmgill <wmgill@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.

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

wmgill <wmgill@domain.invalid> wrote:
>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">

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.

In comp.infosystems.www.authoring.html message <0euvtc-
2oj.ln1@cfajohnson.ca>, Tue, 12 Apr 2016 15:21:04, Chris F.A. Johnson
<cfajohnson@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.

In article <neo63k$plo$1@dont-email.me>,
 wmgill <wmgill@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

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
-- 
Avant de repondre, jeter la poubelle, SVP.

On 4/15/2016 3:19 AM, tlvp's fingers rattled off:
> 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
>

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.

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