Add width and height to <img> tags

Author: zerodevx

src/lib/SvelteImg.svelte

@@ -1,10 +1,13 @@
 <script>
 export let src = []
 export let sizes = undefined
+export let width = undefined
+export let height = undefined
 export let loading = 'lazy'
 export let decoding = 'async'
 export let ref = undefined
 
+const priority = ['heic', 'heif', 'avif', 'webp', 'jpeg', 'jpg', 'png', 'gif', 'tiff']
 let image = {}
 let sources = []
 
@@ -18,14 +21,17 @@ $: if (src.length) {
     { list: [], lqip: undefined }
   )
   const groups = []
-  for (const format of ['heic', 'heif', 'avif', 'webp', 'jpeg', 'jpg', 'png', 'gif', 'tiff']) {
+  for (const format of priority) {
     const group = list.filter((i) => i.format === format)
     if (group.length) {
       group.sort((a, b) => a.width - b.width)
+      const { src, width, height } = group[group.length - 1]
       groups.push({
         format: format === 'jpg' ? 'jpeg' : format,
         srcset: group.reduce((a, c) => [...a, `${c.src} ${c.width}w`], []).join(','),
-        src: group[group.length - 1].src
+        src,
+        width,
+        height
       })
     }
   }
@@ -44,6 +50,8 @@ $: if (src.length) {
       src={image.src}
       srcset={image.srcset}
       {sizes}
+      width={width || image.width || undefined}
+      height={height || image.height || undefined}
       {loading}
       {decoding}
       style:background={image.lqip}

src/lib/vite.js

@@ -20,7 +20,7 @@ function main(overrides = {}) {
     extendTransforms: (builtins) => [...builtins, lqip],
     extendOutputFormats: (builtinOutputFormats) => ({
       ...builtinOutputFormats,
-      run: () => metadataFormat(['format', 'src', 'width', 'base64'])
+      run: () => metadataFormat(['format', 'src', 'width', 'height', 'base64'])
     }),
     resolveConfigs: (e, f) => {
       if (e.findIndex((i) => i[0] === 'run') > -1) {