What's the difference between scaling an image down to 150px in Photoshop and then using that in HTML:

<img src="blah.png" />


Using a 500px image and then using that in HTML:

<img src="blah.png" width="150px"/>?

Is there a quality difference?


Interesting, you almost can't tell the difference these days1. It looks good in Chrome/IE, but Firefox doesn't scale as well. Anyway, to add to Mike's point about bandwidth:

  • Page load time suffers greatly with large images. One image over a T3 would be no big deal, but an ecommerce site on a low bandwidth smartphone would be punishing.
  • You waste server bandwidth, which can cost you money (if you never serve the larger pic).
  • You waste user bandwidth, which can cost them money.

(1) 500x500 forced to 150x150 on left, 150 native on right

  • 1
    The Chrome/IE vs FF applies more to down-sizing, stretching is about equally blurry on all three. Interestingly, the quality difference is very obvious when you zoom in. – ssube Sep 6 '10 at 4:30

Photoshop allows you to choose the scaling method, such as 'bicubic sharper' which is often more suitable for reducing image sizes than standard 'bicubic' resizing.

If you do browser scaling, the quality will vary between browsers and you'll have no control about that.

Additionally, if you are always doing browser scaling on the image and never display it at its full resolution, then you are wasting bandwidth.


Yes there is. Most browsers do not have good image resampler like Photoshop has. Images scaled down in HTML will look slightly blocky, require more bandwidth, memory, and cpu usage.

It is best practice to use resampled images from Photoshop to be displayed at native resolution.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.