Provide "width" and "height" attributes to rich text images for better user experience

Passing "width" and "height" attributes to <img /> prevents constant jumps during scroll as browser knows the size of the image before it's even loaded, refer to:
https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/


Rich text <img />s aren't provided with these attributes now.


How it looks now:

<figure class="w-richtext-figure-type-image w-richtext-align-center">
<div>
<img src="https://uploads-ssl.webflow.com/6349395c9738c5d053d3ceba/6395d07b54f00c5b3de21065_What%20Does%20Developing%20Custom%20Software%20Mean_.png" loading="lazy" alt="What Does Developing Custom Software Mean?">
</div>
</figure>


How it should look for better CLS, and therefore SEO, and therefore user experience:

<figure class="w-richtext-figure-type-image w-richtext-align-center">
<div>
<img width="1720" height="652" src="https://uploads-ssl.webflow.com/6349395c9738c5d053d3ceba/6395d07b54f00c5b3de21065_What%20Does%20Developing%20Custom%20Software%20Mean_.png" loading="lazy" alt="What Does Developing Custom Software Mean?">
</div>
</figure>
  • Andrew Fan
  • Dec 20 2022