Mobile Websites & Retina images

Get Started
1

Hello,

Right now I am rebuilding a mobile website that will be catered to smartphones. I am trying to figure out the best way of serving up retina photos and I know the less images the better. Anyways, my question is I have most of them showing up as backgrounds within divs. I am using retina.js to swap the image for a higher res ones testing it on the iphone. Now at the bottom of the retinajs site it talks about using a less css mixin for backgrounds. I have tried to no avail to get this to work. I am also new to the less stylesheet so it could just be some type of configuration that I am missing which is why they aren’t being swapped. It only works if I actually insert the image into the div. I have looked all over for simple steps from the beginning to no avail. I guess the instructions there are vauge to me.

Thanks in advance for any help.

2

If you are using background images, you can do away with the js file altogether and just use @media rules like the one they give to serve up a different background image for retina devices:

#logo {
  background-image: url('/images/my_image.png');
}

@media all and ([COLOR="#FF0000"]-webkit-min-device-pixel-ratio: 1.5[/COLOR]) {
  #logo {
    background-image: url('/images/my_image@2x.png');
  }
}

IMHO, tools like LESS just make things more complicated than they need to be, but I admit I’m not very adventurous with such things, and prefer just good old fashioned, longhand CSS. :slight_smile:

3

Hi Ralph,
Thank you for your response, I agree that the less thing is just…that. Confusing. Just so I have it right, I would do this for every class or id using a background?

I just want to make sure I have this concept right.

So for example:

#logo {
  background-image: url('/images/my_image.png');
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-image: url('/images/my_image@2x.png');
  }
}

#Background {
  background-image: url('/images/my_image2.png');
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #Background{
    background-image: url('/images/my_image2@2x.png');
  }
}
4

Yes, that looks fine, although I would probably group the rules like so:

#logo {
  background-image: url('/images/my_image.png');
}

#Background {
  background-image: url('/images/my_image2.png');
}


@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-image: url('/images/my_image@2x.png');
  }

  #Background{
    background-image: url('/images/my_image2@2x.png');
  }
}

There was a thread last week about whether multiple @media rules might make for a slower page load, but no one really knew, so it probably doesn’t matter. But I prefer to group them in one place.

5

I was wondering the same thing but this is very helpful!!! Thanks so much, will give it a shot!

6

Another helpful article in relation to retina image use.