6

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?

Gareth
  • 19,080
Devoted
  • 925
  • 3
  • 8
  • 13

3 Answers3

8

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

Chindraba
  • 2,058
hyperslug
  • 13,806
4

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.

Mike Fitzpatrick
  • 17,427
2

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.

AttackingHobo
  • 335