How to not send images to mobiles in a semantic manner


Tags: html,css,image,responsive-design

Problem :

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



Solution :

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.


    CSS Howto..

    CSS: how to make a DIV with display: table-celll extend 100% in width

    How to select span element inside multiple div classes and id's?

    How to align like-buttons on my website between
    elements and put a white background to them?

    How to change css from javascripts

    How to select a css class as selected dynamically in mvc

    How to put borders to
  • onclick in css Tabs
  • background image not showing on nested

    What is the problem with Visual Studio.Net's “absolute positioning”, and how is that problem fixed by CSS's “absolute positioning”?

    How to simulate pixel ratio to test media queries with Google Chrome or Firefox on Windows?

    How do I use CSS to reposition this image?

    How can I do html multi elements list with type attribute?

    CSS: How to fill a dynamic container that contains fixed sized elements?

    How to convert a JSON object (created by jquery-css-parser) back to valid CSS code? [closed]

    CSS: How to Solve this “Site-Is-Too-Big” Challenge?

    How to change CSS pseudo-class element using JavaScript

    How to switch between custom css layout and bootstrap css layout

    How to apply css for a class within h2?

    Angularjs hide and show according to screen size responsive

    How to make div block fixed as window size changes?

    Show background image if container content is small (responsive)

    How to fix and re-arrange fixed position divs

    How to use Auto compiler for less and sass in visual studio

    How to render same margins for every browser?

    How to display sub menu horizontally?

    How to apply CSS to my JQuery Plugin

    How * tag can be used in CSS?

    How to manage multi tenant web portal css using Asp.Net MVC

    How to set session variable in jquery/css?

    How to style the ScrollBar using CSS or Javascript? [duplicate]

    how to set a div to the bottom side in asp.net css