How to Enable Retina Images in your Store Style

Retina Display is a marketing term created by Appe to refer to devices and moniors that have a resolution and pixel density so high - approximately 300+ pixels for inch - that a person is unable to distinguish the individual pixels at a normal viewing distance. The more products Apple releases, the more widespread Retina Displays become. You might expect that Retina graphics be saved with a higher PPI resolution, but in fact, to create Retina versions of your images, all you need to do is create images that are twice the size as your original. For example, for a 200 x 200 px image, you will need to create a 400 x 400 px image. Note: If the doubling image is not optimized properly, it may appear soft or blurry. The larger images are then displayed in the original image size dimensions, which creates a smooth, crisp appear on high pixel density screens, including newer iPhones, iPods, iPads, and MacBooks. Once you have created Retina images, they can be displayed in your FastSpring store with a simple modification to the CSS file in your template style.

Retina Display Setup

If the Retina images are not in your template style zip folder, you will need to add them. If you are swapping out an image that FastSpring inserts into your store, you will need a copy of that image in your style zip folder. Before you create Retina versions for all of the images in your store, keep in mind that the total size of the style zip cannot exceed 1MB. 

To enable your store to swap in the Retina, when appropriate, format the CSS class that calls the image. In the example below, the original image is called example.png and the Retina version is called example-2x.png.  First, add both image files to the style zip folder. Then edit the CSS code, as follows:  

.example {
  background-image: url(example.png);
  background-image:
    -webkit-image-set(url(example.png) 1x, url(example-2x.png) 2x);
  background-image:
    -moz-image-set(url(example.png) 1x, url(example-2x.png) 2x);
  background-image:
    -o-image-set(url(example.png) 1x, url(example-2x.png) 2x);
  background-image:
    -ms-image-set(url(example.png) 1x, url(example-2x.png) 2x);
  background-position: center center;
}

We're Here to Help

If you need assistance enabling Retina graphics in your FastSpring store, please open a support ticket.