Images resized by browser look pixelated

HTML & CSS
21

Again, why are you concerned about others? One of the questions I asked you earlier on, if you remember.

We are webdesigners, it’s our job to do it right for the websites that are under our control. If you want to change how the browser works, please by all means advocate for a change, but this isn’t the right place to advocate it.

Everybody on here will agree with you that the rendering of “resized” images in Firefox, IE, etc. could be improved, but you can’t change anything about it when all you do is voice your opinion in this particular forum => waste of time.

22

Seems to me you’d have to add such algorithms exactly like the ones used by my filesystem to make “thumbnails” of images to the browser itself.

Opera might already have it, as it can show a shrunken version of a website when you hover over a tab, and it usually looks pretty good. But that’s out of our hands. And personally I don’t want any websites checking my computer to see how much available processing power I have. That’s none of their business. The reason why I have NoScript running anyway.

23

so i started the question wondering if any HTML or CSS can help this issue. And should I stop upon anybody’s suggestion that there is no solution in HTML or CSS that can do it? His answer is almighty true? Can anybody open up new light? No further discussion should be permitted? We can’t talk about how it affects us in general? Wow you really have a human heart.

24

I didn’t suggest that any website checking how much processing power you have. It is intelligently done by the browser, seeing that the computer is not doing too much, and draw the image better on screen. Nothing is revealed to the website.

And maybe HTML can have an attribute or CSS style that says, this image is important, please render it better. A good reason is that if we have an image 200 x 150 to start with, it is time consuming and tedious to resize it to all sizes 80px width, 50px, 30px for different purposes. It is time consuming to deal with all the resizing with human’s designer’s effort, and it is easy to induce missing image errors with all these different filenames. if the webpage design can indicate in HTML or CSS to tell the browser, please, the image can be displayed nicer, perhaps because it has text in it, or for any other reason.

25

By all means, don’t stop the discussion, but bring it to a place where you can actually do something about it! This is the wrong place, for this.

If you really think this is so important, why don’t you go to the places where you can actually change something?

This place is about providing (existing) solutions to problems. You’ve been told multiple times that what you are looking for is not possible, but provided you alternative solutions.

P.S. this is the last reply from me, I’m unsubscribing from this thread (a first for me!).

26

I only posted within a day. So by your standard, I should have given up within a day huh? We don’t know 100% of everything. Different people have different opionion. Example is, in C and C++ program, you ask people a question, and 5 people think it is not possible, and the sixth person told you yes it is possible and led you to some info. You are the type of the person who think it is not possible, and fan the message, “why are you asking here. not possible. go some where else.” When you don’t know how to do something, it doesn’t mean it is absolutely impossible and must stop right there by your own standard.

27

Wow… quite a bit of heat in this thread!

I get what you mean winterheat, but as others have said… we, as web designers are limited by the constraints of browsers and more broadly, the constraints of computers.

What you are asking for is not possible at the moment, at least… not in HTML/CSS alone. I don’t understand fully what you mean anyway - do you mean using the zoom tool in browsers or when an HTML specified size of an image does not reflect its actual size?

28

see post 20 for the explanation.

29

I didn’t suggest that any website checking how much processing power you have. It is intelligently done by the browser, seeing that the computer is not doing too much, and draw the image better on screen. Nothing is revealed to the website.

Ah ok.

And maybe HTML can have an attribute or CSS style that says, this image is important, please render it better. A good reason is that if we have an image 200 x 150 to start with, it is time consuming and tedious to resize it to all sizes 80px width, 50px, 30px for different purposes. It is time consuming to deal with all the resizing with human’s designer’s effort, and it is easy to induce missing image errors with all these different filenames. if the webpage design can indicate in HTML or CSS to tell the browser, please, the image can be displayed nicer, perhaps because it has text in it, or for any other reason.

I guess what I don’t get is, I didn’t know browsers had different rendering levels based on what the computer they’re on can do. I thought an image looks the same all the time-- the difference being how quickly or slowly it renders.

