Do I understand correctly that some browsers don't strictly obey css-specified "px" dimensions on images?

Hi Nathan,

You have to differentiate between a css pixel and a physical pixel on the display. It's not always a 1 to 1 mapping with the higher res displays.

When you specify your background image size to be 20px square, that's 20 css pixels. It's going to be 20 css pixels on both a standard and high res display. So a high res device doesn't ignore the pixels you set but rather it has to convert that into how many physical pixels that will be on that particular display.

Let's suppose the resolution is 2 dppx "dots per pixel" meaning 1 css pixel will equal 2 physical pixels in either direction.

Your 20px square image is still a 20px image on the high res display but it's going to take up 40 physical pixels in both directions.

So if the native size of your image is only 20px then the browser has to scale it up to fit the 40 pixels producing a lower quality image. Scaling down works out better than scaling up.

So for standard displays the larger image gets scaled down to 20px and for higher res displays it can be displayed at native size or perhaps scaled down a little depending on what size it was originally.

Another solution you will see if you start looking into this more is to have two sets of images. One set would be 20x20 and the other set is 40x40.

You would still set your background size to 20px but you would use media queries to target high res devices and serve them the 40px image and serve the 20px image to low res devices.