Progressive responsive image, deleted smooth-scroll

Author: AlexTechNoir

components/article/Markdown.js

@@ -18,7 +18,10 @@ export default function Markdown({ data }) {
       <Figure>
         <ProgressiveImage
           preview={data.image[0].formats.thumbnail.url}
-          image={data.image[0].url}
+          smallImage={data.image[0].formats.small.url}
+          mediumImage={data.image[0].formats.medium.url}
+          largeImage={data.image[0].formats.large.url}
+          sourceImage={data.image[0].url}
           alt={data.image[0].alternativeText}
         />
         <figcaption><em>{data.image[0].caption}</em></figcaption>

components/article/markdown/ProgressiveImage.js

@@ -1,56 +1,69 @@
 import { useState, useEffect, useRef } from 'react'
+import styled from 'styled-components'
 
-export default function ProgressiveImage({ preview, image, alt }) {
-  const [ currentImage, setCurrentImage ] = useState(preview)
+export default function ProgressiveImage({ preview, smallImage, mediumImage, largeImage, sourceImage, alt }) {
   const [ isLoading, setIsLoading ] = useState(true)
-  const [ loadingImage, setLoadingImage ] = useState(image)
-
-  useEffect(() => {
-    fetchImage(image)
-  },[])
 
   const isFirstRun = useRef(true)
-  useEffect(() => {
-    if (isFirstRun.current) {
-      isFirstRun.current = false
-      return
-    }
-    setCurrentImage(preview)
-    setIsLoading(false)
-  }, [image])
 
   useEffect(() => {
-    if (isFirstRun.current) {
-      isFirstRun.current = false
-      return
-    }
-    fetchImage(image)
-  }, [currentImage])
-
-  const fetchImage = src => {
-    const image = new Image()
-    image.onload = () => {
-      setCurrentImage(loadingImage.src)
+    if (isFirstRun.current.complete) {
       setIsLoading(false)
     }
-    image.src = src
-    setLoadingImage(image)
-  }
-  
-  const style = isLoading => {
-    return {
-      transition: '0.5s filter linear',
-      filter: `${isLoading ? 'blur(50px)' : ''}`
-    }
-  }
+    
+    isFirstRun.current.addEventListener('load', () => setIsLoading(false))
+  }, [])
 
   return (
-    <img 
-      style={style(isLoading)} 
-      src={currentImage} 
-      alt={alt} 
-      width="1200"
-      height="800"
-    />
+    <WrappingDiv isLoading={isLoading}>
+      <img 
+        src={preview}
+        alt={alt}
+        width="1200" 
+        height="800" 
+      />
+      <picture>
+        <source
+          srcSet={ `${smallImage} 500w, 
+                    ${mediumImage} 750w, 
+                    ${largeImage} 1000w,
+                    ${sourceImage} 1200w` }
+          type="image/jpeg"
+        />        
+        <img 
+          ref={isFirstRun}      
+          src={smallImage}
+          srcSet={ `${smallImage} 500w, 
+                    ${mediumImage} 750w, 
+                    ${largeImage} 1000w,
+                    ${sourceImage} 1200w` }
+          sizes="(max-width: 500px) 500px, 
+                (max-width: 750px) 750px, 
+                (max-width: 1000px) 1000px, 
+                1200px"
+          alt={alt}
+          width="1200" 
+          height="800" 
+        />
+      </picture>
+    </WrappingDiv>
   )
 }
+
+const WrappingDiv = styled.div`
+  position: relative;
+  overflow: hidden;
+  transition: 0.5s filter linear;
+  filter: ${props => props.isLoading ? 'blur(30px)' : ''};
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+  picture > img {
+    max-width: 100%;
+    height: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+`

pages/_app.js

@@ -96,7 +96,6 @@ const GlobalStyle = createGlobalStyle`
     font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
       Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Georgia, sans-serif;
     height: 100%;
-    scroll-behavior: smooth;
     background-color: #FFFFFF; 
   }