Retinafy is a small plugin for Craft CMS. Its aim is to provide a simple way to generate the required images and markup for a retina screen.

How it works

Retinafy uses the srcset attribute, which lets us define different sized images to display depending what screen the user is browsing with. It uses the common 2x definition which lets us display a higher resolution image for retina screens.

To let Retinafy know which images are intended to be used for retina purposes, they will need to have an @2x suffix, e.g. [email protected]. This signifies the intent of the image, and allows us to still upload non-retina images if a higher resolution isn’t available.

Usage

Once installed, there are two ways to call Retinafy. The first is via a Craft variable, and the second being a Twig filter. Firstly, the Craft Variable:

<img src="{{ craft.retinafy.image(assetFieldName) }}" alt="">

And the Twig filter:

<img src="{{ assetFieldName | reftinafy }}" alt="">

Both ways perform exactly the same function, so it’s a matter of preference for which method to use.

By default, Refinafy will create the 1x non-retina version of the uploaded @2x image. This will be used as the src attribute and the original @2x image will be used as the srcset. For example if we upload a 500 x 500 @2x image, Retinfafy will create a 250 x 250 version, and the markup generated would be:

<img src="[generated-image-250x250]" srcset="[original-image-500x500] 2x">

Any browser supporting scrset will then display the correct image based upon the display. A handy place to find out what browser support for this is at caniuse. Retinafy doesn’t provide any polyfills, however it gracefully degrades as any browser that doesn’t support srcset will get the non-retina version. Polyfills can be added manually if desired.

Using transforms

Transforms are a powerful feature of Craft. Retinafy can utilise existing transforms, and if the image is big enough to display a 2x version of the transform, it will be added to the srcset attribute. To use a transform, we can pass it into the Craft variable, or Twig filter:

<!-- Craft variable -->
<img src="{{ craft.retinafy.image(assetFieldName, 'transformHandle') }}">

<!-- Twig filter -->
<img src="{{ assetFieldName | reftinafy('transformHandle') }}" alt="">

Providing the uploaded image is equal too—or larger than—2x the transform size, it will create the @2x version. As an example, if we have a transform set at 250 x 250, it will create a 500 x 500 image, and the generated markup would be:

<img src="[transform-250x250]" srcset="[transform-2x-500x500] 2x">

Download

You can find the plugin on GitHub, and is also available to install through the Directory plugin. If you have any questions, let me know in the comments below or give me a Tweet.

Enjoy Retinafying!