问题
Generally when doing responsive / mobile first design we use media queries to send different CSS to different screen sizes.
A good design may include the default (small) resolution not having any images.
This is easy to achieve when using background-image in CSS for your images but I can't imagine how you would achieve this using semantic <img> tags.
- Can this be done with HTML?
- Is it acceptable to use CSS for all your images?
Personally I like having no images for my default small screen size, however I find it very ugly to not send any images to the HTML-only version for desktops.
Note: JavaScript solutions are not acceptable.
Reference image
回答1:
No, it is not normally OK to use CSS for all your images. The image in this case is a piece of data, just like the title and description, and semantically should use <img>. With too loose a definition, you could consider all images as optional and thus render <img> obsolete. "Might not display on all screens" is not a reason not to use an <img> element.
One way to look at it, is CSS background-image is for making elements prettier. The element should still be functional without background-image, just not as pretty. If the element isn't visible because it has no image, it's not a valid element in the first place.
CSS display and positioning properties are for moving stuff around and hiding stuff for different displays.
The proper way to do this is display: none;, assuming most browsers don't download the image. If browser support is weak, resort to a hack, like background-image or even dynamically loading with Javascript.
回答2:
This is a pure css solution (not sure on the browser support). It doesn't use an img tag but would still be semantic if the content makes sense without the image.
Documented here: http://www.w3.org/TR/CSS2/generate.html
Example here: http://jsfiddle.net/davetayls/SuhDj/1/
Personally I prefer the route of adding descriptive links to view an image and then using JavaScript to load the correct image if needed ( https://github.com/davetayls/jquery.lazyLoader ). This way someone on a very small screen/slow connection/no-js can still access the image if they want to in a natural manor. If the image url is embedded in a css file somewhere it's no use to the user.
回答3:
Regarding the option of providing descriptive links and using JavaScript to load the image for screens that fit your criteria:
Lazyloader.js is built for this. A quote from the readme: "If you want to dynamically load images dependent on the screen dimensions ..." and it proceeds to help you with the scripting for that.
Nettutsplus put together a helpful rundown of lazyloader and several other nice scripts built for things like this.
来源：https://stackoverflow.com/questions/8970521/how-to-not-send-images-to-mobiles-in-a-semantic-manner