How to Set Up Your Website for Retina-Ready Images

It’s been quite some time since the Retina displays on iOS devices were first released, but there are still a lot of websites out there that are not Retina-ready, even as designers and developers have gotten hip to the facts of a fully responsive, mobile-friendly world.

Here’s what you need to know about the options for making your work look its best on the increasingly common Retina displays. The good news is that, as daunting as it may seem, it’s really not that complicated.

Prepping Your Website for Retina-Ready Images

Double Your Fun

There are actually a number of ways you can skin this cat, so to speak. In the first, you’ll need to sharpen up your CSS a bit and include versions of your images at double their normal resolution. The CSS will determine which image to display based on the device on which your site is being viewed.

The CSS updates you’ll need will vary depending on your target browsers, but the good news is that it’s not terribly complicated now, and is getting easier. We’ll leave the actual coding to another day.

One thing to keep in mind: you may want to develop a naming convention for your retina images so that you can easily associate the two versions of an image in case they need to be edited later.

SVG

Another approach is SVG, or Scalable Vector Graphics. As the name implies, these are limited to vector graphics and won’t work with photographic images, but SVG graphics eliminate the need for two image files for each graphic on your site. Again, there are variations from browser to browser so you’ll want to do additional research depending on your needs.

And as noted above, SVG is probably not going to work as your only solution on most sites, unless the site contains no photo-type images.

Brute Force

Of course, you could also simply dump the low-resolution files and just serve up the Retina-ready images. We’d only recommend this for uses with a very tightly defined audience. If you know bandwidth won’t be an issue, this might be the right route, but it’s certainly not a best practice

Other Coding Solutions

At the other end of the effort and elegance spectrum are coding methods that rely on some server-side changes (like .htaccess file entries) along with PHP and Javascript coding.

This might be your best approach, though the effort involved may not be worth it for smaller projects.

Overall, the approach you take will depend on your audience, the nature of your site’s visuals, and your development team’s level of technical expertise.  There is a good solution for just about every situation. The only bad solution is ignoring Retina displays entirely.

NASDAQ Photo via Shutterstock

This article, "How to Set Up Your Website for Retina-Ready Images" was first published on Small Business Trends