The differences between browsers, I always attributed it to not some level they have set, but how they deal with rounding, anti-aliasing, and softening/sharpening like they do with text.

Would your question also apply to text? (normal text I mean, not text in an image). Because I notice quite a bit of difference between browsers and machines. Sometimes I can get two machines with the same dpi settings to show something like 9px unreadable in one machine and ok in another. I also know that browsers get text smoothing or whatever from the machine itself… I’ve heard Mac and Windows guys arguing who’s got the better font rendering. I see a difference between Safari-for-Windows and IE, but I haven’t been able to see Safari on a Mac yet… apparently the two Safari’s will look different, from what I’ve heard.

30

yes, that came from some really good images appearing pixelated in IE and Firefox on Windows XP or Vista. And I was thinking, even if we use a shareware developed by a single person to resize an image, it looks better than a world class application. I think initially, it was to save time and speed up the rendering, but if the browsers are smarter, they can for example, render it fast first, and then when everything is displayed, then render images better when they are resized on the display. (kind of like displaying the text first, and then load and add all the images to the display later so that the user at least has something to read).

For text, Windows has a setting for clear type rendering of fonts, and either as Standard or a more advanced mode. Some people like one over the other… and I also noticed that when clear type is working fine for English fonts, it may make Asian fonts worse and difficult on the eyes. About 9px font legible on one platform and illegible on another system, could it be the default font difference. Some font will make good use of the full 9px, and some font will only make good use of part of the line height, so only 6 or 7px is put into good use… and in that case, that will be too small an area to render the text clearly.

By the way, I notice that Firefox 2 on Mac renders the image on meyerweb.com nicely (discussed in post 20), while Firefox 2 on Windows renders it pixelated, just like IE on Windows.

31

I think initially, it was to save time and speed up the rendering, but if the browsers are smarter, they can for example, render it fast first, and then when everything is displayed, then render images better when they are resized on the display. (kind of like displaying the text first, and then load and add all the images to the display later so that the user at least has something to read).

Now this tickles something in my head, but I can’t put my finger on it. There were either programmes, or Javascript, something, which would incrementally load an image not from top to bottom but first a nasty pixellated version, and then more detail gets added until there’s a full, detailed image. Some people wanted this to happen and I remember seeing it somewhere, but I can’t remember where. But as to how the image looks once it’s entirely loaded, I don’t think you can change that, and I still can’t see where a browser wouldn’t display 100% of the information once it had it.

About 9px font legible on one platform and illegible on another system, could it be the default font difference.

Why I said “same dpi” as this seems to make the biggest difference between machines who can otherwise display the same fonts, smoothing, etc. So I didn’t mean the one font would look physically smaller, but that one would seem “clearer” to the eye and thus legible. Sort of like the image example you posted, where the texts in the image are the same size and font, just one is more legible.

As for looking at Eric’s image in Safari… I have seen the difference in how whole pages look the moment I first got Safari for windows (I don’t have a Mac). Again I think it’s more the way Safari’s rendering engine simply works, or some extra algorithm in there, which FF, IE, and Opera just don’t have. Since it looks better on the Mac regardless, then I would even say that there’s an additional Macintosh algorithm that the newer browsers can pick up too. So again, Windows and Linux machines would have to have this to get their browsers to render images as nicely.

Me, I’m too cheap and surely not hip enough to buy a Mac : )

32

i suspect the reason Firefox 2 generates good looking resized image on Mac but not on Windows Vista is as follows: Firefox just uses the OS API to display the image resized. On Windows, it would the Win32 API. On the Mac, I am not so sure. As a result, the Firefox on Windows or on Mac automatically display image quality if displayed resized.

by the way, some Mac minis are only $599 and they are quite fast, having a Core 2 Duo processor. Sure not bad as a toy and as a UNIX platform.

33

That’s still pricey for basically testing one browser.

Besides, how do I solve the utter lack of hipness??

34

hey i think you are hip. you must be just being humble.