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.
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:
And the Twig filter:
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:
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.
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:
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: