Fluid Image - Setting Up Retina Images with your Website

Creating Retina Images for Your Website

Apple’s newest devices feature the Retina Display, a screen that packs double as many pixels into the same space as older devices. For designers this immediately brings up the question, “What can I do to make my content look outstanding on these new iPads and iPhones?”. First there are a few tough questions to consider, but then this guide will help you get started making your websites and web apps look amazingly sharp with Retina images!

Things to Consider When Adding Retina Images

The main issue with adding retina images is that the images are double as large and will take up extra bandwidth (this won’t be an issue for actual iOS apps, but this guide is covering web sites & web apps only). If your site is mostly used on-the-go over a 3G network it may not be wise to make all your graphics high-definition, but maybe choose only a select few important images. If you’re creating something that will be used more often on a WI-FI connection or have an application that is deserving of the extra wait for hi-res graphics these steps below will help you target only hi-res capable devices.

Create your Retina Image

If you want to have a Retina image on your website, follow the instructions below:

For our example, we are going to say we want a 200px x 200px sized image on our website, but we want it to be a Retina image.
You need to create a 400x400 px image, I know this is double the size, but we need the size.
Put a Fluid Image stack in your page.
Drop your saved 400x400 px image into the Fluid Image stack.
Then set the Max Scale setting from Image Width to Define Max Width
We want the max width of our image to be 200px, so put 200px in the Max Width settings.