<enhanced:img>: auto-populate width and height attributes #14552
Closed
john-does-it
started this conversation in
Ideas
Replies: 1 comment
-
This is already done today: https://svelte.dev/docs/kit/images#sveltejs-enhanced-img-Intrinsic-Dimensions |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
The problem
Using enhanced:img without explicit width and height causes layout shifts (CLS), especially on slow connections. Developers need to manually add intrinsic dimensions to each image, which is tedious and error-prone.
The proposed solution
Add an option for enhanced:img to automatically inject intrinsic dimensions (width and height) at build/dev time for local images.
Example
<enhanced:img src="/images/photo.jpg" dimensions="auto" alt="…" />
How it might work
Read image metadata at build time via Vite (similar to vite-imagetools).
Auto-inject width/height into the rendered HTML for local images.
Skip remote images or when user already specifies attributes.
Benefits
Prevents layout shifts by default.
Improves Core Web Vitals (LCP, CLS).
Reduces friction for developers, especially on small projects.
Beta Was this translation helpful? Give feedback.
All reactions