Fix blog image layout shift - #2237
Conversation
✅ Deploy Preview for changesets ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
| alt="cli flow example" | ||
| :image="cliExampleImage" | ||
| /> | ||
|  |
There was a problem hiding this comment.
VitePress can auto-calculate the width and height using this markdown form, so converted it this way here.
I need to investigate later is there's a better way to support light-dark images without using VPImage so we can get this automatic size calculation as well.
There was a problem hiding this comment.
It doesn't add the lazy property iirc when I added it, even with the vitepress setting
There was a problem hiding this comment.
But that should be fine, it's a small-ish image
There was a problem hiding this comment.
Setting markdown.image.lazyLoad seems to add for the markdown images, we can add it though
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #2237 +/- ##
=======================================
Coverage 84.53% 84.53%
=======================================
Files 80 80
Lines 3168 3168
Branches 892 892
=======================================
Hits 2678 2678
Misses 433 433
Partials 57 57 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
I noticed the images causes layout shift because the width and height attributes aren't set. This sets them.
Also, fixed the alt text for VPImage in object form.