Is your website retina-ready?

Did you know that your images need to be twice as big to display properly on a Retina Display? If not, now you do. And the time to make sure your images look great is now!

Retina Display is an Apple-term that refers to screens that have a high pixel density, about 300+ pixels per inch. At a normal viewing distance, a person is unable to identify individual pixels. Since I got my new MacBook Pro with Retina Display, I’ve realized just how many sites still have very pixelated images. It’s widespread, and if you have a retina monitor too, you know it results in a whole lot of ugliness. (It hurts me; websites are supposed to be beautiful!)

With Retina Displays (or high pixel density displays) becoming the norm, your website’s images need to play by certain rules to avoid pixilation-ugliness. To ensure your images look great on Retina Displays, consider these tips:

  1. Double image size. When you need to use a JPG or PNG, you want to make sure it’s double the resolution…so if you have an image that’s 100 x 100 pixels at 72dpi and you want it to look good on a Retina Display, the image actually needs to be 200 x 200 pixels at 72dpi (then you can use HTML or CSS to scale it down).
  2. Use vector-based file formats. Icons or graphics that could be rendered as a vector should be saved as an SVG. Since all modern browsers support SVG files, pretty much anything you would do in Adobe Illustrator should be an SVG.
  3. Use icon fonts. You can also turn graphics or icons into a font with a service like IcoMoon. This way, they will display super crisp.

When the first retina iPad came out, I started making all of my websites retina ready. (This is why I ask for thumbnails at 800 x 800 pixels.) Back then, I viewed it as future-proofing. Now, it’s more like now-proofing.

If you need help developing a website that’s retina-ready, let’s chat.

Get new blog postsGET NEW BLOG POSTSIN YOUR INBOX

Like this? Get new posts via email.

No spam, no worries. Just my bimonthly(ish) blog posts straight to your inbox.

Leave a Reply

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