picturefill

If you primarily care more about responsive images than about lazy loading, the Picturefill polyfill (https://github.com/scottjehl/picturefill) is a great option. It's a strict polyfill of the picture / srcset standards, which already have broad, native browser support: http://caniuse.com/#search=picture|srcset

<picture> is available in about half of the shipped browsers (http://caniuse.com/#search=picture) and there's a robust polyfill available: https://github.com/scottjehl/picturefill

All links in above txt: 1. The repo for the boilerplate is: https://github.com/MozaikAgency/wp-theme-bootstrap 2. The helper mentioned: https://github.com/MozaikAgency/wp-theme-bootstrap/blob/mast... 3. Code demoing how the helper would be used: https://github.com/MozaikAgency/wp-theme-bootstrap/blob/ccdf... 4. Resp images polyfill - PictureFill: https://github.com/scottjehl/picturefill 5. lazy-loading content js lib - lazySizes: https://github.com/aFarkas/lazysizes 6. object-fit polyfill - Object-fit: https://github.com/anselmh/object-fit 7. Vote for object-fit to be included in IE: https://wpdev.uservoice.com/forums/257854-microsoft-edge-dev...

The repo for the boilerplate is: https://github.com/MozaikAgency/wp-theme-bootstrap The helper mentioned below: https://github.com/MozaikAgency/wp-theme-bootstrap/blob/master/theme/library/class… Code demoing how the helper would be used: https://github.com/MozaikAgency/wp-theme-bootstrap/blob/ccdfb983676a94b5ff74e9ad43… Apart from the core feature of the theme starter, which is the robust build process, the theme boilerplate also comes with a small but growing library of helper classes for developing modern themes with WordPress. The latest addition to this library is a small responsive images/background-images class which leverages the responsive images spec (polyfilled via picturefill (https://github.com/scottjehl/picturefill)) and the WordPress custom media sizes to make it a little easier to implemen

There's always a polyfill: https://github.com/scottjehl/picturefill Considering many HTML5 features and related JavaScript APIs can easily be made to work in older browsers using polyfills, many relatively larger sites have been doing this for lots of things (HTML5 block elements in IE<9, for example).

This is a horrible suggestion. Stop being careless with your users' bandwidth. Assuming that every client should get the highest-resolution (and thus highest-bandwidth and highest-memory-cost) assets is just lazy. Use Javascript. Something like https://github.com/scottjehl/picturefill works beautifully and results in only one request per asset, with a noscript fallback. It's more markup, which is kind of a pain in the ass, but it means that the right clients get the right assets and you don't end up destroying your poor EDGE and 3G customers because you decided they needed a 2400x1200 splash image. Let's not forget that a "retina" image imposes a 4x memory cost on the client - image data has to be decompressed to be displayed. So, your user on their mobile phone with 512mb of RAM is going to have a terrible experience when your website is

James Duncan Davidson - noted photographer and software developer - has played with image delivery for Retina quite a bit. He details much of it on his blog: http://duncandavidson.com/blog/2012/08/retina_ready Essentially he currently uses Picturefill (https://github.com/scottjehl/picturefill). From Davidsons' blog: "It’s a compact bit of JavaScript which supports a syntax that mimics the Picture Element Proposal. In a nutshell, it uses CSS media queries to sort out the most appropriate image to use out of a set." Looks promising.

I recently heard about picturefill, it looks pretty cool to me! https://github.com/scottjehl/picturefill

This looks like an interesting alternative to Scot Jehl's picturefill (https://github.com/scottjehl/picturefill). Obviously they're not entirely analogous in their intent, but for the purposes of serving device-appropriate images, they seem to be.