Easily Support Retina Images in WordPress

We recently released a plugin in the WordPress plugin repository to make it very easy to support retina images on your WordPress powered website.

We based the plugin off of Shaun Inman’s .htaccess Mod Rewrites. There are several other plugins and ideas out there that have a solution to supporting Retina images, but they either parse the entire DOM once the page is loaded or pull both the non-retina and retina image versions. The solutions aren’t bad, but what if your website gets a lot of traffic, that’s a heavy load on a server and not very friendly to any mobile visitor using their data plan to browse the web.

How It Works

Mod_Rewrite is an apache module that allows you to rewrite urls based on rules or regular expressions. The plugin we wrote replaces an filename.jpg with [email protected] if the device supports retina images and [email protected] exists. It also supports png and gif. The cool thing is this happens all before your browser renders the page’s HTML.

DON’T DOWNLOAD PLUGIN

Seriously, don’t download it. It’s not supported.

Updated Approach

The web changes all the time and because of it, we don’t recommend the above approach anymore. Here are some ways we support retina images.

Use SVGs or Webfonts

If you’re creating icons, SVGs and custom webfonts are a great way to get scalable vectors for icons and logos. Webfonts are great if you have to support more browsers as SVGs have less support.

Use High-res Images When Possible

When possible, we like to use images that are twice the size they “need” to be. Meaning if we want a 200×200 image, we’ll use a 400×400 image and constrain the dimensions to 200×200 to get a crisp photo on retina devices. This approach should be done with caution. Obviously, doubling the size of the image dimension often comes with a larger file size. You can always compress images with something like TinyPNG or our favorite ImageOptim.

CSS Edits

Editing the css to allow images to be responsive is also a great way to get images to easily support Retina devices. Setting an image max-width to 100% will allow the image to fill the container element to 100%. Depending on the container width, this can easily help support retina devices.

Conclusion

Following best practice approaches like the ones above can help your site look great on all devices. If you have a recommended approach, let us know below.