🎨 Adjust image resolution #1941 (#2017)

* 🎨 Adjust image resolution #1941 * ⚡️Use dpr #1941 * Revert "⚡️Use dpr #1941" This reverts commit 99e5ee4. * ⚡️Adjust sizes #1941 * 💄 Increase maxWidth #1941
equinor · Jan 3, 2024 · c84aba0 · c84aba0
1 parent d031983
commit c84aba0
Show file tree

Hide file tree

Showing 10 changed files with 14 additions and 48 deletions.
diff --git a/web/lib/hooks/useSanityLoader.ts b/web/lib/hooks/useSanityLoader.ts
@@ -12,6 +12,6 @@ export const useSanityLoader = (image: ImageWithAlt, maxWidth: number, aspectRat
         ? Math.round(width * aspectRatio)
         : Math.round(width * (cropped.height / cropped.width))
 
-      return imageUrlBuilder.width(width).height(height).auto('format').quality(70)
+      return imageUrlBuilder.width(width).height(height).auto('format').quality(100)
     },
   })
diff --git a/web/pageComponents/cards/MagazineCard.tsx b/web/pageComponents/cards/MagazineCard.tsx
@@ -1,9 +1,8 @@
 import { Card } from '@components'
 import { CSSProperties } from 'react'
 import styled from 'styled-components'
-import { Flags } from '../../common/helpers/datasetHelpers'
 import Image, { Ratios } from '../shared/SanityImage'
-import { ImageWithAlt, MagazineCardData } from '../../types/types'
+import { MagazineCardData } from '../../types/types'
 
 const { Title, Header, Action, Arrow, Media, CardLink } = Card
 
@@ -43,24 +42,16 @@ type MagazineCardProp = {
 }
 
 const getThumbnail = (data: MagazineCardData) => {
-  const { openGraphImage, heroImage, hero } = data
+  const { heroImage } = data
 
-  if (!heroImage?.asset && !openGraphImage?.asset) return false
+  if (!heroImage?.asset) return false
 
   return (
     <Image
-      image={
-        (Flags.IS_DEV
-          ? hero?.figure?.asset
-            ? hero.figure
-            : openGraphImage
-          : heroImage?.asset
-          ? heroImage
-          : openGraphImage) as ImageWithAlt
-      }
-      maxWidth={400}
+      image={heroImage}
+      maxWidth={700}
       aspectRatio={Ratios.NINE_TO_SIXTEEN}
-      sizes="(max-width: 360px) 315px,(max-width: 600px) 550px,(max-width: 700px) 310px,450px"
+      sizes="(min-width: 1000px) 400px, (min-width: 440px) 335px, 82.5vw"
     />
   )
 }

diff --git a/web/pageComponents/cards/NewsCard.tsx b/web/pageComponents/cards/NewsCard.tsx
@@ -66,7 +66,7 @@ const NewsCard = ({ data, fitToContent = false, ...rest }: NewsCardProp) => {
               image={heroImage.image}
               maxWidth={400}
               aspectRatio={Ratios.NINE_TO_SIXTEEN}
-              sizes="(max-width: 360px) 315px,(max-width: 600px) 550px,(max-width: 700px) 310px,450px"
+              sizes="(min-width: 1780px) calc(-1.72vw + 401px), (min-width: 1340px) calc(17.86vw + 58px), 276px"
             />
           )}
         </Media>

