Hacker News Reader

Comment by disbelief | Hacker News Reader

Could someone explain to me why this is better/easier than just using CSS media queries myself?

Also:

> Whatever image you put inside the src of the image element will render by default. Then, the Javascript will progressively load larger images based on media queries that you pass into the data-interchange attribute.

So, for larger screens, there would be many requests for a single image? For example, if I drop a mobile-optimized image into the src and then view the page on a retina macbook, wouldn't this mean many image requests from the "mobile" version up through "full-size retina"?

View on HN

I'm guessing looks like it's built to solve the problems of serving HD images via a CMS?

For static hand coded images media queries will suffice but once you start dynamically serving images it gets tricky fast, especially when faced with users that don't know/care about HD images issues.

Combined with some code to scale images to the correct size on the fly (with caching, etc) I think it could be pretty useful.

Poor wording - we match the media queries and the last valid match is loaded, not each in sequence. We'll make that clearer.

So, for larger screens, there would be many requests for a single image?

The demo page doesn't seem to work that way. In fact, if you resize the window gradually, it won't load new images at all. You have to wait for a second after resizing for it to bother loading the new image.

I see! So maybe it decides which media-query it should be using and then makes the one necessary request?

Correct.

If you take a look at the Foundation source, the Interchange event responsible for swapping in/out images is setup with a 50 millisecond throttle. That's probably why you're seeing a slight delay. Additionally, they seem to also cache previously-loaded images to speed up future replacements.

From a practical standpoint, this is designed to address device-specific uses where the screen-width is less-likely to experience size-adjustments than a desktop browser, so you'll probably see the initial HTTP request for the small-resolution image, followed by the HTTP request for the appropriately-sized image for whatever device/screen you're using, and you're less-likely to see the same number of requests made while wildly resizing a demo page.

Reply on news.ycombinator.com