Configuration 

The extension works out of the box with sensible defaults. Images are automatically optimized when accessed via the /processed/ path. All configuration happens through ViewHelper attributes in your Fluid templates.

SourceSetViewHelper 

The SourceSetViewHelper generates responsive <img> tags with srcset attributes.

Basic ViewHelper usage 
{namespace nr=Netresearch\NrImageOptimize\ViewHelpers}

<nr:sourceSet file="{image}"
              width="1200"
              height="800"
              quality="85"
              sizes="(max-width: 768px) 100vw, 50vw"
/>
Copied!

Parameters 

file

file
Type
object
Required

true

Image file resource (FAL file reference). Either file or path must be provided.

path

path
Type
string

URI string path to the image, typically generated via f:uri.image(). Use path instead of file when passing a pre-resolved image URI. Either file or path must be provided.

width

width
Type
integer

Target width in pixels.

height

height
Type
integer

Target height in pixels.

quality

quality
Type
integer
Default
100

JPEG/WebP quality (1--100).

sizes

sizes
Type
string

Responsive sizes attribute for the generated <img> tag.

format

format
Type
string
Default
auto

Output format. Allowed values: auto, webp, avif, jpg, png.

mode

mode
Type
string
Default
cover

Render mode. cover resizes images to fully cover the given dimensions. fit resizes images to fit within the given dimensions.

responsiveSrcset

responsiveSrcset
Type
boolean
Default
false

Enable width-based responsive srcset instead of density-based 2x srcset.

widthVariants

widthVariants
Type
string|array
Default
480, 576, 640, 768, 992, 1200, 1800

Width variants for responsive srcset (comma-separated string or array).

fetchpriority

fetchpriority
Type
string

Native HTML fetchpriority attribute. Allowed values: high, low, auto. Omitted when empty.

Source set configuration 

Define source sets per media breakpoint via the set attribute:

Source set with breakpoint-specific dimensions 
<nr:sourceSet
    path="{f:uri.image(
        image: image,
        width: '960',
        height: '690',
        cropVariant: 'default'
    )}"
    set="{
        480:{width: 160, height: 90},
        800:{width: 400, height: 300}
    }"
/>
Copied!

Render modes 

cover
Default. Resizes images to fully cover the provided width and height.
fit
Resizes images so they fit within the provided width and height.
Using fit mode 
<nr:sourceSet
    path="{f:uri.image(
        image: image,
        width: '960',
        height: '690',
        cropVariant: 'default'
    )}"
    width="960"
    height="690"
    mode="fit"
/>
Copied!

Lazy loading 

Both modes support lazy loading via the native loading="lazy" attribute. When using JS-based lazy loading (class="lazyload"), the data-srcset attribute is added automatically.

Backward compatibility 

By default responsiveSrcset is false, preserving the existing 2x density-based srcset behavior. All existing templates continue to work without modifications.