Images resized by browser look pixelated

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?

:sick: :sick:

That’s just the way modern browsers render images

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.

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.

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.

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.

:rolleyes: :rolleyes:

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.

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.

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?

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.

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.

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.

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.

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.

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?

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:

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.

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