How to not send images to mobiles in a semantic manner
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
- 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.
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
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