We help IT Professionals succeed at work.

Responsive Web Design Images

s8web
s8web asked
on
How do you handle images in your responsive web design templates?

I've noticed that unless I set the image as a background image of a container, I cannot prevent larger images from being called regardless of the media query. display:none; doesn't get the job done. This seems to contradict the whole point of responsive web design.

What's your method?
Comment
Watch Question

Top Expert 2013

Commented:
I normally don't pay much attention to fads but if you want know how its being implemented you should probable
start HERE



Cd&

Author

Commented:
Thanks Cobol, that's helpful as usual.

I have spent many, many hours researching this topic, using Google and *gulp* other search engines. I am interested in the practices of the Experts Exchange community. You should know by now that I don't ask frivolous or lazy questions.

Radio, color television, computers, and the internet were all though of as fads at one time or another. Serving up content based on the capabilities of the client device probably isn't going to be a fad. Nor is  the advertising/marketing industry that pays some of us.
Top Expert 2013

Commented:
I was not suggesting you were asking a lazy question, I was just insuring that you were aware of how much stuff is out there.  I'm not saying that mixed media and support for a variety of devices are fads.  I am following my normal approach of being a late adopter.

I don't to have to go back and redo things because I develop something while chaos reigns.  Right now we have a multiplicity of operating systems and browsers.  Too much is proprietary, especially when it comes to phones.  I've been through these cycles before.  eventually it will settle down to a small number of players who will sit down together and develop common standards.  Until that happens I will use best practice to support what I can within existing standards; without proprietary hacks, and without committing to unproven development methodologies that may or may not be supportable in the long term.

The net result of following that route in the past is that I am developing new stuff while others are going back and trying to fix things that quit working correctly.  That is what makes me a dinosaur; I'm not in any hurry to swim in the swamp until the alligators are removed.



Cd&
Commented:
Unfortunately, this seems to be a persistent problem that doesn't have a good solution. The closest, albeit cumbersome css3 solution is to set the mobile images as a background image in the container and only serve up the <img> as the larger image to clients with a non-mobile resolution. This affectively solves the problem, but uses a background image as the solution. Which is what I was attempting to avoid. I have decided to develop a server side solution instead.

Author

Commented:
No good solution, as of yet. Maybe css4 :)