I used to be a real nitpicker when it came to preparing images for the web. I’d laugh at people using large images in web pages, showing them in a smaller format by setting the width and height properties.
In the days before broadband was everywhere it was bad karma to do this, because a large image file would take a long time to download. You needed to prepare the image at the size you were going to be displaying it. Nowadays, things are a little different.
A client asked me recently to propose a new layout for a page that had a fixed grid. Unfortunately, their CMS could was limited to a couple of image sizes that were a complete mismatch with said grid. So I used CSS scaling to get them to fit. Unfortunately, the client wasn’t convinced this was a feasible technique to use. That’s why I did a few quick tests to see if using scaled images in a web page would slow down rendering.
A quick test
I created a page with 150 random images on it. Fifty of them were 24bit PNGs, another fiftly were JPEG and the rest were 8 bit GIFs. Next, I created a copy of that page and set the CSS size properties for the images to a lower number, scaling all images to 61.5%. I then used Google’s Speed Tracer extension for Chrome and Yahoo’s YSlow for Firefox to see if there would be any difference in page load and render times.
No difference whatsoever
The results were pretty clear. Even with 150 images on the page, there was absolutely no difference in page rendering times in Chrome. Both pages finished rendering in around 4:10 seconds. In Firefox, the results were much more erratic, but both pages averaged at around 6.5 second. In both cases I didn’t worry about caching, since I was interested in differences in rendering speed, not download speed.
So there you have it. It may still not be 100% good karma, but to overcome design obstacles, using client side scaling isn’t as bad as it used to be. If you need a few images to fit that you can’t prepare or resize on the server, you won’t have to worry about it slowing down your page. However, actually scaling an image usually makes the file smaller, so if you can you still should.