11

It's always been looked at that using width/height attributes on images which aren't what the original image actual is is a bad idea. It could mean pixalated images or download sizes bigger than nessary.

But, is this still an issue? I wouldn't suggest up-sizing photos, but downsizing shouldn't be an issue provided that its not too much of a difference from the original and keeping to scale.

For example, I have a photo that is 600x400 and I stick a width of 400px on it. Most modern browser scale the image down and it looks like rendering is still decent.

So, what is everyones view on this?

David
  • 735
  • 8
  • 12

3 Answers3

10

Don't worry about the scaling (most browsers will make scaled images look just fine, in my experience), worry about the size of the payload you've sent to the end-user.

Sure, you could argue that you're only wasting a tiny amount of bandwidth on both ends for those extra pixels you're sending with no intention of using, but there's a time cost too.

For every image you send at a size that's above what's needed you add a tiny bit of delay to the page load for your user. For websites wtih only a couple of images this won't be an issue, but for a site with a large number of supporting assets you'll start to add noticeable delay, and delay will cost you money.

Also, with regards to the tiny bandwidth cost, as your site's traffic goes up, so will the tiny bandwidth cost.

So, save your company money and spend the 30 seconds you'll need to re-size the image yourself! :)

Ed James
  • 3,489
  • 3
  • 22
  • 33
2

As always, do your benchmarking, but unless the app is really popular/mission-critical, I wouldn't be too worried about downsizing from 600 to 400 if you're in a situation where you need to change the width frequently. If it's a one-off, sure, run convert -geometry 400x photo1.jpg photo2.jpg, but if it's an app you're iterating fast on, there are probably more important things to worry about, even within the realm of performance. e.g. latency; pre-emptively loading images, for example.

Image size can be important on mobile devices, where large image sizes have the triple-whammy effect of loading slowly (mobile broadband), taking longer to render (lower-grade hardware), and - once rendered - not being fully visible at high resolution anyway.

You might also want to look into responsive images. There's a lot of work people have done, for example automatically downsizing - and then caching - images on the server is a good approach if this comes up a lot.

mahemoff
  • 503
  • 2
  • 10
2

The issue is the payload, the browser will render is just about fine in any size (esp smaller sizes that you are talking about)

For a high volume site, even single bytes matters. You don't want to send unwanted data.

Speaking of bad Idea, it is not really a bad idea to adjust the width/height by a few pixels or may be 10 or 20 pixels. But it is a very bad idea if you are shrinking a large image to a thumbnail :)

TheTechGuy
  • 1,035
  • 1
  • 8
  • 16