CODEWITHSUNDEEP
cssresponsive-designimage
Baumr
Baumr

Reputation: 6284

Retina photograph support for responsive websites

I've come across a few scripts for serving retina photos to devices with a 2× pixel density:

(I'm ignoring CSS background images in this, only concerned with img elements that are photographs — ignoring graphics as I try to serve those as SVGs.)

I want to make sure that devices that support retina images get the full spiel, and that low-bandwidth (i.e. small screen) ones don't (and so that they don't have to download both).

Which solution follows best-practice for a mobile-first and semantic approach?

It seems that responsive images still do not have a unanimous best solution (regarding bandwidth, etc.), and coupling this with retina images makes it more complicated...

I'm asking because it seems that the Retinise.js documentation implies that because it uses data-src, only the needed images is downloaded — does that mean that since Retina.js uses src it downloads both?

Upvotes: 2

Views: 434

Answers (3)

Michael Cook
Michael Cook

Reputation: 276

I've just started using ZURB Foundation Interchange and I'm really loving it so far. http://foundation.zurb.com/docs/components/interchange.html

You use a data-interchange attribute with an empty src tag, then interchange writes in the correct src location based built-in or custom @media queries.

Here's an example:

<img data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]">

Upvotes: 0

dahliacreative
dahliacreative

Reputation: 441

I authored retinise.js as a lot of retina solutions out there actually serve up both images meaning massive bandwidth usage for the user, by using a custom data attribute you stop the browser downloading the original image.

My plugin does not however take into account the users connection type, e.g. 3g vs. WiFi as there is currently no way of detecting this other than doing a simple speed test, which you could modify my plugin to include.

I've used the project on several sites I've authored now, all with good results :)

As for older browser support, It will work as long as JS is enabled as the data-src is replaced with src attribute.

For support for non JS browsers you can just use a no script tag, as described in the documentation.

Upvotes: 4

danwellman
danwellman

Reputation: 9273

I'm not sure that responsive images don't have a best solution, max-width:100% has always worked well enough for me.

data- attributes are new to HTML5 and allow you to add any custom data to an element without abusing the rel attribute. Bootstrap makes heavy use of data- attributes, as does jQuery Mobile.

Yes, I think Retina.js does (or at least used to) serve both sizes of images to devices, but only one is shown. If Retinise overcomes that I would say that was a massive benefit

Upvotes: 2

Related Questions