Archive results for:

CSS Tip: Handling Retina Images

If you want images on your website (especially image buttons with text) to look sharp on retina displays (iPhone 4/5/6, iPad Mini, iPad 3/4), you can create a separate image with double the pixel density.

Which only means creating a version of your images at twice the size, so a 200 x 200px image would become 400x400px. These super sized images are then displayed in the original image size dimensions, which helps create that smooth and crisp appearance on high pixel density screens.

Then just create a media query for only displays that have a pixel ratio of 2:

You should use Apple’s naming convention of @2x for retina images.

There are also JavaScript libraries such as retina.js to handle the media query aspect of it.