Hide image In responsive web design layout.

Question

I want to hide an image only when it is viewed from mobile or tablets.

How can I do this?

Answer 1

Using 'display: none' on imgs will still download the image which is not recommended as it's an http request gone waste (you can see this by looking at the network tab in your browser's inspector[right click, inspect element in Chrome]. just refresh the page and you'll see each asset being downloaded and the time it takes to download it.).
Rather you could make those specific images that you do not wish to load as background-images on divs.
Then all you need to do is:

@media (max-width: x) {
    .rwd-img {
        background-image: none;
        }

Of course you would have to define the height and width of the image for your div in your CSS, but that's a better option than sacrificing user experience. :)

Links of interest:
http://css-tricks.com/on-responsive-images/
http://mattstow.com/responsive-and-retina-content-images-redux.html

Answer 2

You'll want to use media queries, e.g:

@media (max-width: 979px) {
   .img { 
      display: none;
   }
}

You should also look into a framework such as Bootstrap which provides responsive utility classes.