Skip to content

Support for `renderDimensionAttributes`, `width`, `height`, and `format` resp. `formats`

Choose a tag to compare

@mficzel mficzel released this 26 Oct 10:28
· 15 commits to master since this release
0754c3c

Lazybones will now render width, height and src attribures whenever dimension are defined and thus help to prevent content reflow after image loading. The src contains an svg data-uri with the image dimensions. This can be controlled via renderDimensionAttributes.

Sitegeist.Lazybones:Picture:

  • renderDimensionAttributes: render dimension attributes (width/height) for the img-tag when the data is available from the imageSource
    if not specified dimensions will be enabled automatically for pictures that only use the formats options.
  • width: (optional) the base width, will be applied to the imageSource
  • height: (optional) the base height, will be applied to the imageSource
  • formats: image formats that will be rendered as sources of separate type (string or array)

Sitegeist.Lazybones:Image:

  • renderDimensionAttributes: render dimension attributes (width/height) when the data is available from the imageSource. Enabled by default.
  • width: (optional) the base width, will be applied to the imageSource
  • height: (optional) the base height, will be applied to the imageSource
  • format: the image-format for the source like webp or png, is applied to imageSource and type

When renderDimensionAttributes is enabled and the data is available the img-tag will also render an empty inline svg-src with the required dimensions as placeholder to prevent layouts shifting after loading.

Sitegeist.Lazybones:Source:

  • format: the image-format for the source like webp or png, is applied to imageSource and type
  • width: (optional) the base width, will be applied to the imageSource
  • height: (optional) the base height, will be applied to the imageSource

In addition all Sitegeist.Lazybones:Source elements rendered inside of a Sitegeist.Lazybones:Picture will inherit the values imageSource, srcset and sizes. Also Source no longer renders data-sizes attributes which are ignored by lazysizes instead sizes are rendered directly.