diff --git a/components/Current/Asides/Puff/index.tsx b/components/Current/Asides/Puff/index.tsx
index ac2054e42..ce0dea538 100644
--- a/components/Current/Asides/Puff/index.tsx
+++ b/components/Current/Asides/Puff/index.tsx
@@ -1,12 +1,12 @@
import { renderOptions } from "./renderOptions"
-import Image from "next/image"
import JsonToHtml from "@/components/JsonToHtml"
import Link from "next/link"
import styles from "./puff.module.css"
import type { PuffProps } from "@/types/components/current/asides/puff"
+import Image from "@/components/Image"
export default function Puff({ imageConnection, is_internal, link, link_text, pageConnection, text, title }: PuffProps) {
if (is_internal) {
@@ -46,7 +46,6 @@ function PuffContent({ imageConnection, text, title }: Pick
))}
diff --git a/components/Current/Footer/index.tsx b/components/Current/Footer/index.tsx
index 31e641d7d..6b633a29a 100644
--- a/components/Current/Footer/index.tsx
+++ b/components/Current/Footer/index.tsx
@@ -1,10 +1,12 @@
import { request } from "@/lib/request"
-import type { LangParams } from "@/types/params"
-import { GetFooterData } from "@/types/requests/footer"
import { GetFooter } from "@/lib/graphql/Query/Footer.graphql"
-import Script from "next/script"
-import Image from "next/image"
+
+import Image from "@/components/Image"
import Navigation from "./Navigation"
+import Script from "next/script"
+
+import type { GetFooterData } from "@/types/requests/footer"
+import type { LangParams } from "@/types/params"
export default async function Footer({ lang }: LangParams) {
const response = await request(GetFooter, {
@@ -23,19 +25,16 @@ export default async function Footer({ lang }: LangParams) {
data-nosvgsrc="/Static/img/scandic-logotype-white.png" // what here?
height="22"
src={footerData.logoConnection.edges[0].node.url}
- unoptimized
width="102"
/>
Scandic
- {footerData.navigation.map((group) => {
- return (
- -
-
{group.title}
-
- )
- })}
+ {footerData.navigation.map((group) => (
+ -
+
{group.title}
+
+ ))}
@@ -113,7 +111,6 @@ export default async function Footer({ lang }: LangParams) {
footerData.app_downloads.google_play.imageConnection
.edges[0].node.url
}
- unoptimized
width={135}
/>
@@ -240,7 +237,6 @@ display: none;
alt="Trip Advisor logotype"
height={24}
src={footerData.trip_advisor.logoConnection.edges[0].node.url}
- unoptimized
width={160}
/>
diff --git a/components/Current/Hero/index.tsx b/components/Current/Hero/index.tsx
index 5d08b5bc5..10d06ab8e 100644
--- a/components/Current/Hero/index.tsx
+++ b/components/Current/Hero/index.tsx
@@ -1,6 +1,6 @@
"use client"
-import Image from "next/image"
+import Image from "@/components/Image"
import styles from "./hero.module.css"
@@ -26,7 +26,6 @@ export default function Hero({ images }: HeroProps) {
height={image.dimension.height}
key={image.title}
src={image.url}
- unoptimized
width={image.dimension.width}
/>
))}
diff --git a/components/Image/index.tsx b/components/Image/index.tsx
new file mode 100644
index 000000000..d237a6d68
--- /dev/null
+++ b/components/Image/index.tsx
@@ -0,0 +1,11 @@
+import NextImage, { type ImageProps } from "next/image"
+
+// Next/Image adds & instead of ? before the params
+export default function Image(props: ImageProps) {
+ return (
+
+ )
+}
diff --git a/components/JsonToHtml/renderOptions.tsx b/components/JsonToHtml/renderOptions.tsx
index 256887d83..ba6523174 100644
--- a/components/JsonToHtml/renderOptions.tsx
+++ b/components/JsonToHtml/renderOptions.tsx
@@ -1,4 +1,4 @@
-import Image from "next/image"
+import Image from "@/components/Image"
import Link from "next/link"
import { EmbedEnum } from "@/types/requests/utils/embeds"
@@ -54,7 +54,6 @@ export const renderOptions: RenderOptions = {
className={styles.image}
height={image.node.dimension.height}
src={image?.node?.url}
- unoptimized
width={image.node.dimension.width}
/>
)