Optimizing Graphics for Retina Display

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:

Bitmap graphic techniques:

The best option for layout elements is to use CSS whenever possible. CSS borders, rounded corners, and drop shadows will remain crisp always.