Poor image quality

[mur...@focus-computing.com.au]

My customers were complaining that images from my website were poor quality when viewed on Firefox yet were fine in Chrome. I was skeptical until I did the test myself. This is a Windows Vista home edition running on a Toshiba Satellite laptop. I opened the same page on my website in Safari, Chrome and Firefox - beside each other on the screen and then took a snapshot of the whole screen.

I have not done anything to this screen shot. I uploaded it to my website so that I can share it with everyone.
http://focus-computing.com.au/firefox-poor-quality-images.jpg

When you download this link click on it to see the full size image.
Then take careful notice of the first picture of the kitchen cabinetry. The first two (Safari and Chrome) do justice to the original picture, the third (Firefox) makes the image look like it has a very low resolution.

Now you might also notice that the text in the Firefox window is smaller. I went into each application and did a control-0 prior to taking this screenshot, so essentially each application is set at the default zoom (neither zoomed in or out). Lastly I also measured the width of the images, on the screen, a fraction over 52mm - they are all exactly the same size. This would also support the fact that they are all at the default zoom (neither zoomed in or out).

Nobody can blame the graphics card or the screen resolution (Safari and Chrome and managing quite well on exactly the same machine) or the Windows version, or the internet connection, or the web server, or even the images themselves. These are identical in every way except for the browser they are being displayed by.

Not a lot of wiggle room to play with.

Cheers
Murray

[Beauregard T. Shagnasty]

murray wrote:

> My customers were complaining that images from my website were poor
> quality when viewed on Firefox yet were fine in Chrome. I was skeptical
> until I did the test myself. This is a Windows Vista home edition
> running on a Toshiba Satellite laptop. I opened the same page on my
> website in Safari, Chrome and Firefox - beside each other on the screen
> and then took a snapshot of the whole screen.
>
> I have not done anything to this screen shot. I uploaded it to my
> website so that I can share it with everyone.
> http://focus-computing.com.au/firefox-poor-quality-images.jpg

How about if you provide a clickable link to this page that doesn't
require a customer log-in so we can see for ourselves?
<http://test.cabinetsonline.com.au/r.php?caborder=55&cabroom-22523>

(PS: that flashing HOT word should be, um, turned off...)

--
-bts
-This space for rent, but the price is high

[WLS]

Well, there is no DOCTYPE in the link you provided, so I'll say there
isn't one in any of the code, among other errors.

So, when the designer fixes the code, then retests it in Firefox, and it
doesn't look the same, then I'll also blame Firefox.

--
Thunderbird Beta | openSUSE 11.4 Linux
Get openSUSE: http://software.opensuse.org/121/en
Humans aren't a color of skin, a religion, a sex, a sexual orientation,
or a flag. We are human beings and that is how we need to see and treat
each other. - Justin Sane

[Ken Springer]

On 2/21/12 5:32 AM, Beauregard T. Shagnasty wrote:
> How about if you provide a clickable link to this page that doesn't
> require a customer log-in so we can see for ourselves?

Opened fine for me in FF and TB using Thunderbrowse.

--
Ken

Mac OS X 10.6.8
Firefox 10.0.2
Thunderbird 10.0.2
LibreOffice 3.4.5

[Chris Ilias]

On 12-02-21 2:47 AM, _mu...@focus-computing.com.au_ spoke thusly:

That looks like an old version of Firefox. Are you, and the customers
complaining, using old versions?
You can post your version info by going to
Help-->Troubleshooting_Information, then click [Copy all to Clipboard].
Open a reply to this post, and go to Edit-->Paste to paste the info from
your Troubleshooting Information page.

--
Chris Ilias <http://ilias.ca>
Mailing list/Newsgroup moderator

[Beauregard T. Shagnasty]

Ken Springer wrote:

> Beauregard T. Shagnasty wrote:
>> How about if you provide a clickable link to this page that doesn't
>> require a customer log-in so we can see for ourselves?
>
> Opened fine for me in FF and TB using Thunderbrowse.

