Engadget's Scalable Images

Everyones favourite gadget site Engadget has just redesigned. The new design is stretchy and liquid width. That’s not all: their images scale-to-fit too using the following markup:

img.biggie { width: 98%; max-width: 860px; }

On the downside, letting the browser do the scaling means the image will be resized using nearest neighbour interpolation as opposed to bicubic interpolation (at least on the browsers I’ve tried). The result is jaggies in the resized image. This is the main reason I chose to not do this when I redesigned a while back.

Penny for your thoughts? Are scalable images an improvement or not?

9 thoughts on “Engadget's Scalable Images”

  1. I think it can work, if your site has the right kind of images. For Engadget, if they’re mostly posting reduced screenshots, then any interpolation problems are less noticeable than for other types of image. That said, their logo doesn’t fare too badly.

    I found when trying this technique that it really falls down at 800×600 (the resolution, not the browser size) – not an issue for them, I guess.

  2. Joen says:

    I think it can work, if your site has the right kind of images. For Engadget, if they?re mostly posting reduced screenshots, then any interpolation problems are less noticeable than for other types of image.

    Excellent point, and you’re right on the spot. If they choose the images they apply liquid width to carefully, it’ll work.

    On a sidenote, I just got an idea to create a javascript that’ll search for any image with a specific class, and replace those images with a Flash container that loads that image in. By doing that, you could use Flash’s built in JPEG smoothing to even out the jaggies.

    Then again, I think such a script would annoy people more than it’d benefit them.

  3. You’d also fall foul of FlashBlock and similar plugins.

  4. Joen says:

    Indeed. Now if only Firefox could build in some proper image interpolation in their scaling…

  5. If only indeed…

    Silly interpolation is what’s keeping me from even considering it.

  6. Matt says:

    AFAIK, Safari uses bicubic interpolation to render scaled images. Try it out.

    It’s a wonder that no other browsers have this feature, it would certainly make things a lot easier.

  7. Daniel P says:

    Well..

    I kicked it up in IE and the pictures don’t come out stellar there.. They’re alright, for sure, but not as nice as in other browsers. They look just fine in Firefox, for all that I’ve mentioned. Also, in IE the 1440 px max-size on the page fails (of course, it’s just plain CSS max-size..) As well as the image size min-size..

    Of course, it doesn’t bother ME.. But I wasn’t aware people were willing to compromise IE support on that popular of a web site.. I sure hope their user agent statistics support that decision.

  8. Tristan says:

    Just FYI — when I read this, I immediately thought of a way Zenphoto could auto-resize the images when the browser window was resized.

    Just need to go through the image array on resize (a JS event, easily capturable) and on load, and get the images’ actual sizes, alter their URL’s based on that, and reset their sources, thereby loading them at the ideal native resolution.

    But yeah, browsers really should be able to. Maybe someday.

  9. Joen says:

    Just FYI — when I read this, I immediately thought of a way Zenphoto could auto-resize the images when the browser window was resized.

    Wow that would be a really really cool feature!

    Something like <img src="/zp/?/images/myimage.jpg" class="scalable" /> ?

    But wouldn’t it eventually cache QUITE a few thumbnails ? Maybe Add some “closest size match” so every image isn’t cached for 100 different screen sizes?

Comments are closed.