1. Drop in the "Retinafy Enabler" stack to the top of your page.

Stacks Image 641

2. Drop in the the "Retinafy Image" Stack.

Stacks Image 647
1.1 Prepare your images. One which is the original size and a second which is 2x the desired dimension size.
1.2 Add them both to your Rapidweaver resources. Label the 2x dimension image with the suffix "_2x".
1.3 Call the original size image in the stack (image1.jpg in this demo).

The Stack automatically detects a retina display and, in that case, it will replace all the images and all the images in the page with the high resolution version.

3. Easy to replace backgrounds too.

Stacks Image 645
This background image demo, made using the Deck theme, calls the background image from the Rapidweaver Resources.

As the Retinafy Enabler is on the page, any image that has a 2x version in exactly the same file location, with the same filename, will be automatically served instead of the original image on Retina HiDPI enabled devices. This means content images, background images, anything. Just use the Retinafy Enabler on a page and put two images in the same folder location with same file name and the 2x version with the suffix "_2x" and you're good to go.

Safari works in preview in Rapidweaver, but the site will need to be published for Chrome to work properly (security thing).

The Stack automatically detects a retina display and, in that case, it will replace all the images (including any background image in the page) with the high resolution version.