murray posted a link to a screenshot of three browsers, showing images of
cabinets. I read the real link in his location bar in the picture so I
could see the images in my own browser. That link, however, goes to a
"customer login" page and not the page of the cabinet images.

Hence, we can't see the images he's complaining about in our own browsers
for testing. Before I'd blame Firefox, I'd want to see the page myself.

The link *I* posted,
<http://test.cabinetsonline.com.au/r.php?caborder=55&cabroom-22523>
supposedly of the cabinet pictures, does not work for us non-customers.

[WLS]

Here is the home page link.

http://cabinetsonline.com.au/

Has a DOCTYPE which produces an error when validated.

--
Thunderbird Daily | openSUSE 11.4 Linux
Get openSUSE: http://software.opensuse.org/121/en

[Ken Springer]

On 2/21/12 12:32 PM, Sailfish wrote:
> My bloviated meandering follows what Ken Springer graced us with on
> 2/21/2012 7:41 AM:

>> On 2/21/12 5:32 AM, Beauregard T. Shagnasty wrote:
>>> How about if you provide a clickable link to this page that doesn't
>>> require a customer log-in so we can see for ourselves?
>>
>> Opened fine for me in FF and TB using Thunderbrowse.
>>

> Ken, I believe BTS was refering to a link that would allow us to view
> the image without having to login?

Sailfish, Murray's link works fine for me. But BTS's does give me the
login page.

[Ken Springer]

On 2/21/12 12:44 PM, Beauregard T. Shagnasty wrote:
> murray posted a link to a screenshot of three browsers, showing images of
> cabinets. I read the real link in his location bar in the picture so I
> could see the images in my own browser. That link, however, goes to a
> "customer login" page and not the page of the cabinet images.

Ah, gotcha. Good idea.

Yea, a link directly to the page would have been more informative. :-)

[mur...@focus-computing.com.au]

Hi Chris

You were absolutely correct, it was an older version.
I've downloaded the latest and added the 'help|about' boxes to each browser.
The same image name (but you may need a control-r to download the newer version).

http://focus-computing.com.au/firefox-poor-quality-images.jpg

Most of the other comments were accurate as well - it's a secure website, you won't be able to access it directly. Which is actually quite good, because it stops people replying with ridiculous comments like: "It looks okay on my browser"

My post highlights what millions of Firefox users around the world are seeing everyday, and because most will never compare these images side-by-side with another browser the vast majority don't complain - they assume everybody in the world is seeing the same thing.

Attempting to blame DOCTYPE or validation errors is simply sticking your head in the sand and pretending the problem doesn't exist. Heads up people.

Cheers
Murray

[Beauregard T. Shagnasty]

murray wrote:

> Most of the other comments were accurate as well - it's a secure
> website, you won't be able to access it directly. Which is actually
> quite good, because it stops people replying with ridiculous comments
> like: "It looks okay on my browser"

Whoa. Do you want help or don't you?

> My post highlights what millions of Firefox users around the world are
> seeing everyday, and because most will never compare these images
> side-by-side with another browser the vast majority don't complain -
> they assume everybody in the world is seeing the same thing.

Your site gets millions of hits from people using Firefox, and they all
see bad images. I don't believe it. What do you see on another computer
besides your own? Are you using a Mac? What does the page look like on a
Windows or Linux PC? Your neighbor's PC?

> Attempting to blame DOCTYPE or validation errors is simply sticking your
> head in the sand and pretending the problem doesn't exist. Heads up
> people.

Attempting to not get to the root of the problem is the same.

How about you give direct links to those two graphics on the left side of
that page? Or set up a page in a non-customer /test folder so we can
help. What kind of image files are these? JPGs, PNGs, TIFFs, BMPs ??

Help us out here...

[Dave Warren]

In the last episode of
<29497248.814.1329859386875.JavaMail.geo-discussion-forums@pbai10>,

