Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
How easy it would be to do Responsive Images in HTML and CSS if worked.
<!doctype html>
img:after { content: attr(data-small url); }
@media screen and (min-width:400px) {
img:after { content: attr(data-medium url); }
@media screen and (min-width:600px) {
img:after { content: attr(data-large url); }
<img data-small="small.jpg" data-medium="medium.jpg" data-large="large.jpg" />

This comment has been minimized.

Copy link
Owner Author

commented Jul 18, 2014

Alas, the url type is not supported and browsers still haven't decided how :after should work on an img.


This comment has been minimized.

Copy link

commented Jul 18, 2014

"Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML)."

Also, waiting until the CSS defeats the purpose of pre-loading - which Steve Souders calls "the single biggest performance improvement browsers have ever made" - which happens as soon as the browser sees an img, even before DOM is constructed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.