DOM Image Scaling

To use Image Scaling in the DOM, image-scaling must be turned on via the following conf/config.xml entry:

<config>
  <ress>
    <image-scaling />
  </ress>
</config>

Image Scaling offers a few attributes to influence the scaling more precisely.

See Image Scaling for details how these attributes work.

DOM Image Scaling currently affects the following elements and attributes:

  • img and its src and srcset attributes
  • input[@type = "image"] and its src attribute
  • picture/source and its srcset attribute
  • video and its poster attribute

srcset Image Scaling

The scaling of images referenced in srcset attributes has some specialities. All Image Scaling attributes are generally applied, but URLs with a w descriptor are never scaled in size, only the output format may be optimized. Images with x descriptor are also scaled in size.

The srcset attributes of source elements in picture elements will get no output format change if the type attribute is set on the source element.

Examples

Image scaled, using a breakpoint, to fit 100% of the display’s width, preserving the aspect ratio, scrolling might occur:

<img src="foo.jpg" ai-scaling-width="100%" />

Image scaled to a height of 150px preserving the aspect ratio and optimized for higher display density devices via height attribute:

<img src="foo.jpg" ai-scaling-height="150px" height="150" />

Image with higher than default quality:

<img src="foo.jpg" ai-quality="90" />

Image scaled to fit 50% of the display’s width, 50% of the displays height, preserving the aspect ratio, with quality higher than the default:

<img src="foo.jpg" ai-scaling-width="50%" ai-scaling-height="50%" ai-quality="80" />

Image that is not scaled:

<img src="foo.jpg" ai-scale="false" />