Est. Reading Time: 2 minutes
The good ole standard 72 dpi screen is no longer the only screen resolution we have to think about when creating designs. Retina displays are new, but I can guarantee enhanced screen resolutions will become more and more prevalent. Preparing sites to perform well on these screens is something we do to help future proof your website.
Retina displays are 2x the resolution. How they handle regular graphics is, they double the size of 72dpi images so that they display the same size as they would on a regular device. This means that these images may not be as crisp as they would be normally. There are a few ways to regain some of this crispness.
Vector graphic techniques:
- Icon fonts can be used create icons from symbols that are characters of a font. This uses the @font-face attribute of CSS3 and possibly a font service such as Google fonts.
- SVG graphical elements are supported by some browsers – but many browsers still do not. But in the *future* this will be how graphics for high resolution devices will be handled. Many layout design elements will be SVG when possible.
Bitmap graphic techniques:
- You can make graphics 2x the size (like the logo of the site) that it needs to be so that there is an excess of resolution for the retina device to use.
- For larger files, like in image galleries, you may want to use 2 different image files so that load times are not slowed down for non-retina devices. Code and be used to show the lager file for retina devices and the regular file for standard screen resolutions.
- You don’t always have to do this, however. If you have a responsive site for example, the image files are being sized down for the smaller display and therefore may be bigger than how they are shown. In this case the graphics will remain crisp on retina displays since there are extra pixels there for it to use.
The best option for layout elements is to use CSS whenever possible. CSS borders, rounded corners, and drop shadows will remain crisp always.