images resized by browser look pixelated

[winterheat]

from time to time, there is a really nicely design graphic file or a nice looking photo, but when it is resized on IE or Firefox, the browsers, trying to save time, will make a coarse resize shrinking of the original image... and it looks pretty bad. is there a way to tell the browser by HTML / CSS / browser settings, to take more time to refine it?

especially, when the page is loaded and the 2GHz Core 2 Duo is sitting there doing close to nothing... why not spend 1/1000 second to make it look better?

[Ruben K.]

That's just the way modern browsers render images

[felgall]

You should always display images in web pages at 100% of their actual size. If the image needs resizing then use your graphics software to resize it before you upload it to the web.

[logic_earth]

Browsers don't resize the image it is still the same size when it got it. All it does is constrain the size to a box.

[winterheat]

You should always display images in web pages at 100% of their actual size. If the image needs resizing then use your graphics software to resize it before you upload it to the web.

we can control our images in our own website. what about all the millions of webpage out there... if the problem can be solved by merely detecting the processor not being used too much and then display them on screen nicer.

[winterheat]

Browsers don't resize the image it is still the same size when it got it. All it does is constrain the size to a box.

i am a CS major myself... so unless otherwise, when a 300 x 200 image get displayed on the screen as 100 x 66, pixel by pixel, there is still resizing going on, no matter it is all happening in RAM or whether it get saved as a file. unless it is using some graphics card function that i don't know about.

in any event, it looks like extra effort is needed to make the graphics look nicer, and that effort doesn't cost us anything other than ldling processor time.

[logic_earth]

No there is no resizing at all. The image's dimensions are not altered. The browser just constrains it to a box without resizing the image that is why it is ugly.

[winterheat]

No there is no resizing at all. The image's dimensions are not altered. The browser just constrains it to a box without resizing the image that is why it is ugly.

sigh.... you do have a fixed way of thinking...

so the bottom line is
1) the graphics is displayed on screen, pixelated, agreed?
2) extra time is needed to make it look better, agreed?
3) the processor, being Duo core and Quad core, is not at 100% of processor load most of the time. And browsers can actually detect whether it is busy before it make the graphics look better.

