Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Idea for CSS-only responsive images using CSS3 generated content and attr() function. No browser implementation as of May 2011
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS responsive images</title>
/* Doesn't stop original source image being
downloaded too */
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
<img src="image.jpg"

This comment has been minimized.

Copy link

hcarvalhoalves commented May 19, 2011

Clever. I wonder if a better attribute could be used instead of "data-src-600px", or maybe an alternative markup that makes clear what is delivered to what media size.


This comment has been minimized.

Copy link
Owner Author

necolas commented May 19, 2011

You could use whatever data-* attribute you find best.

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.