3

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

Example image

Community
  • 1
  • 1
Raynos
  • 166,823
  • 56
  • 351
  • 396
  • 1
    I think you're restricting yourself too much. You don't want to use conditional CSS, and you don't want to use Javascript, but you want it to be possible using HTML only? Hm. I don't think that's possible. Anyway, my take on the semantics would be that images served up with `img` have a specific relevance to the page, that is, you just don't leave them out when sending the page to a smaller screen. CSS on the other hand is meant for decoration, and therefore it's semantically OK to use different CSS for differently sized screens. – Mr Lister Jan 23 '12 at 11:06
  • 2
    @MrLister I see. `` is for image content that is part of the page and not optional. background images in CSS are for decorations and additions that are nice to add but not neccessary. – Raynos Jan 23 '12 at 11:13
  • Is adding a css rule `img { display:none; }` an option? It will not display images, probably browsers will not ever attempt to download it. – Sergiy T. Jan 23 '12 at 11:24
  • @SergiyT. can you give any reference to "browsers will not attempt to download it". Preferably a mobile benchmark on which browsers down images that are hidden. It's a problem if browsers download the images. – Raynos Jan 23 '12 at 11:25
  • @SergiyT. They will! They will download all content like that, even if it won't be displayed. – Mr Lister Jan 23 '12 at 11:27
  • No, i can't provide you with answer. Some articles tell that browsers will download images (and even background-images as well http://www.html5rocks.com/en/mobile/mobifying.html), some tell that it depends (http://aaronmentele.com/2012/01/15/media-queries-for-mobile-browsers/ and http://aaronmentele.com/2012/01/13/sirens-2/) So there is a lot of uncertainty here. – Sergiy T. Jan 23 '12 at 11:55
  • @SergiyT. [new question about browsers downloading images](http://stackoverflow.com/questions/8971312/what-browsers-download-hidden-images) – Raynos Jan 23 '12 at 12:05
  • @ThinkingStiff link to question about browsers downloading image implies most browsers download image or it's generally too risky. – Raynos Jan 23 '12 at 21:42
  • @Raynos I moved to a answer since the comment did answer both your questions somewhat. – ThinkingStiff Jan 23 '12 at 21:45

3 Answers3

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.

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
  • Note that browser who _do not download_ the image are making a _non compliant optimization_. Compliant browser _should_ download the image. – Raynos Jan 23 '12 at 22:01
  • @Raynos Just checked that list. It has iPhone iOS 2-5 and a bunch of Android. It seems to be the direction they're going. Where's the *should* link? Curious about the spec. – ThinkingStiff Jan 23 '12 at 22:03
  • [img element](http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#the-img-element) "User agents may obtain images immediately or on demand." I am wrong. It's ambigious whether hidden images _should_ be loaded on demand, however. – Raynos Jan 23 '12 at 22:18
  • 1
    @Raynos It looks like most mobile browsers have, smartly IMO, taken the on-demand route and are forcing the spec to a *may* for hidden images instead of a *should* (if that is even implied in the specs). – ThinkingStiff Jan 23 '12 at 22:23
0

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.

Dave Taylor
  • 1,931
  • 2
  • 17
  • 30
  • The same can be done with media queries and background-image as mentioned in the question. The real question is can this be achieved with ``. Note the option of using js to load images and having no-js have links to image resources is also a good strategy – Raynos Jan 23 '12 at 21:13
0

Regarding the option of providing descriptive links and using JavaScript to load the image for screens that fit your criteria:

  1. 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.

  2. Nettutsplus put together a helpful rundown of lazyloader and several other nice scripts built for things like this.

David Cochran
  • 54
  • 1
  • 9
  • This should be a comment to [Dave Taylor's answer](http://stackoverflow.com/a/8978557/177710). – Oliver Jun 26 '15 at 10:17