Download
A Responsive Images approach that you can use today that mimics the proposed picture element using spans, for safety sake. Picturefill works best in browsers that support CSS3 media queries. The demo page references (externally) the matchMedia polyfill which makes matchMedia work in media-query-supporting browsers that don't support matchMedia. matchMedia and the matchMedia polyfill are not required for picturefill to work, but they are required to support the media attributes on picture source elements. In non-media query-supporting browsers, the matchMedia polyfill will allow for querying native media types, such as screen, print, etc. If you only want to have an image show up at certain sizes, and not show up at others, you will need to use a transparent placeholder gif. There are currently no known unsupported browsers, provided that you use the markup patterns provided.
Features
- A responsive image polyfill for <picture>, srcset, sizes, and more
- Picturefill natively supports HD(Retina) image replacement
- Picturefill supports a broad range of browsers and devices
- Picturefill works best in browsers that support CSS3 media queries
- Picturefill.js compresses to around 498bytes (~0.5kb), after minify and gzip
- You can target CSS styles specific to the active image based on the breakpoint that is in play
Project Samples
