Take the 2-minute tour ×

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

How can I do this?

share|improve this question
Are you using boostrap? check this page getbootstrap.com/css/#responsive-utilities –  ppollono Feb 5 at 13:45

3 Answers 3

up vote 4 down vote accepted

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:

share|improve this answer

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.

share|improve this answer
I think this code will block all images. Actually i want to hide a particular image. –  Vivek Nath R Sep 15 '12 at 17:52
No, it will hide any image with the "img" class –  devdigital Sep 15 '12 at 17:55

Using Cascading Style Sheets with a media query you can hide the image when the viewers screen resolution is lower than a given value like in this example when the screen width is smaller than 640 pixels.

@media screen and (max-width: 640px) {

    .my-image {
        display: none;

share|improve this answer

Your Answer


