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:
- 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).
- 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.
- 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.
