Resizing & Scaling Question

[shane18]

I noticed if I have Firefox scale a 500x500 image to 40x40 it looks shitty.... but if i re size the image to 50x50 then have firefox scale it to 40x40 or 22x22 it looks sharp... why?

[haku]

Browsers aren't made to resize photos. They are made to display photos at their actual size.

 

Why are you using using images larger than they need to be displayed? It's just going to slow down your page loads.

[shane18]

Well, I'm not anymore... i was just wondering why scaling a image makes it look SHITTY, when if u resize a image it looks crystal clear... what makes scaling different from resizing?

[haku]

Browsers aren't made to resize photos. They are made to display photos at their actual size.

 

I'm guessing you are using photo editing software to re-size the image. Photo editing software is made to resize images. Browsers aren't. Simple as that really.

[shane18]

well isnt scaling and resizing an image different in general? i heard if u scale a image to a smaller size, it will have less quality then if u resize the image to a smaller size... isn't scaling just a simpler and faster way to resize something? is that why the image quality is worst? does resize do way more steps to insure quality while scaling does just enough to get it done? is that what causes the quality difference?

 

don't the terms "scaled to" and "resized to" mean different things?

[haku]

Lets say you have an image that is 200px by 200px.

 

In your css, you set the image to:

height:100px;
width:100px;

 

You have scaled the image to 100px by 100px.

 

Then you open the image up in photoshop (or some other image editing program) and you re-size the image so that at it's full size, it is now 100px by 100px.

 

You put the image on your site, and in your css you set:

height:100px;
width:100px;

 

You have resized the image to 100px by 100px.

 

In the first case, you are forcing the browser to show the image at a different size that the actual image exists at. Browsers are not image editing programs, and therefore it may not look nice. Besides the fact that you are forcing the user to download more data than they need, since the image is four times the size of the image they need, browsers have to use whatever algorithms they have to show the image at the size you have forced it to be. Browsers aren't made to do this well, and to make them do it well would require a heavier browser, which is pointless since images should be uploaded at the size at which they are to be displayed.

[gizmola]

At the end of the day, they are one in the same.  There are different algorithms for taking a large image and shrinking it.  The result is highly dependent on the nature of the original.  Photoshop provides "resampling" with several different algorithms available when you want to increase or decrease the size of an image.  For photos (bitmap) images, the standard technique used in photoshop is called "bicubic" which implements a complex sampling algorithm, however, you can dumb it down to the types of techniques used by browsers, via the "nearest neighbor" or "bilinear" algorithms which basically just look at neighboring pixels.  Chances are the browsers are simply implementing a nearest neighbor algorithm which is why the downsampled images look bad.

 

 

[shane18]

thanks for clearing that up

[shane18]

I just found something that I think I should add... the browser re sizes images perfectly... the php code i used to crop the image was set at default quality of 75%... so the image looked crappy regardless.. so this post was all over a mistake.. there really was no problem WOOT!

[haku]

Now it all makes sense. It wasn't very clear for two reasons:

 

1) You didn't actually say that you had a problem. You just seemed to be asking a question.

2) You left out that huge bit of information that you were using a PHP resizing script. It sounds like you weren't even scaling with the browser at all - your server was resizing the images.

 

If you had have done done number one and mentioned number two, your problem could have been resolved a lot less painfully.