Image quality fix (#42)

* changed next/image quaity to 100

* better quality for blogpost cards and increased lazy loading boundary for article cards and embedded content

* removed conditional width image loading for smaller screen sizes. We want things crisp!

* optimized session-x.png size

NOTE: Would have liked to use Contentful's Progressive JPGs but we have content that relies on transparency

components/EmbedContent.tsx

@@ -38,11 +38,13 @@ export default function EmbedContent(props: Props): ReactElement {
                 className={classNames('relative w-full h-36', 'tablet:h-48')}
               >
                 <Image
-                  src={content.image}
+                  src={`${content.image}`}
                   alt="link thumbnail image"
                   layout="fill"
                   className={classNames('object-cover')}
+                  quality={100}
                   priority={true}
+                  lazyBoundary={`500px 200px`}
                 />
               </div>
             )}

components/RichPage.tsx

@@ -40,9 +40,10 @@ export default function RichPage(props: Props) {
         <div className="relative flex items-center justify-center w-full h-full pt-3 bg-gradient-to-bl from-hyper to-blush">
           <div className="relative w-full" style={{ height: '33vh' }}>
             <Image
-              src={page?.hero?.imageUrl}
+              src={`${page?.hero?.imageUrl}`}
               alt={page?.hero?.description ?? page?.label}
               layout="fill"
+              quality={100}
               priority={true}
               placeholder="blur"
               blurDataURL={`${page?.hero?.imageUrl}?q=5`}

components/article/sections/ArticleSectionFeatureImage.tsx

@@ -16,11 +16,12 @@ export function ArticleSectionFeatureImage({ featureImage, title }: Props) {
     <div className="w-full pb-4">
       <div className="relative w-full h-full">
         <Image
-          src={`${featureImage?.imageUrl}?w=${UI.MAX_CONTENT_WIDTH}`}
+          src={`${featureImage?.imageUrl}`}
           alt={featureImage?.description ?? title}
           width={featureImage?.width}
           height={featureImage?.height}
           layout="responsive"
+          quality={100}
           priority={true}
           placeholder="blur"
           blurDataURL={`${featureImage?.imageUrl}?w=${UI.MAX_CONTENT_WIDTH}&q=5`}

components/cards/ArticleCard.tsx

@@ -47,9 +47,11 @@ export function ArticleCard(props: IPost): JSX.Element {
       >
         {featureImage?.imageUrl && (
           <Image
-            src={`${featureImage?.imageUrl}?w=300`}
+            src={`${featureImage?.imageUrl}?w=600`}
             alt={featureImage?.description ?? title}
             layout="fill"
+            quality={100}
+            lazyBoundary={`500px 200px`}
             className="object-cover"
           />
         )}

components/cards/ArticleCardFeature.tsx

@@ -41,9 +41,10 @@ export function ArticleCardFeature(props: IPost) {
           )}
         >
           <Image
-            src={`${featureImage?.imageUrl}?w=600`}
+            src={`${featureImage?.imageUrl}?w=1200`}
             alt={featureImage?.description ?? title}
             layout="fill"
+            quality={100}
             priority={true}
             className="object-cover"
           />

pages/faq.tsx

@@ -45,9 +45,10 @@ function FAQ(props: Props) {
         <div className="relative flex items-center justify-center w-full h-full pt-3 bg-gradient-to-bl from-hyper to-blush">
           <div className="relative w-full" style={{ height: '33vh' }}>
             <Image
-              src={FAQImage}
+              src={`${FAQImage}`}
               alt={METADATA.FAQ_PAGE.OG_IMAGE.ALT}
               layout="fill"
+              quality={100}
               priority={true}
               placeholder="blur"
               className="object-contain"

pages/roadmap.tsx

@@ -34,6 +34,7 @@ function Roadmap() {
               width={horizontal ? '1920' : '700'}
               height={horizontal ? '1009' : '1615'}
               layout="responsive"
+              quality={100}
               priority={true}
             />
           </div>
@@ -56,6 +57,7 @@ function Roadmap() {
                 width={horizontal ? '17138' : '4688'}
                 height={horizontal ? '9992' : '12009'}
                 layout="responsive"
+                quality={100}
                 priority={true}
                 loading="eager"
                 className="rounded-md"
@@ -74,6 +76,7 @@ function Roadmap() {
                 width={horizontal ? '8003' : '4688'}
                 height={horizontal ? '3808' : '10150'}
                 layout="responsive"
+                quality={100}
                 priority={true}
                 className="rounded-md"
               />

services/render.tsx

@@ -1,13 +1,14 @@
-import { useContext } from 'react';
+import { ReactElement, CSSProperties, useContext } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import classNames from 'classnames';
 import { Block, Inline } from '@contentful/rich-text-types';
+
+import { UI } from '../constants';
 import sanitize from '../utils/sanitize';
+import { ScreenContext } from '../contexts/screen';
 
 import EmbedContent from '../components/EmbedContent';
-import { ScreenContext } from '../contexts/screen';
-import { ReactElement, CSSProperties } from 'react';
 
 function Markup(node: any): ReactElement {
   const frontTags: string[] = [];
@@ -94,11 +95,15 @@ function EmbeddedMedia(node: any, isInline = false): ReactElement {
     return (
       <figure className={classNames(figureClasses)} style={figureStyles}>
         <Image
-          src={`${url}${isMobile ? '?w=300' : isTablet ? '?w=600' : ''}`}
+          src={`${url}`}
           alt={node.title}
           width={imageWidth}
           height={imageHeight}
+          quality={100}
           priority={true}
+          lazyBoundary={`500px 200px`}
+          placeholder="blur"
+          blurDataURL={`${url}?w=${UI.MAX_CONTENT_WIDTH}&q=5`}
         />
         {node.caption && (
           <figcaption className={classNames(captionClasses)}>