filamentgroup/Responsive-Images

Accommodate IMG Width/Height Attributes

HughxDev opened this issue · 2 comments

While I'm sure it was a conscious decision on your part to leave them out, as they effectively "lock in" image resolution even after the replacement, it may be beneficial to allow authors to include explicit width/height attributes in their markup, as suggested by the W3C's Mobile Web Best Practices and Google's Let's make the web faster documents, so as to avoid latency caused by page re-flow.

The attributes could be overridden with the correct dimensions for the large version as part of the replacement process—or removed altogether, if operating under the assumption that larger screens correlate with more capable machines, which may not always be true; but either way, it'd be easier on mobile users.

Hmm, yeah I'm not sure. The first use case for this script was to make responsive web layouts' images more "responsible" on mobile, and a true responsive layout would use fluid images (no width/height attrs and max-width: 100%).

That said, I realize this can be used in all sorts of situations that aren't using responsive layouts, and the benefits are just the same. I'll consider this one, though I'm not sure how to pull it off cleanly from a technical standpoint.
Thanks!

just set image dimension in CSS by using media query. rendering CSS cause reflow anyways so there should not be any extra latency then the one whats already necessary