Merged in feature/SW-3365-blurry-images (pull request #2746)

Feature/SW-3365 reduce upscaling of images (fix blurry images)

* fix: handle when images are wider than 3:2 but rendered in a 3:2 container

* use dimensions everywhere applicable

* fall back to using <img sizes='auto' /> if possible

* imageLoader: never nest

* remove empty test file


Approved-by: Anton Gunnarsson
Approved-by: Matilda Landström

apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx

@@ -43,6 +43,7 @@ export default async function MyPages({}: PageArgs<
                 alt={hero_image.meta.alt || hero_image.meta.caption || ""}
                 src={hero_image.url}
                 focalPoint={hero_image.focalPoint}
+                dimensions={hero_image.dimensions}
                 sizes="100vw"
                 fill
                 priority

apps/scandic-web/components/ContentCard/index.tsx

@@ -39,6 +39,7 @@ export default function ContentCard({
           fill
           sizes="(min-width: 768px) 413px, 100vw"
           focalPoint={image.focalPoint}
+          dimensions={image.dimensions}
         />
         {promoText ? (
           <Chip className={styles.promoTag}>{promoText}</Chip>

apps/scandic-web/components/ContentType/CampaignPage/Hero/index.tsx

@@ -48,6 +48,7 @@ export default async function CampaignHero({
             fill
             sizes="(min-width: 768px) 800px, 100vw"
             focalPoint={image.focalPoint}
+            dimensions={image.dimensions}
           />
         </div>
       ) : null}

apps/scandic-web/components/ContentType/DestinationPage/TopImages/index.tsx

@@ -46,6 +46,7 @@ export default function TopImages({ images, destinationName }: TopImageProps) {
               width={width}
               height={height}
               focalPoint={image.focalPoint}
+              dimensions={image.dimensions}
               className={`${styles.image} ${images.length > 1 ? styles.clickable : ""}`}
               onClick={() =>
                 images.length

apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/CardImage/index.tsx

@@ -25,6 +25,7 @@ export default function CardImage({
                   fill
                   sizes="(min-width: 768px) 900px, 100vw"
                   focalPoint={backgroundImage.focalPoint}
+                  dimensions={backgroundImage.dimensions}
                 />
               </div>
             )

apps/scandic-web/components/ContentType/StartPage/InfoCard/index.tsx

@@ -29,6 +29,7 @@ export default function InfoCard({
             width={358}
             height={179}
             focalPoint={image.focalPoint}
+            dimensions={image.dimensions}
             className={styles.image}
           />
         </div>

apps/scandic-web/components/ContentType/StartPage/index.tsx

@@ -46,6 +46,7 @@ export default async function StartPage({
             }
             src={header.hero_image.url}
             focalPoint={header.hero_image.focalPoint}
+            dimensions={header.hero_image.dimensions}
             sizes="100vw"
             fill
             priority

apps/scandic-web/components/ContentType/StaticPages/index.tsx

@@ -69,6 +69,7 @@ export default async function StaticPage({
               alt={hero_image.meta.alt || hero_image.meta.caption || ""}
               src={hero_image.url}
               focalPoint={hero_image.focalPoint}
+              dimensions={hero_image.dimensions}
             />
           </div>
         ) : null}

apps/scandic-web/components/DeprecatedJsonToHtml/renderOptions.tsx

@@ -397,6 +397,7 @@ export const renderOptions: RenderOptions = {
               src={image.url}
               width={width}
               focalPoint={image.focalPoint}
+              dimensions={image.dimensions}
               {...props}
             />
             <Caption>{image.meta.caption}</Caption>

apps/scandic-web/components/Hero/hero.ts

@@ -1,7 +1,8 @@
-import type { FocalPoint } from "@scandic-hotels/trpc/types/image"
+import type { FocalPoint, Image } from "@scandic-hotels/trpc/types/image"
 
 export interface HeroProps {
   alt: string
   src: string
   focalPoint?: FocalPoint
+  dimensions?: Image["dimension"]
 }

apps/scandic-web/components/Hero/index.tsx

@@ -4,7 +4,12 @@ import styles from "./hero.module.css"
 
 import type { HeroProps } from "./hero"
 
-export default async function Hero({ alt, src, focalPoint }: HeroProps) {
+export default async function Hero({
+  alt,
+  src,
+  focalPoint,
+  dimensions,
+}: HeroProps) {
   return (
     <Image
       className={styles.hero}
@@ -13,6 +18,7 @@ export default async function Hero({ alt, src, focalPoint }: HeroProps) {
       width={1196}
       src={src}
       focalPoint={focalPoint}
+      dimensions={dimensions}
       priority
     />
   )

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/index.tsx

@@ -54,7 +54,6 @@ const RoomImage = memo(function RoomImage({
         title={roomType}
         fill
         imageCountPosition="top"
-        sizes="(max-width: 768px) 768px, 420px"
       />
       <div className={styles.toggleSidePeek}>
         {roomTypeCode && room && (

apps/scandic-web/components/TempDesignSystem/Card/index.tsx

@@ -60,6 +60,7 @@ export default function Card({
             fill
             sizes="(min-width: 1367px) 700px, 900px"
             focalPoint={backgroundImage.focalPoint}
+            dimensions={backgroundImage.dimensions}
           />
         </div>
       )}

apps/scandic-web/components/TempDesignSystem/LoyaltyCard/index.tsx

@@ -33,6 +33,7 @@ export default function LoyaltyCard({
           className={styles.image}
           alt={image.meta.alt || image.title}
           focalPoint={image.focalPoint}
+          dimensions={image.dimensions}
         />
       ) : null}
       <Title as="h4" level="h3" textAlign="center">

apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx

@@ -33,6 +33,7 @@ export default function TeaserCard({
             alt={image.meta?.alt || ""}
             className={styles.image}
             focalPoint={image.focalPoint}
+            dimensions={image.dimensions}
             fill
           />
         </div>