Steps to reproduce the issue

• Activate Lazy Images
• Activate any theme that outdents images via JavaScript (e.g. Independent-Publisher-2 or TwentySixteen)
• Watch posts with big images within the article (> 1100px width)

What I expected

Images should be "outdented", breaking out of the page width as the overall viewport is big enough to support this.

What happened instead

Images are not "outdented", stay within given article width.

Additional Notes

The reason for this is that most themes only outdent once at the load or ready event and even then only look at the image width given by the DOM API.

I was able to fix this by creating a child theme of independent-publisher-2, adding a lazyOutdent method that was called by every lazy loaded image's load event handler (this also enabled me to add CSS transitions), but this might have the side effect of being called on any load and not just the one triggered by the lazy load - a JS hook might fix that.

Also using the naturalWidth (or - as a fallback - offsetWidth) DOM attribute was necessary to get the correct sizes of an image as supplied by srcset attributes to detect if an image will actually be big enough to be outdented after the browser selected the most appropriate one from the source set (width reports wrong values in that case).

PS: You might also want to look at this lazy loading technique which makes the use of <noscript> tags redundant by using an empty image for the srcset attribute, yet keeping the src intact for old browsers and making this solution better for sharing widgets. Also uses a data URL instead of an actual 1x1 pixel GIF to reduce HTTP overhead: https://github.com/ivopetkov/responsively-lazy