I am having an issue with IE8 were picturefill doesn't appear to be working, I thought it was my code but it also doesn't function as expected on the demo. Is this a known issue?

Proposed breakout:

• picturefill.core.js : picture markup polyfill with media and srcset attribute support
• picturefill.sizes.js : extension with sizes attribute support (with feature detect?)
• picturefill.type.js : extension with type attribute support

Any others?

Now that srcset has landed in browsers and picture is coming soon, it'd be a good time to get Picturefill back to its original goal as a simple polyfill for the standard markup.

This thread can be used for planning that out, as there are a number of things to consider. Here are a few off the top of my head:

• IE9 (maybe 10 too, can't remember - and desktop and mobile versions) does not recognize source elements if they don't have a video or audio element parent. We'll need to find a way to work around this one - ideally without changing the markup pattern to accommodate, but that may not be possible. Here's how I worked around it in the past (note: gross) https://github.com/scottjehl/picturefill/tree/original-picture-markup
• I think it'd be good if we refactor a bit to get the code more modular and extensible.
• I think it might be nice if source[srcset] handling was written as an excludable extension to Picturefill, so people can include it in the build if needed.

Also, we should get this thing running on grunt, updated on Bower, and unit tested.

Woo!

• .call() is more expensive than just calling the method.
• All of the three methods were already used normally elsewhere, this commit will keep it consistent.
• This will help reduce errors with object-fit-images (first note here: https://github.com/bfred-it/object-fit-images/blob/gh-pages/detailed-support-tables.md#object-fit-images--srcset)

New features:

• simple mediaqueries are now also supported in IE8
• Performance (Resize-Performance, "Scales better", Network-Performance see below)
• Does not download a new image,
  • if it has already a better candidate from the same set (maybe needs an option, some people might not understand this and think it's a bug)
  • while window is resized
• Loads new candidates in background for "smooth" Transition between candidates
• addDimensions (option)
• resQuantifier (option)
• the elements parameter can now also handle a DOM node (if an img is passed this is polyfilled, if another element is used this is used as the context)
• Mutationobserver (plugin)
• improved errormessages for bad descriptors, bad sizes and wrong source positioning

Following is the list of fixed bugs in your bug tracker by my changes.

Fixed issues: https://github.com/scottjehl/picturefill/issues/333 https://github.com/scottjehl/picturefill/issues/332 https://github.com/scottjehl/picturefill/issues/331 https://github.com/scottjehl/picturefill/issues/329 https://github.com/scottjehl/picturefill/issues/327 https://github.com/scottjehl/picturefill/issues/322 https://github.com/scottjehl/picturefill/issues/318 https://github.com/scottjehl/picturefill/issues/314 https://github.com/scottjehl/picturefill/issues/313 https://github.com/scottjehl/picturefill/issues/311 https://github.com/scottjehl/picturefill/issues/309 https://github.com/scottjehl/picturefill/issues/304 https://github.com/scottjehl/picturefill/issues/303 https://github.com/scottjehl/picturefill/issues/292 https://github.com/scottjehl/picturefill/issues/270 https://github.com/scottjehl/picturefill/issues/266 https://github.com/scottjehl/picturefill/issues/244 https://github.com/scottjehl/picturefill/issues/142 https://github.com/scottjehl/picturefill/issues/263 https://github.com/scottjehl/picturefill/issues/317

These browsers feature SRCSET natively in IMG tag but with an incomplete implementation only X no W SIZES ??? So the SRCSET attribute is removed (i assume by browser) which my lightbox-script rely on for zoom on click (I use an higher res picture then). Firefox 32.0.2 still works as expected, IOS 7.x Safari 7.01, 6.1.x, too.

Update: The SRCSET attribute is removed by picture fill. Removing the picturefill.js keeps the SRCSET and my lightbox-zoom can work with the sources provided by SRCSET.

BTW, additional pitfall: using multiple sources with W on these incomplete native implementation only loads the url from the SRC attribute (the smallest mobile / fallback img in my case).

<img srcset="logo.png, [email protected] 2x"> With the above markup and no size attributes or CSS sizing, non-Chrome browsers display the 2x image at the original size, so that it appears twice as big when on a 2x display.

In Chrome however the 2x image is displayed at half size, so that it appears to be the same size as the 1x image.

The same issue occurs with any of these too: <img srcset="logo.png 1x, [email protected] 2x"> <img src="logo.png" srcset="logo.png, [email protected] 2x"> <img src="logo.png" srcset="logo.png 1x, [email protected] 2x">

Also, with this markup a 1x display connected to a 2x device (external monitor on a Retina MacBook Pro) will load the 2x image: <img src="logo.png" srcset="[email protected] 2x">

Chrome continues to work fine in that situation though.

I'm in a situation where I cannot apply a size with HTML or CSS to constrain the 2x image to the original size, so that's out of the question. I could use max-width/height for some constraint, but if the 1x image is smaller than that size then the 2x version will still look bigger.

Might it be possible to have picturefill give notice as to when it's done?

I'm wanting to use PF instead of the background image property because - as far as I know - that property doesn't make an intelligent decisions. That is, it will use the same (often too large) background image regardless of viewport.

I've come up with a solution that fakes the background image property (at least for our purposes). It works. But feels kinda hack-y. If only there was an "I'm done, Your turn now" event or similar, that would be better / cleaner.

Otherwise, great product. It's pure #BadAss. Thanks for sharing.

Hi,

I encountered a problem in Internet Explorer 8 (and below).

When using the syntax to display retina images, no images appear in the browser.

<img srcset="http://placehold.it/300x150 1x, http://placehold.it/600x300 2x" alt="Retina" />

I don't see any errors - the code adding the src to the img tag just doesn't seem to be applied.

Here is a fiddle with the test code : http://jsfiddle.net/oilvier/VdbT4/ (I used the code from the demo site to compare with a case where it's working)

If you watch it in IE8, you'll need this link, as jsfiddle interface is not displaying well in IE8 : http://fiddle.jshell.net/oilvier/VdbT4/show/light/

Per a request from the FT, it'd be useful for them if we populated properties like window.HTMLPictureElement after polyfilling support for it.

https://github.com/Financial-Times/polyfill-service/pull/448

Worth discussing if this will cause any difficulties with how things are set up internally, particularly on subsequent runs in a page?

Currently, probably the biggest gotcha (in many cases) to using Picturefill v2+ is that it renders all images unindexible by Google. For many sites this may have serious SEO implications, so I think this should be clearly stated in the README. This same issue obviously also means anybody with JavaScript disabled will see no images at all, so again, I think this deserves adding.

As pointed out to me recently by @yoavweiss, this project's (THANKFULLY!!) no longer needed and can be archived.

I'll go ahead with that shortly but wanted to make a note of it here first for anyone listening. Thanks!