Retina ready background images
After spending many hours with finding and testing we got some cross browser solutions how to add/serve background images for Retina and non-Retina devices. Please keep in mind that you must consider which solution is correct for your case and of course you can find another on the internet. Every solution has its own pros and cons.
1. Use only one image and set its displayed size to half
Easy and most time-saving way is to have "double"sized image as you want to display and set its displayed width and height to half by CSS. In this example we use 120 x 120 px image which will be downsampled and displayed in browser as 60 x 60 px. Every modern browser uses bicubic resampling and does a great job with downsampling.
...
/* Retina ready */
.rr-bg-demo {
background:#ed2b00 url("path/to/img/tiles002-2x.png") center center repeat;
background-size:60px 60px;
}
/* none-Retina ready for comparison only*/
.bg-demo {
background:#ed2b00 url("path/to/img/tiles002.png") center center repeat;
}
...
... <!-- Retina ready --> <div class="rr-bg-demo"> <strong>Retina ready</strong><br> original source: 120 x 120 px<br> displayed: 60 x 60 px </div> <!-- none-Retina ready for comparison only --> <div class="bg-demo"> <strong>none-Retina ready</strong><br> original source: 60 x 60 px<br> displayed: 60 x 60 px </div> ...
original source: 120 x 120 px
displayed: 60 x 60 px
original source: 60 x 60 px
displayed: 60 x 60 px
Note: This solution is good enough for seamless backgrounds with small file sizes.
(e.g. my-bg.png 32 x 32 px = 1,2 kB and my-bg2x.png 64 x 64 px = 1,6 kB - there is no big difference, this difference we can accept)
Otherwise it can affect loading time, increases bandwidth usage etc.
2. Use multiple images and set different sources for non-Retina and Retina devices
This solution requires bit more coding but you will have better results, especially with bigsized background images. For this purpose we use CSS media queries dependent upon the pixel density of the device. Loading time can be optimalized by combining additional media queries
...
/* none-Retina ready as default*/
.mybg-demo {
background:#ed2b00 url("path/to/img/tiles002.png") center center repeat;
}
/* media query that detects Retina displays */
@media
(-webkit-min-device-pixel-ratio: 2), /* (-webkit-min-device-pixel-ratio: 1.5) */
(min-resolution: 192dpi) /* (min-resolution: 144dpi) */
{
.mybg-demo {
background:#ed2b00 url("path/to/img/tiles002-2x.png") center center repeat;
background-size:60px 60px;
}
}
...
... <!-- none-Retina or Retina device --> <div class="mybg-demo"><strong>depends on device</strong></div> ...
As it is mentioned at the begining, you can find other great solutions based on Javascript or you can comment if you have other working solution.
All PREMIUM background images are provided in multiple dimensions.
BACK