How to create and use retina images on your website

If you are reading this, chances are that you are doing it on a high-resolution screen, often called “retina”. Creating graphics for retina screens requires a special approach to ensure the images look as crisp, as on regular screens.

Apart from using server-side or client-side scripting solutions (like Retina.js or Retina Images), the simple way to understand and implement retina images on your websites is this:

– keep in mind that retina screens have double the pixel density that regular ones. Than means that the actual size of the image will be twice as small on a retina screen to maintain image quality.

– create an image in your favourite graphics editor. For example, its dimensions are 600×300 px.

– to use it on a normal screen (like most desktop computers are), just include the image in your HTML markup or CSS background property and that’s it. It will be displayed in its full size (600×300 px as we’ve made it previously).

– but if you look at this image on a retina screen, it’ll be the same size, but will look fuzzy and well, just plain bad.

– to make the same image look good on a retina screen, you have to set it’s size twice as small. Not a very complex issue, to be honest. But it’s important to note, that these settings should be enabled for high-density screens only. This can be achieved with CSS Media queries:

 

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
 .logo {
   width: 300px;
   height: 150px;
 }
}

In the code above, we’ve set the media queries to detect popular browsers and high-density screens and set fixed image dimensions (twice smaller than the original image size of 600×300 px).

Now you will notice that the image looks crisp on both retina and regular screens, but the actual size of the image differs – it’s smaller on a retina screen.

So the final step to enable retina image support  and maintain identical actual appearance, is to create a separate image for a retina screen, which is twice as bigger than the original (1200×600 px), but downsize it to 600×300 with CSS, using the media queries from above.

Hope that adds understanding about how to deal with retina images on your site. If you know a better way to manage that or need additional clarification, express it in the comments below.

 

Leave a Reply

Your email address will not be published. Required fields are marked *