increase default image quality to max (#1014)

DTS-STN · May 8, 2024 · f446e95 · f446e95
1 parent b0218d7
commit f446e95
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 2 deletions.
diff --git a/components/fragment_renderer/fragment_components/BasicTextWithImage.js b/components/fragment_renderer/fragment_components/BasicTextWithImage.js
@@ -13,6 +13,7 @@ export default function BasicTextWithImage({ src, alt, width, height, data }) {
               width={width}
               height={height}
               sizes="50vw"
+              quality={100}
             />
           </div>
         </div>

diff --git a/components/fragment_renderer/fragment_components/ImageFragment.js b/components/fragment_renderer/fragment_components/ImageFragment.js
@@ -18,6 +18,8 @@ export default function ImageFragment(props) {
         className="col-span-12 lg:col-span-10"
         width={props.fragmentData.scImageEn.width}
         height={props.fragmentData.scImageEn.height}
+        sizes="(max-width: 768px) 100vw, 80vw"
+        quality={100}
       />
       <p className="grid row-start-2 col-span-12 lg:col-span-10 justify-around">
         {props.locale === "en"

diff --git a/components/fragment_renderer/fragment_components/ImageWithCollapse.js b/components/fragment_renderer/fragment_components/ImageWithCollapse.js
@@ -22,6 +22,7 @@ export default function ImageWithCollapse({
         width={width}
         height={height}
         sizes="100vw"
+        quality={100}
       />
       <p className="grid row-start-2 col-span-12 lg:col-span-10 justify-around mb-8">
         {content}

diff --git a/components/molecules/Card.js b/components/molecules/Card.js
@@ -36,7 +36,8 @@ export const Card = (props) => {
               width={props.imgWidth}
               height={props.imgHeight}
               // Cards are single column up to 768px
-              sizes="(max-width: 768px) 100vw, 50vw"
+              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+              quality={100}
             />
           </div>
         ) : (

diff --git a/pages/home.js b/pages/home.js
@@ -287,8 +287,9 @@ export default function Home(props) {
                     alt=""
                     width={pageData.scFragments[1].scImageEn.width}
                     height={pageData.scFragments[1].scImageEn.height}
-                    sizes="33vw"
+                    sizes="35vw"
                     priority
+                    quality={100}
                   />
                 </span>
               </div>

diff --git a/pages/projects/benefits-navigator/index.js b/pages/projects/benefits-navigator/index.js
@@ -268,6 +268,7 @@ export default function BenefitsNavigatorOverview(props) {
                       height={pageData.scFragments[0].scImageEn.height}
                       priority
                       sizes="33vw"
+                      quality={100}
                     />
                   </div>
                 </div>
@@ -411,6 +412,7 @@ export default function BenefitsNavigatorOverview(props) {
                         .scImageEn.width
                     }
                     sizes="100vw"
+                    quality={100}
                   />
                 </div>
                 <div className="col-span-12 row-start-3 xl:col-span-4 xl:row-start-1">
@@ -500,6 +502,7 @@ export default function BenefitsNavigatorOverview(props) {
                         .scImageEn.width
                     }
                     sizes="100vw"
+                    quality={100}
                   />
                 </div>
                 <div className="col-span-12 row-start-3 xl:col-span-4 xl:row-start-1">
@@ -589,6 +592,7 @@ export default function BenefitsNavigatorOverview(props) {
                         .scImageEn.width
                     }
                     sizes="100vw"
+                    quality={100}
                   />
                 </div>
                 <div className="col-span-12 row-start-3 xl:col-span-4 xl:row-start-1">

diff --git a/pages/projects/dashboard/index.js b/pages/projects/dashboard/index.js
@@ -235,6 +235,7 @@ export default function MscaDashboard(props) {
                       width={pageData.scFragments[1].scImageEn.width}
                       priority
                       sizes="33vw"
+                      quality={100}
                     />
                   </div>
                 </div>
@@ -402,6 +403,7 @@ export default function MscaDashboard(props) {
                           .scImageEn.width
                       }
                       sizes="100vw"
+                      quality={100}
                     />
                   </div>
                   <div className="col-span-12 row-start-3 xl:col-span-4 xl:row-start-1">
@@ -484,6 +486,7 @@ export default function MscaDashboard(props) {
                           .scImageEn.width
                       }
                       sizes="100vw"
+                      quality={100}
                     />
                   </div>
                   <div className="col-span-12 row-start-3 xl:col-span-4 xl:row-start-1">
@@ -566,6 +569,7 @@ export default function MscaDashboard(props) {
                           .scImageEn.width
                       }
                       sizes="100vw"
+                      quality={100}
                     />
                   </div>
                   <div className="col-span-12 row-start-3 xl:col-span-4 xl:row-start-1">
@@ -676,6 +680,7 @@ export default function MscaDashboard(props) {
                           .scImageEn.width
                       }
                       sizes="100vw"
+                      quality={100}
                     />
                   </div>
                   <div className="col-span-12 row-start-3 xl:col-span-4 xl:row-start-1">

diff --git a/pages/projects/digital-standards-playbook/index.js b/pages/projects/digital-standards-playbook/index.js
@@ -262,6 +262,7 @@ export default function DigitalStandardsPlaybookPage(props) {
                       width={pageData.scFragments[2].scImageEn.width}
                       priority
                       sizes="33vw"
+                      quality={100}
                     />
                   </div>
                 </div>

diff --git a/pages/projects/making-easier-get-benefits/index.js b/pages/projects/making-easier-get-benefits/index.js
@@ -264,6 +264,7 @@ export default function IntegratedChannelStrategyPage(props) {
                       width={pageData.scFragments[2].scImageEn.width}
                       priority
                       sizes="33vw"
+                      quality={100}
                     />
                   </div>
                 </div>

diff --git a/pages/projects/oas-benefits-estimator/index.js b/pages/projects/oas-benefits-estimator/index.js
@@ -263,6 +263,7 @@ export default function OasBenefitsEstimator(props) {
                       width={pageData.scFragments[1].scImageEn.width}
                       priority
                       sizes="33vw"
+                      quality={100}
                     />
                   </div>
                 </div>