Responsive Image Filtering

Image resources that make exclusively use of the x-descriptor in the srcset attribute, img elements and the source element of a picture, can automatically be minified by the FIT server. This reduces the amount of data that has to be transferred to the client, which in turn reduces latency. To reduce the amount of data furthermore, all sources of a picture that do not apply to the current client will be removed.

Note: It is illegal to mix x-descriptors with other descriptors. If an illegal srcset is found, it will not be modified.

The selection of the x-descriptors is based on simple rules:

Perfect matches will be selected if available, otherwise the device-pixel-ratio will be checked against all x-descriptors, in ascending order, selecting the first descriptor that is greater than the device-pixel-ratio. As a last resort, the descriptor with the greatest denominator will be chosen.

The removal of source elements follows some simple rules as well.

Each source is checked in order of appearance in the picture element against the following ordered rules:

  • In case the image format specified in the type attribute is not supported by the client, the source is dismissed.
  • source elements with a media attribute are kept, as long as they either have no type attribute defined or support the specified type.
  • If a supported type but no media attribute is given, the source is kept and all subsequent source elements are removed.

Should there only be one source left and the srcset contains just one URL, the picture‘s default img src, or the srcset if the img has such an attribute, will be replaced with the source‘s srcset.

Configuration

By default srcset minifying is disabled. You can enable responsive image filtering with the setting in conf/config.xml:

<config>
  <acceleration>
    <responsive-image-filtering />
  </acceleration>
</config>

Examples

An original source like

<img src="logo.png" srcset="simple.png 1x, better.png 1.5x, double.png 2x">

<img src="logo.png" srcset="simple.png 960w, better.png 1.5x, double.png 2x">

<picture>
  <source srcset="simple.png 1x, better.png 1.5x, double.png 2x">
  <img alt="simple" src="fallback.jpg">
</picture>

<picture>
  <source srcset="img/webp.webp" type="image/webp">
  <source srcset="img/png.png" type="image/png">
  <source srcset="img/jpg.jpg" type="image/jpeg">
  <img alt="type" src="fallback.jpg">
</picture>

<picture>
  <source srcset="img/wide.jpg" media="(min-width: 900px)">
  <source srcset="img/narrow.jpg" media="(max-width: 900px)">
  <img alt="media" src="fallback.jpg">
</picture>

<picture>
  <source srcset="img/webp.webp" type="image/webp">
  <source srcset="img/png.png" type="image/png">
  <img id="srcset" src="img/jpg.jpg" srcset="img/jpg.jpg">
</picture>

<picture>
  <source srcset="img/wide.jpg" media="(min-width: 900px)">
  <source srcset="img/jpg.jpg" type="image/jpeg">
  <img alt="too_many_remaining_sources" src="fallback.jpg">
</picture>

would be changed, with a device-pixel-ratio of 2, no support for WebP but support for PNG, to

<img src="double.png">

<!-- notice the faulty mixing of x- and w-descriptor -->
<img src="logo.png" srcset="simple.png 960w, better.png 1.5x, double.png 2x">

<picture>
  <img alt="simple" src="double.png">
</picture>

<picture>
  <img alt="type" src="img/png.png">
</picture>

<!-- media attributes are not processed -->
<picture>
  <source srcset="img/wide.jpg" media="(min-width: 900px)">
  <source srcset="img/narrow.jpg" media="(max-width: 900px)">
  <img alt="media" src="fallback.jpg">
</picture>

<!-- one source remained but the default image has a srcset attribute-->
<picture>
  <img id="srcset" src="img/jpg.jpg" srcset="img/png.png">
</picture>

<!-- no filtering because the first source can not be removed as it has a media attribute -->
<picture>
  <source srcset="img/wide.jpg" media="(min-width: 900px)">
  <source srcset="img/jpg.jpg" type="image/jpeg">
  <img alt="too_many_remaining_sources" src="fallback.jpg">
</picture>