The more I read about solutions like this, and the more I look into solutions to the whole “responsive image” problem, and the more I see people poke holes in the solutions, the more I start to wonder if maybe we’ve defined the problem wrong.
If an image is coming in through an img tag, then isn’t part of the content? Arguably it’s part of what the user cam to the page to see. So why should we give less of this content to the mobile users?
Less Bandwidth Then why aren’t we sending them only half the text too? The user is here for the content. If the image is worth the bandwidth of including, then it’s worth the bandwidth of including the whole thing. Just make sure it’s properly compressed so you’re not wasting the desktop user’s bandwidth either.
Less Screen Spaces This applies to the text as well. Only the first couple paragraphs fit on the screen. Until the user scrolls. Just like they don’t see the whole image until they zoom. Even if they don’t zoom, a retina display (or equivalent) will still show every pixel of that image until you scale it below 50%.
So if the 320 pixel-wide image is enough to get the point across, why are you wasting the bandwidth and screen real-estate of the desktop user with the larger image?
I think the real problem might be that there’s still a lot of images out there that are tightly related to the content, but at the end of the day are really just decorative. There to break up the text, but not to illustrate a point.
I’ll probably catch a lot of flack for this, but I’m starting to wonder if the solution to the problem of these images that walk the line between content and decoration is to use code that does the same: smart and careful use of inline styles. Set almost everything about that type of image up using the stylesheet, and then include the actual image URL in a style tag, as part of the content and controllable through media queries. Or maybe something similar using the new data- attributes. Also, not a word about this making redesigns harder, these were img tags a minute ago.
Mike Gossmann
The more I read about solutions like this, and the more I look into solutions to the whole “responsive image” problem, and the more I see people poke holes in the solutions, the more I start to wonder if maybe we’ve defined the problem wrong.
If an image is coming in through an img tag, then isn’t part of the content? Arguably it’s part of what the user cam to the page to see. So why should we give less of this content to the mobile users?
Less Bandwidth Then why aren’t we sending them only half the text too? The user is here for the content. If the image is worth the bandwidth of including, then it’s worth the bandwidth of including the whole thing. Just make sure it’s properly compressed so you’re not wasting the desktop user’s bandwidth either.
Less Screen Spaces This applies to the text as well. Only the first couple paragraphs fit on the screen. Until the user scrolls. Just like they don’t see the whole image until they zoom. Even if they don’t zoom, a retina display (or equivalent) will still show every pixel of that image until you scale it below 50%.
So if the 320 pixel-wide image is enough to get the point across, why are you wasting the bandwidth and screen real-estate of the desktop user with the larger image?
I think the real problem might be that there’s still a lot of images out there that are tightly related to the content, but at the end of the day are really just decorative. There to break up the text, but not to illustrate a point.
I’ll probably catch a lot of flack for this, but I’m starting to wonder if the solution to the problem of these images that walk the line between content and decoration is to use code that does the same: smart and careful use of inline styles. Set almost everything about that type of image up using the stylesheet, and then include the actual image URL in a style tag, as part of the content and controllable through media queries. Or maybe something similar using the new data- attributes. Also, not a word about this making redesigns harder, these were img tags a minute ago.