diff --git a/web/pageComponents/cards/PeopleCard/PeopleCard.tsx b/web/pageComponents/cards/PeopleCard/PeopleCard.tsx
@@ -166,7 +166,7 @@ const PeopleCard = ({ data, hasSectionTitle, orientation = 'portrait', ...rest }
       >
         <StyledMedia>
           <ImageContainer>
-            {image && <RoundedImage image={image} maxWidth={200} aspectRatio={Ratios.ONE_TO_ONE} />}
+            {image && <RoundedImage image={image} maxWidth={400} aspectRatio={Ratios.ONE_TO_ONE} quality={100} />}
           </ImageContainer>
         </StyledMedia>
         <TextContent style={{ '--text-height': orientation === 'portrait' ? '100%' : 'auto' } as CSSProperties}>

diff --git a/web/pageComponents/cards/TopicPageCard.tsx b/web/pageComponents/cards/TopicPageCard.tsx
@@ -43,14 +43,7 @@ const TopicPageCard = ({ data, fitToContent = false, ...rest }: TopicPageCardPro
         }
       >
         <Media>
-          {thumbnail && (
-            <Image
-              image={thumbnail}
-              maxWidth={400}
-              aspectRatio={Ratios.NINE_TO_SIXTEEN}
-              sizes="(max-width: 360px) 315px,(max-width: 600px) 550px,(max-width: 700px) 310px,450px"
-            />
-          )}
+          {thumbnail && <Image image={thumbnail} maxWidth={400} aspectRatio={Ratios.NINE_TO_SIXTEEN} sizes="220px" />}
         </Media>
         <Header>
           <Title>{pageTitle}</Title>

diff --git a/web/pageComponents/searchIndexPages/magazineIndex/Hits.tsx b/web/pageComponents/searchIndexPages/magazineIndex/Hits.tsx
@@ -50,10 +50,6 @@ export const Hits = forwardRef<HTMLDivElement>(({ ...rest }, ref) => {
           tags: hit.magazineTags,
           heroImage: hit.heroImage,
           heroType: hit.heroType,
-          hero: {
-            figure: hit.heroImage,
-            type: hit.heroType,
-          },
         }
         return <StyledMagazineCard key={hit.objectID} data={data as MagazineCardData} />
       })}

diff --git a/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx b/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx
@@ -88,7 +88,7 @@ export const FiftyFiftyHero = ({ title, ingress, link, background, figure, isBig
           {figure && (
             <Image
               maxWidth={4096}
-              sizes="(max-width: 800px) 100vw, 800px"
+              sizes="(min-width: 760px) 50vw, 100vw"
               image={figure.image}
               fill
               style={{ objectFit: 'cover' }}

diff --git a/web/pageComponents/shared/Quote.tsx b/web/pageComponents/shared/Quote.tsx
@@ -11,15 +11,10 @@ const Quote = ({ data: { quote, authorTitle, author, image, designOptions } }: {
     {image?.asset && (
       <PullQuote.Media>
         <Image
-          maxWidth={220}
+          maxWidth={242}
           aspectRatio={Ratios.ONE_TO_ONE}
           image={image}
-          sizes="
-              (max-width: 340px) 80px,
-              (max-width: 600px) 86px,
-              (max-width: 1440px) 164px,
-              220px
-              "
+          sizes="(min-width: 2280px) 242px, (min-width: 800px) calc(3.29vw + 168px), calc(1.67vw + 75px)"
         />
       </PullQuote.Media>
     )}

diff --git a/web/pageComponents/topicPages/Figure.tsx b/web/pageComponents/topicPages/Figure.tsx
@@ -42,13 +42,7 @@ const FullWidthImage = ({ data, anchor }: TeaserProps) => {
         <Image
           image={image}
           maxWidth={920}
-          sizes="(max-width: 360px) 313px,
-            (max-width: 600px) 415px,
-            (max-width: 950px) 550px,
-            (max-width: 1250px) 655px,
-            (max-width: 1450px) 730px,
-            (max-width: 1700px) 825px,
-            920px"
+          sizes="(min-width: 2060px) 920px, (min-width: 440px) calc(34.56vw + 215px), calc(76.67vw + 38px)"
         />
         {(caption || attribution) && (
           <FigureCaption>

diff --git a/web/types/types.ts b/web/types/types.ts
@@ -102,10 +102,7 @@ export type MagazineCardData = {
   slug: string
   title: string | PortableTextBlock[]
   tags?: string[]
-  openGraphImage?: ImageWithAlt
   heroImage?: ImageWithAlt
-  heroType?: HeroTypes
-  hero?: HeroType
 }
 
 export type FeaturedContentData = {