whatever you call it, resizing or not, you still do it. Really, you don't need to save the file to call it "resizing". Just the fact that you are sampling the image in a very coarse way and then display it on the screen at a different size, that is resizing already. Tell me, you have an image of 300 x 200. Now you sample the image's pixels and then display it on the screen at 100 x 67, by painting pixel by pixel. (you do still have to paint the pixels, don't you?) the act of painting the pixel different from the original size, is resizing, right on the screen canvas.

[c2uk]

we can control our images in our own website. what about all the millions of webpage out there... if the problem can be solved by merely detecting the processor not being used too much and then display them on screen nicer.

Why would you want to control other than your own images?

Why not use some graphic library on the server?

[winterheat]

Why would you want to control other than your own images?

Why not use some graphic library on the server?

no i am saying wouldn't that be nice if browsers can be made to do that, or if the HTML or CSS can tell the browser to take extra time to resize a particular image more nicely.

[c2uk]

no i am saying wouldn't that be nice if browsers can be made to do that, or if the HTML or CSS can tell the browser to take extra time to resize a particular image more nicely.

That wasn't what you asked in the first post:

is there a way to tell the browser by HTML / CSS / browser settings, to take more time to refine it?

So again:

Why would you want to control other than your own images?

Why not use some graphic library on the server?

[winterheat]

That wasn't what you asked in the first post:

In my first post I am asking the same thing. Can the browser do it, or can HTML or CSS indicate the image is important so that the browser will do it.

Or else how do you take the meaning of the original post versus the later one.

I am not "controlling" other website's images. I am merely wanting to see it more nicely if displayed in a different size in my browser.

[c2uk]

Browser can't do it - fullstop.

Maybe you see this forum (the HTML and XHTML forum!) differently then I do, because I see this forum not about discussing what features should be included in browsers but how can something be achieved with existing solutions.

And my questions were based on this.

[winterheat]

Browser can't do it - fullstop.

Maybe you see this forum (the HTML and XHTML forum!) differently then I do, because I see this forum not about discussing what features should be included in browsers but how can something be achieved with existing solutions.

And my questions were based on this.

so how about the question that can HTML or CSS tell the browser to do it. If we accept things the way they are, that's fine too. But at a certain degree, we can't. Otherwise we'd still be using HTML 1.2 rather than 4.01. Or drinking from a river.

[felgall]

Browsers are not supposed to resize images. The reason for supplying a size in the HTML/CSS is so the browser can leave a space for the image to display in. That space is supposed to be the same size as the image actually needs.

Using HTML/CSS to make an image bigger will result in its being blurred as there is insufficient info in the image to display clearly at a larger size.

Using HTML/CSS to make an image smaller means that the page is taking significantly longer to load since the image file is bigger than it needs to be.

You should either upload images to the server that are already the right size or use server side processing to resize them once they are uploaded. The browser should only ever retrieve an image that is the same size as the HTML/CSS says that it is. Removing the size of images from the HTML/CSS should not change the final appearance of the page if the images actually load.

[c2uk]

With browser I included HTML and CSS, so no, not possible.

And as I said, I don't see this particular forum for a discussion about improvements to either Browser, nor HTML/CSS. There are better places to voice your opinion and advocate changes in that regard.

[winterheat]

Browsers are not supposed to resize images. The reason for supplying a size in the HTML/CSS is so the browser can leave a space for the image to display in. That space is supposed to be the same size as the image actually needs.

Using HTML/CSS to make an image bigger will result in its being blurred as there is insufficient info in the image to display clearly at a larger size.

Using HTML/CSS to make an image smaller means that the page is taking significantly longer to load since the image file is bigger than it needs to be.

You should either upload images to the server that are already the right size or use server side processing to resize them once they are uploaded. The browser should only ever retrieve an image that is the same size as the HTML/CSS says that it is. Removing the size of images from the HTML/CSS should not change the final appearance of the page if the images actually load.

the discussion here is as a web designer we should this, we should that. but do you know that this is not a perfect world, so some websites embed an 300 x 200 image as 100 x 67, and the image looks really bad because the browser take very little time to display it nicely. if the browser use a more time consuming algorithm to display it, the image can look much nicer, as if it were resized using Photoshop or IrfanView. So I was only asking can HTML or CSS tell the browser to take extra time to display it. So if there is no such directive, so be it. I am not really looking for "we should always resize our images" here.

[winterheat]

With browser I included HTML and CSS, so no, not possible.

And as I said, I don't see this particular forum for a discussion about improvements to either Browser, nor HTML/CSS. There are better places to voice your opinion and advocate changes in that regard.

well I am asking whether HTML or CSS can do it. Isn't this forum for asking how to do things in HTML or whether it is possible to do something in HTML?

[c2uk]

You have been given various solutions of how you can achieve what you're looking for, Photoshop and a server-side graphic library. Here is another one using Javascript: http://www.agilepartners.com/blog/20...ng-javascript/

And your question has been answered with regards whether you can achieve it within the Browser/HTML/CSS multiple times within this thread!

And you said it right, we are web designers, not browser developers, so again, I advise you to look for a better place to voice your opinion and advocate change.

[winterheat]

You have been given various solutions of how you can achieve what you're looking for, Photoshop and a server-side graphic library. Here is another one using Javascript: http://www.agilepartners.com/blog/20...ng-javascript/

And your question has been answered with regards whether you can achieve it within the Browser/HTML/CSS multiple times within this thread!

And you said it right, we are web designers, not browser developers, so again, I advise you to look for a better place to voice your opinion and advocate change.

the issue stemmed from website of Eric Meyer, who is a CSS master.

http://meyerweb.com

the "AN EVENT APART" logo on the right looks really bad on the right hand side of the page. And I understand: we are busy people. Some time we can't do things perfectly but the computer might be able to help.

But I just found a partial solution actually: using Safari on Windows (and probably on Mac too), the image looks much better. The words are legible. If you can, try it on IE or Firefox on Windows. The image looks pretty bad. Even on Firefox on a Mac, I suspect the image looks pretty bad too.

Yeah so if Javascript can resize it better somehow, or if IE or Firefox can add an add-on. I know it is out of the HTML realm. But if HTML or CSS doesn't have such a directive, knowing what the issue is and what partial solution people can view it with can be helpful, isn't it?

the images are attached here:

on FireFox 2 on Windows

on Safari 3 on Windows

[c2uk]

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.

[Stomme poes]

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.

[winterheat]

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.

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.

[winterheat]

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.

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.

[c2uk]

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