Whether you’re creating a website for a client, or you want your own portfolio to show your work in the best light, you need to know about Retina Displays.
Your iPhone and iPad probably already have them, and if you current computer doesn’t—your next one definitely will.
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. Yet since I got my new MacBook Pro with Retina Display, I’ve realized just how many sites still have very pixelated images.
Pretty much, your website’s images might look great on a normal monitor, but terrible on a retina monitor.
And if the people viewing your site have a retina monitor, what message are they getting about your business?
Retina Displays have a high pixel density, and for your website’s images to look good on these types of screens, there are a few measures that need to be taken.
- 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.
Read the final tip over at my blog.
—
Hi, I’m Jill, a web designer/developer who partners with talented designers, copywriters, and agencies on their websites, and their client’s sites. I’m passionate about crafting beautiful and innovative WordPress websites focused on clear positioning and positive user experiences. See my work & get my free report, 5 Tips for Partnering with a Web Designer.