mur...@focus-computing.com.au said:

>Attempting to blame DOCTYPE or validation errors is simply sticking
>your head in the sand and pretending the problem doesn't exist.
>Heads up people.

No, it's called troubleshooting. The first step to fixing a problem is
to identify the circumstances in which it occurs.

[Chris Ilias]

On 12-02-21 4:23 PM, _mu...@focus-computing.com.au_ spoke thusly:

> You were absolutely correct, it was an older version. I've downloaded

> the latest and added the 'help|about' boxes to each browser.. The

> same image name (but you may need a control-r to download the newer
> version).
>
> http://focus-computing.com.au/firefox-poor-quality-images.jpg

Shucks, I thought I solved that one. :-(

As a test try this:
1. In the location bar, type "about:config" (without the quotes) and
press <Enter>.
2. Click [I'll be careful, I Promise!]
3. Search for the preference: gfx.color_management.mode
4. Double-click on it and set the value to: 0

You may need to restart Firefox for it to take affect; I don't know.

[WLS]

The problem exists because of poor web site coding. So if you are going
to stick your head in the sand and pretend that problem doesn't exist.

If you aren't planning on actually trying any of the advice given here,
then why even bother asking questions???

[mur...@focus-computing.com.au]

Hi Chris (and others)

I adjusted the config entry and restarted FF, made no difference - sorry.
I then reset it back to normal and restarted again (just to be pedantic).

Now to the others.... just to prove this has absolutely nothing to do with HTML validation standards or DOCTYPE blah blah blah... I copied this image into a public location and then displayed this in all three browsers:

http://focus-computing.com.au/cabinet-plain-jpg.jpg

I was surprised but happy - they are all the same.

Okay, let's wrap some basic html (and yes, you can read the URL and use it, it is public, however it was modified to the version below). Loaded this to all three browsers, and the result:

http://focus-computing.com.au/cabinet-plain-html.jpg

Again, it was the same. Doubly surprised! So I checked the original and there was some scaling going on, so I added height and width to the <img> and reloaded all three browsers:

http://focus-computing.com.au/cabinet-html-scaled.jpg

Voila' Safari and Chrome look like the original appropriately scaled. Firefox does it's pixelating thing.

I had added both height and width, so I checked the original dimensions and sure enough my scaling was correct, the image was not being skewed in any particular fashion... however, knowing there would be a few who don't believe me I removed the width from the <img> so there was just a single height attribute to scale with. Same result. I've left cabinets.html on the site so you can try it in your own browsers and compare results. (Note I said browsers, if you are going to try loading it in FF on your Windows computer please do compare it with Safari or Chrome or IE and respond with a screen shot).

PS IE gives the same result as Safari and Chrome.

Now back to my post... millions of people are using Firefox all around the world and I'm certain that there are millions of images being scaled in precisely the same way and displayed by these users every day. Oh, and please don't suggest customers should be scaling their own images prior to uploading.

There is an argument that I should scale these images on the server when they are uploaded, and interestingly I do this - I scale and store a large version with maximums of 800x600 and then a thumbnail with maximums of 150x100. This particular page required something in the middle, so I use the larger image and rely on the browser to scale.

Cheers
Murray

[Beauregard T. Shagnasty]

If you had only done this when first asked rather than arguing about it
for a day... I see your problem with the scaling.

<http://tekrider.net/usenet/cabinet.html>

You should file a bug for this. But leave them an accessible example such
has you have for us.

Oh. For all my web sites' images, I always resize the images to the exact
size needed for the page, and always have. It is safest to do this -
using the height and width as well.

BTW, when you use height and width attributes in an <img> element, you
only use digits, you don't add "px" to them.

[Beauregard T. Shagnasty]

Beauregard T. Shagnasty replied to hisself:

> Oh. For all my web sites' images, I always resize the images to the
> exact size needed for the page, and always have. It is safest to do this
> - using the height and width as well.

BTW, I've opened your image (836x512) in GIMP, and resized it to the
width of 148 you want on your page. It's pixelated right there in GIMP.
No browser necessary!

[Ron Hunter]

It seems to me that YOU are the one assuming everyone sees the same
thing you see. I see no difference between what various browsers (I
have 6 installed) display on various websites, baring a few format
differences on poorly written sites.
THe URL you provided looks like a scaling issue, which would most likely
be a problem in the html. When html isn't written in a standard way,
different browsers will interpret it differently. Try various zoom
levels on FF and the other browsers to see if it displays differently.

[Gelomida]

On 02/22/2012 05:56 AM, Beauregard T. Shagnasty wrote:
> Beauregard T. Shagnasty replied to hisself:
>
>> Oh. For all my web sites' images, I always resize the images to the
>> exact size needed for the page, and always have. It is safest to do this
>> - using the height and width as well.
>
> BTW, I've opened your image (836x512) in GIMP, and resized it to the
> width of 148 you want on your page. It's pixelated right there in GIMP.
> No browser necessary!

Which scaling algorithm did you use?

The choice of the algorithm might explain the difference between the
different browser's output.

[Beauregard T. Shagnasty]

Gelomida wrote:

> Beauregard T. Shagnasty wrote:
>> Beauregard T. Shagnasty replied to hisself:
>>> Oh. For all my web sites' images, I always resize the images to the
>>> exact size needed for the page, and always have. It is safest to do
>>> this - using the height and width as well.
>>
>> BTW, I've opened your image (836x512) in GIMP, and resized it to the
>> width of 148 you want on your page. It's pixelated right there in GIMP.
>> No browser necessary!
>
> Which scaling algorithm did you use?

Are you familiar with The GIMP? It's a photofile processing application
very much like PhotoShop. All I did was load/open murray's original
836x512 JPG (the one he's using on his page) and go to the GIMP's menu
Image > Scale Image.. and change the height to 148, the size he
apparently wants on his page. Doing so auto-changed the width to 242.
Once scaled, the image is "pixelated" even before saving the change.

If you would care to see for yourself, here's a screenshot from GIMP:
<http://tekrider.net/usenet/cabinet-scr.jpg>
Download it and look at what happens to it, with your own photo software
rather than a browser.

> The choice of the algorithm might explain the difference between the
> different browser's output.

I don't see why an 'algorithm' would make a difference across browsers.

[mur...@focus-computing.com.au]

Thanks Beauregard

I have filed a bug report here:
https://bugzilla.mozilla.org/show_bug.cgi?id=729484

I think this is the first bug report I've ever filed for Firefox.... it's really quite a privilege.

Cheers
Murray

[Axel Grude]

Ok this is marked as duplicate of
https://bugzilla.mozilla.org/show_bug.cgi?id=486918

but maybe playing with these settings

https://developer.mozilla.org/En/CSS/Image-rendering

might help?

Unfortunately I do not see any bicubic option for Fx there :(

[mur...@focus-computing.com.au]

Hard to believe - this was reported 3 years ago but it would appear they have only just started working on fixing it now. There is hope...

[Dave Warren]

In the last episode of <xsSdnWC9k5MfTtnS...@mozilla.org>,

"Beauregard T. Shagnasty" <a.non...@example.invalid> said:

>I don't see why an 'algorithm' would make a difference across browsers.

Firefox uses one algorithm to resize images, another browser might use a
different algorithm. Why wouldn't this potentially yield different
results?

[Beauregard T. Shagnasty]

Dave Warren wrote:

> Beauregard T. Shagnasty said:
>> I don't see why an 'algorithm' would make a difference across browsers.
>
> Firefox uses one algorithm to resize images, another browser might use a
> different algorithm. Why wouldn't this potentially yield different
> results?

Oh, sorry. I thought he was talking about what The GIMP used. His comment
was in direct response to my mention of GIMP resizing, not about a
browser.

[Ron Hunter]

Given that resizing always means throwing away data, what data to throw
away may vary depending on the programmer, and just how he does the
resizing.

[Dave Warren]

In the last episode of <RemdnbVLfLL2BtjS...@mozilla.org>,

Yes, that's pretty much my point... ?

[Gelomida]

On 02/22/2012 12:37 PM, Beauregard T. Shagnasty wrote:
> Gelomida wrote:
>
>> Beauregard T. Shagnasty wrote:
>>> Beauregard T. Shagnasty replied to hisself:
>>>> Oh. For all my web sites' images, I always resize the images to the
>>>> exact size needed for the page, and always have. It is safest to do
>>>> this - using the height and width as well.
>>>
>>> BTW, I've opened your image (836x512) in GIMP, and resized it to the
>>> width of 148 you want on your page. It's pixelated right there in GIMP.
>>> No browser necessary!
>>
>> Which scaling algorithm did you use?
>
> Are you familiar with The GIMP? It's a photofile processing application
> very much like PhotoShop. All I did was load/open murray's original
> 836x512 JPG (the one he's using on his page) and go to the GIMP's menu
> Image > Scale Image.. and change the height to 148, the size he
> apparently wants on his page. Doing so auto-changed the width to 242.
> Once scaled, the image is "pixelated" even before saving the change.

Scaling down is a 'lossy' operation and differents algorithms can be
chosen by browsers.

TThere are more CPU intensive and less CPU intensive algorithms, so for
fast scaling one might choose algorithms that are less 'beautiful'.

When scaling with Gimp you have four options on the scaling algorithm
(at least with my verison, It is labeled quality, but is a scaling
algorithm)
you have none, linear, cubic, and sinc as choice.

Id suggest to play with the four options and compare the results
(ideally zooming in to better see the pixel)


Depending on the algorithm you should see a different result.


My point was, that you seeing the problem with Gimp means not a lot as
long as you don't tell us what scaling method you used.


On a first glance it seems that in the screen shot no interpolation
algorithm was used for firefox and that the others used linear or cubic
imterpolation.

>
> If you would care to see for yourself, here's a screenshot from GIMP:
> <http://tekrider.net/usenet/cabinet-scr.jpg>
> Download it and look at what happens to it, with your own photo software
> rather than a browser.
>

For me your result looks better than the firefox result.
Make a screenshot of the originally reported comparison and zoom in a
little and compare with your zoomed version.

[Dr J R Stockton]

In mozilla.support.firefox message <WZednZint9YO7dnSnZ2dnUVZ_uednZ2d@moz
illa.org>, Tue, 21 Feb 2012 22:35:31, Beauregard T. Shagnasty
<a.non...@example.invalid> posted:

>BTW, when you use height and width attributes in an <img> element, you
>only use digits, you don't add "px" to them.

BTW^2, you can also use percentages; and, within a style attribute, non-
zero dimensions need units and can have any units, including ex & em.

--
(c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk Turnpike 6.05 WinXP.
Web <http://www.merlyn.demon.co.uk/> - FAQ-type topics, acronyms, and links.
Command-prompt MiniTrue is useful for viewing/searching/altering files. Free,
DOS/Win/UNIX now 2.0.6; see <URL:http://www.merlyn.demon.co.uk/pc-links.htm>.

[Swifty]

On Wed, 22 Feb 2012 17:09:36 +0000, Axel Grude <axel....@gmaiI.com>
wrote:

>but maybe playing with these settings
>
>https://developer.mozilla.org/En/CSS/Image-rendering

However, you cannot expect the millions of customers all to play with
settings for the benefit of the website developer. :-)

The answer for the end users is as Beauregard stated earlier - do your
resizing at home with a proper graphics package, then ensure that your
page is loaded with no resizing necessary in the browser (where, as
we've seen, it might not be to your liking).

Doing the scaling at home will almost always yield superior results,
as you can afford to use more CPU in this one-time task than browsers
can afford to use whilst loading a page for an impatient end-user.

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk