mirror of
https://github.com/apricote/ein-pfeil-am-rechten-fleck.de.git
synced 2026-01-13 13:01:02 +00:00
feat: optimize image displays
This commit is contained in:
parent
7f43189f83
commit
6bf33e9664
7 changed files with 155 additions and 59 deletions
134
package-lock.json
generated
134
package-lock.json
generated
|
|
@ -25,7 +25,7 @@
|
|||
"tslib": "^2.4.1",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^4.2.0",
|
||||
"vite-imagetools": "^4.0.18"
|
||||
"vite-imagetools": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@aashutoshrathi/word-wrap": {
|
||||
|
|
@ -1167,6 +1167,12 @@
|
|||
"dequal": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/b4a": {
|
||||
"version": "1.6.4",
|
||||
"resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.4.tgz",
|
||||
"integrity": "sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
|
|
@ -2021,6 +2027,12 @@
|
|||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/fast-fifo": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
|
||||
"integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/fast-glob": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
|
||||
|
|
@ -2395,12 +2407,12 @@
|
|||
}
|
||||
},
|
||||
"node_modules/imagetools-core": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/imagetools-core/-/imagetools-core-3.3.1.tgz",
|
||||
"integrity": "sha512-xllF2GDRg0SXCQQRxBAtE6N9dPAttc+ro+QDLnRmVSE5lH5clQxD2Al4XluirXj0T7lIH5VbetFmBLowW6ps+w==",
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/imagetools-core/-/imagetools-core-5.1.0.tgz",
|
||||
"integrity": "sha512-NT7dh/1OoEwVp4vgMVRsW0vOMJsbaGtIyFJCXjGK9llT+GrCtQ5hJYPXNws7e2o7oYHU5mA9dDV1Cv9ooVL5Xw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"sharp": "^0.31.3"
|
||||
"sharp": "^0.32.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
|
|
@ -2921,9 +2933,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/node-addon-api": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.1.0.tgz",
|
||||
"integrity": "sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA==",
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
|
||||
"integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/node-fetch": {
|
||||
|
|
@ -3391,6 +3403,40 @@
|
|||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/prebuild-install/node_modules/chownr": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
|
||||
"integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/prebuild-install/node_modules/tar-fs": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
|
||||
"integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"chownr": "^1.1.1",
|
||||
"mkdirp-classic": "^0.5.2",
|
||||
"pump": "^3.0.0",
|
||||
"tar-stream": "^2.1.4"
|
||||
}
|
||||
},
|
||||
"node_modules/prebuild-install/node_modules/tar-stream": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
|
||||
"integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"bl": "^4.0.3",
|
||||
"end-of-stream": "^1.4.1",
|
||||
"fs-constants": "^1.0.0",
|
||||
"inherits": "^2.0.3",
|
||||
"readable-stream": "^3.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/prelude-ls": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
|
||||
|
|
@ -3464,6 +3510,12 @@
|
|||
}
|
||||
]
|
||||
},
|
||||
"node_modules/queue-tick": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
|
||||
"integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/rc": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
|
||||
|
|
@ -3697,19 +3749,19 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/sharp": {
|
||||
"version": "0.31.3",
|
||||
"resolved": "https://registry.npmjs.org/sharp/-/sharp-0.31.3.tgz",
|
||||
"integrity": "sha512-XcR4+FCLBFKw1bdB+GEhnUNXNXvnt0tDo4WsBsraKymuo/IAuPuCBVAL2wIkUw2r/dwFW5Q5+g66Kwl2dgDFVg==",
|
||||
"version": "0.32.6",
|
||||
"resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz",
|
||||
"integrity": "sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"color": "^4.2.3",
|
||||
"detect-libc": "^2.0.1",
|
||||
"node-addon-api": "^5.0.0",
|
||||
"detect-libc": "^2.0.2",
|
||||
"node-addon-api": "^6.1.0",
|
||||
"prebuild-install": "^7.1.1",
|
||||
"semver": "^7.3.8",
|
||||
"semver": "^7.5.4",
|
||||
"simple-get": "^4.0.1",
|
||||
"tar-fs": "^2.1.1",
|
||||
"tar-fs": "^3.0.4",
|
||||
"tunnel-agent": "^0.6.0"
|
||||
},
|
||||
"engines": {
|
||||
|
|
@ -3847,6 +3899,16 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/streamx": {
|
||||
"version": "2.15.2",
|
||||
"resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.2.tgz",
|
||||
"integrity": "sha512-b62pAV/aeMjUoRN2C/9F0n+G8AfcJjNC0zw/ZmOHeFsIe4m4GzjVW9m6VHXVjk536NbdU9JRwKMJRfkc+zUFTg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"fast-fifo": "^1.1.0",
|
||||
"queue-tick": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/string_decoder": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
|
||||
|
|
@ -4175,37 +4237,25 @@
|
|||
}
|
||||
},
|
||||
"node_modules/tar-fs": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
|
||||
"integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.4.tgz",
|
||||
"integrity": "sha512-5AFQU8b9qLfZCX9zp2duONhPmZv0hGYiBPJsyUdqMjzq/mqVpy/rEUSeHk1+YitmxugaptgBh5oDGU3VsAJq4w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"chownr": "^1.1.1",
|
||||
"mkdirp-classic": "^0.5.2",
|
||||
"pump": "^3.0.0",
|
||||
"tar-stream": "^2.1.4"
|
||||
"tar-stream": "^3.1.5"
|
||||
}
|
||||
},
|
||||
"node_modules/tar-fs/node_modules/chownr": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
|
||||
"integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/tar-stream": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
|
||||
"integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
|
||||
"version": "3.1.6",
|
||||
"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.6.tgz",
|
||||
"integrity": "sha512-B/UyjYwPpMBv+PaFSWAmtYjwdrlEaZQEhMIBFNC5oEG8lpiW8XjcSdmEaClj28ArfKScKHs2nshz3k2le6crsg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"bl": "^4.0.3",
|
||||
"end-of-stream": "^1.4.1",
|
||||
"fs-constants": "^1.0.0",
|
||||
"inherits": "^2.0.3",
|
||||
"readable-stream": "^3.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
"b4a": "^1.6.4",
|
||||
"fast-fifo": "^1.2.0",
|
||||
"streamx": "^2.15.0"
|
||||
}
|
||||
},
|
||||
"node_modules/tar/node_modules/mkdirp": {
|
||||
|
|
@ -4470,13 +4520,13 @@
|
|||
}
|
||||
},
|
||||
"node_modules/vite-imagetools": {
|
||||
"version": "4.0.19",
|
||||
"resolved": "https://registry.npmjs.org/vite-imagetools/-/vite-imagetools-4.0.19.tgz",
|
||||
"integrity": "sha512-vZaPsjLDgEqZrbj+ZsniRKthmoj4mvVrMOK/FZhRAbrVB4LOsil0BO2Gcq20e/JRlom4DzqtLw1UQUkfcqgCrA==",
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/vite-imagetools/-/vite-imagetools-6.2.1.tgz",
|
||||
"integrity": "sha512-bKjxLcTJWJJ2iMxlQUAGgoslkwmfGBZ4vW3k87YWUIY4bC4QvU52ngLq10sy18fPBEWMXy/FHtPf9yR8KnHUFA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@rollup/pluginutils": "^5.0.0",
|
||||
"imagetools-core": "^3.3.1"
|
||||
"@rollup/pluginutils": "^5.0.2",
|
||||
"imagetools-core": "^5.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
"tslib": "^2.4.1",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^4.2.0",
|
||||
"vite-imagetools": "^4.0.18"
|
||||
"vite-imagetools": "^6.0.0"
|
||||
},
|
||||
"type": "module"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
<script lang="ts">
|
||||
import type { ImageMetadata } from "$lib/image.svelte";
|
||||
import Image from "$lib/image.svelte";
|
||||
|
||||
export let name: string;
|
||||
export let description: string;
|
||||
export let image: string;
|
||||
export let image: ImageMetadata;
|
||||
export let mirrored: boolean = false;
|
||||
</script>
|
||||
|
||||
|
|
@ -10,12 +13,12 @@
|
|||
mirrored && "md:flex-row-reverse"
|
||||
} m-8 my-12 items-center`}
|
||||
>
|
||||
<img
|
||||
srcset={image}
|
||||
width="192"
|
||||
height="192"
|
||||
alt={`Grafik vom Charakter ${name}`}
|
||||
class="w-48 rounded-full object-cover"
|
||||
<Image
|
||||
img={image}
|
||||
alt={`Grafik des Charakters "${name}"`}
|
||||
className="w-48 max-w-fit rounded-full object-cover"
|
||||
width={168}
|
||||
height={168}
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
<script lang="ts" context="module">
|
||||
export type ImageMetadata = {
|
||||
format: "webp" | "png" | "avif";
|
||||
src: string;
|
||||
}[];
|
||||
|
||||
const mimeType: Record<string, string> = {
|
||||
webp: "image/webp",
|
||||
png: "image/png",
|
||||
avif: "image/avif",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export let className: string = "";
|
||||
export let alt: string;
|
||||
export let img: ImageMetadata;
|
||||
export let width: number;
|
||||
export let height: number;
|
||||
export let loading: "lazy" | undefined = undefined;
|
||||
|
||||
const sources = img.map(({ format, src }) => ({
|
||||
format: mimeType[format],
|
||||
srcset: src,
|
||||
}));
|
||||
const pngSrc = sources.find(({ format }) => format === "image/png")?.srcset;
|
||||
</script>
|
||||
|
||||
<picture class={className}>
|
||||
{#each sources as { format, srcset }}
|
||||
<source type={format} {srcset} />
|
||||
{/each}
|
||||
<img src={pngSrc} {width} {height} {alt} class={className} {loading} />
|
||||
</picture>
|
||||
|
|
@ -1,16 +1,17 @@
|
|||
<script>
|
||||
import "../app.css";
|
||||
import Image from "$lib/image.svelte";
|
||||
|
||||
import LogoImg from "$lib/images/logo.png?w=512&format=webp;png&srcset";
|
||||
import LogoImg from "$lib/images/logo.png?w=512";
|
||||
</script>
|
||||
|
||||
<header class="flex justify-center">
|
||||
<a href="/">
|
||||
<img
|
||||
height="256"
|
||||
width="256"
|
||||
<Image
|
||||
height={256}
|
||||
width={256}
|
||||
alt="Logo, Illustration von einem Pfeil über einem Herz"
|
||||
srcset={LogoImg}
|
||||
img={LogoImg}
|
||||
/>
|
||||
</a>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
import H3 from "$lib/h3.svelte";
|
||||
import MajorActor from "$lib/major-actor.svelte";
|
||||
|
||||
import BeyronImg from "$lib/images/beyron.png?width=384&format=webp;png&srcset";
|
||||
import TamImg from "$lib/images/tam.png?width=384&format=webp;png&srcset";
|
||||
import BlueImg from "$lib/images/blue.png?width=384&format=webp;png&srcset";
|
||||
import BeyronImg from "$lib/images/beyron.png?w=336";
|
||||
import TamImg from "$lib/images/tam.png?w=336";
|
||||
import BlueImg from "$lib/images/blue.png?w=336";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
|
|||
|
|
@ -3,5 +3,13 @@ import { defineConfig } from "vite";
|
|||
import { imagetools } from "vite-imagetools";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [imagetools(), sveltekit()],
|
||||
plugins: [
|
||||
imagetools({
|
||||
defaultDirectives: new URLSearchParams({
|
||||
as: "metadata",
|
||||
format: "avif;webp;png",
|
||||
}),
|
||||
}),
|
||||
sveltekit(),
|
||||
],
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue