perf(images): convert remaining <img> tags to next/image project-wide

Clears every remaining @next/next/no-img-element warning — automatic
responsive srcset, lazy-loading, and format optimization instead of
always loading the original file at full size. Fixed-size icons got
explicit width/height; dynamic-aspect photos got fill inside a
relative wrapper.
This commit is contained in:
Marco
2026-07-21 12:44:03 +00:00
parent af00fd091f
commit 9c9f0b02c0
18 changed files with 92 additions and 42 deletions
+3 -2
View File
@@ -1,3 +1,4 @@
import Image from "next/image";
import { Reveal } from "./Reveal";
function Word({ children }: { children: string }) {
@@ -16,7 +17,7 @@ function Arrow() {
<div className="flex items-center justify-center shrink-0">
<div className="-scale-y-100 rotate-180">
<div className="relative" style={{ height: "var(--divider-arrow-h)", width: "var(--divider-arrow-w)" }}>
<img alt="" src="/icon-separator.svg" className="absolute inset-0 w-full h-full" />
<Image alt="" src="/icon-separator.svg" fill sizes="48px" />
</div>
</div>
</div>
@@ -60,7 +61,7 @@ export function Divider() {
className="relative"
style={{ height: "var(--divider-sparkle-inner-h)", width: "var(--divider-sparkle-inner-w)" }}
>
<img alt="" src="/icon-separator-right.svg" className="absolute inset-0 w-full h-full" />
<Image alt="" src="/icon-separator-right.svg" fill sizes="48px" />
</div>
</div>
</div>