Srcset

By passing an array of transforms (named and/or inline), Retcon will bulk transform all images in your HTML and apply a srcset attribute to the <img> DOM nodes. You can also pass in a custom sizes attribute, and even lazy load your srcset images (see below for examples).

Please note that this is a fairly simple implementation of srcset, and only the w descriptor is available for now. If you don't supply a sizes parameter, the browser will assume "100vw".

Also note that the srcset spec is not supported in all browsers. Retcon doesn't queue up any polyfills, so you're free to use whatever you want to ensure support in older browsers – I recommend Picturefill.

If you have the excellent Imager plugin by @aelvan installed (or its successor, Imager X), Retcon will use that to transform your images.

If you don't use Imager, please note that Retcon will not transform external images (Imager will, though!).

Also, see the docs for the retconTransform filter, for more info on how Retcon applies bulk image transforms to <img> tags in HTML content.

Usage & examples

Basic usage (named and inline transforms)

{{ entry.body|retconSrcset([
    'yourNamedTransform',
    {width: 420},
    'someOtherTransform'
]) }}

Adding a sizes attribute

{{ entry.body|retconSrcset(
    [
        {width: 375},
        {width: 480},
        {width: 768}
    ],
    'img',
    '(min-width: 40em) 80vw, 100vw'
) }}

Enabling the base64 encoded src attribute
To replace the original src attribute with a base64 encoded SVG, pass true for the fourth parameter:

{{ entry.body|retconSrcset(
    [
        {width: 375},
        {width: 480},
        {width: 768}
    ],
    'img',
    '(min-width: 40em) 80vw, 100vw',
    true
) }}

Overriding Imager transform defaults and config
You can set Imager transform defaults and config overrides using the fifth and sixth parameters:

{{ entry.body|retconSrcset(
    [
        {width: 375},
        {width: 480},
        {width: 768}
    ],
    'img',
    '(min-width: 40em) 80vw, 100vw',
    true,
    { ratio: 16/9 },
    { imgixProfile: 'webproxy' }
) }}

Lazy loading srcset

If you want to lazy load your srcset images, you'll have to jump through some hoops. Here's an example targeting the Lazysizes syntax, using the retconRenameAttr filter to rename the srcset and sizes attributes:

{{ entry.body|retconSrcset(
    [
        {width: 375},
        {width: 480},
        {width: 768}
    ],
    'img',
    'auto',
    true
)|retconRenameAttr('img', {
    srcset: 'data-srcset',
    sizes: 'data-sizes'
})|retconAttr('img', {
    class: 'lazyload'
}) }}

Parameters

@transforms array
Array containing named (string) or inline (object) transforms

@selector string|string[]
String value or array of string values (optional, defaults to 'img')

@sizes string
The string that should be added to the <img> tag's sizes attribute (optional, defaults to 100vw)

@base64src boolean
Set to false to prevent Retcon from replacing the src attribute with a base64 encoded string (defaults to true)

Resources

https://responsiveimages.org/
https://imager-x.spacecat.ninja/overview.html
https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
http://craftcms.com/docs/image-transforms
http://scottjehl.github.io/picturefill/
https://github.com/aFarkas/lazysizes
https://github.com/mmikkel/Retcon-Craft/wiki/Transform