Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

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

<img src="blah.png" />

versus

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

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

Is there a quality difference?

share|improve this question

3 Answers 3

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.

share|improve this answer

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.

share|improve this answer

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) 500 -> 150 on left, 150 native on right

share|improve this answer
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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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