Width & Height (Anti-Loading-Jank)

Format:

dimension_attributes: true | false

Example:

dimension_attributes: true

Default: false

Prevent page reflow (aka jank) while images are loading, by adding width and height attributes to the <img> tag in the correct aspect ratio.

For an explanation of why and how you want to do this, here is a great explanation.

Caveats:

• You need either width: auto; or height: auto; set in CSS on the <img> tags, or they will be stretched.
• This works on <img> tags and <picture> tags when offering images in multiple widths and formats, but it does not work if you are using art direction (in other words, if you have multiple source images). This is because these attributes can only be applied to the <img> tag, of which there is exactly one.