Retina ready icons
For implementing raster-based icons on Retina ready websites we are using following two solutions - tested in various browsers. Of course, every solution has its own pros and cons. It is important to consider which solution it is correct for given case. You can find another solutions, tutorials, methods (e.g. based on Javascript) on the internet.
1. Use only one image and set its displayed size to half
Simple and quick method to have sharp-displayed icon if its displayed width and height is set to half of original source 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. Most of all images downsampled by any modern browser looks good enough nowadays.
...
/* Set displayed size to half - Retina ready */
.rr-icon-demo img {
width:128px;
height:195px;
}
...
... <!-- Retina ready --> <div class="rr-icon-demo"> <div class="caption"><strong>Retina ready</strong><br>original source: 256 x 390 px<br>displayed: 128 x 195 px</div> <img width="256" height="390" src="files/imgs/hints/summer-tree_256.png"> </div> <!-- none-Retina ready for comparison only --> <div class="icon-demo"> <div class="caption"><strong>none-Retina ready</strong><br>original source: 128 x 195 px<br>displayed: 128 x 195 px</div> <img width="128" height="195" src="files/imgs/hints/summer-tree_128.png"> </div> ...
original source: 256 x 390 px
displayed: 128 x 195 px
original source: 128 x 195 px
displayed: 128 x 195 px
Note: This solution we prefer is suitable for icons with small file sizes and at the same time it ensures sharp results. (e.g. my-icon.png 32 x 32 px = 1,2 kB and my-icon2x.png 64 x 64 px = 1,6 kB - there is no big difference, this difference we can accept)
In this case loading time, increased bandwidth usage etc. are not affected too much.
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. In this example we use the content CSS property and the :before pseudo-element, to insert required icon source with combination of CSS media queries dependent upon the pixel density of the device. Loading time can be optimalized by adding additional media queries.
...
/* none-Retina ready as default*/
.myicon-demo .caption:before {
display:block;
content:url("files/imgs/hints/summer-tree_128.png");
}
/* 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) */
{
.myicon-demo .caption:before {
display:block;
width:100%;
height:195px;
background: url("files/imgs/hints/summer-tree_256.png") center center no-repeat;
background-size: 128px 195px;
content:"";
}
}
...
...
<!-- none-Retina or Retina device -->
<div class="myicon-demo">
<div class="caption"><strong>depends on device</strong></div>
</div>
...
As you can see CSS code above, we need to put image into the background of the content box to set its dimensions. There is no option to style the image alone inserted by content property. Of course you can insert icons as background images and set padding instead of using :before/:after pseudo-elements.
All PREMIUM raster based icons are provided in multiple dimensions.
BACK