feat: adds blur-up effect on images loading

Author: arkgor

src/getFixedGatsbyImage.js

@@ -1,5 +1,5 @@
 import getBasicImageProps from './utils/getBasicImageProps'
-import buildUrl from './utils/buildImageUrl'
+import buildUrl, { buildLowFiUrl } from './utils/buildImageUrl'
 import { isWebP } from './utils/helpers'
 import { sizeMultipliersFixed, defaultFixedOptions } from './defaults'
 
@@ -87,7 +87,7 @@ function getFixedGatsbyImage(image, args = {}) {
   // base64String
 
   return {
-    base64: useBase64 ? base64 || lqip : null,
+    base64: buildLowFiUrl(originalPath, { width, height, aspectRatio: desiredAspectRatio }),
     aspectRatio: desiredAspectRatio,
     width: Math.round(width),
     height: outputHeight,

src/getFluidGatsbyImage.js

@@ -1,5 +1,5 @@
 import getBasicImageProps from './utils/getBasicImageProps'
-import buildUrl from './utils/buildImageUrl'
+import buildUrl, { buildLowFiUrl } from './utils/buildImageUrl'
 import { isWebP } from './utils/helpers'
 import { sizeMultipliersFluid, defaultFluidOptions } from './defaults'
 
@@ -40,13 +40,13 @@ function getFluidGatsbyImage(image, args = {}) {
 
   let sizes = options.sizes || `(max-width: ${maxWidth}px) 100vw, ${maxWidth}px`
   let widths = sizeMultipliersFluid
-    .map(scale => Math.round(maxWidth * scale))
-    .filter(width => width < dimensions.width)
+    .map((scale) => Math.round(maxWidth * scale))
+    .filter((width) => width < dimensions.width)
     .concat(dimensions.width)
 
   let initial = { webp: [], base: [] }
   let srcSets = widths
-    .filter(currentWidth => currentWidth < dimensions.width)
+    .filter((currentWidth) => currentWidth < dimensions.width)
     .reduce((acc, currentWidth) => {
       let currentHeight = Math.round(currentWidth / desiredAspectRatio)
 
@@ -87,7 +87,7 @@ function getFluidGatsbyImage(image, args = {}) {
   })
 
   return {
-    base64: useBase64 ? base64 || lqip : null,
+    base64: buildLowFiUrl(originalPath, { width: maxWidth, height: maxHeight, aspectRatio: desiredAspectRatio }),
     aspectRatio: desiredAspectRatio,
     src,
     srcWebp,

src/utils/buildImageUrl.js

@@ -35,4 +35,12 @@ function buildImageUrl(originalPath, image) {
   return url
 }
 
+export function buildLowFiUrl(originalPath, {width, height, aspectRatio }) {
+  return buildImageUrl(originalPath, {
+    width: (width / 3).toFixed(0),
+    height: (height / 3).toFixed(0),
+    quality: 10
+  })
+}
+
 export default buildImageUrl

src/utils/getBasicImageProps.js

@@ -23,7 +23,7 @@ function getBasicImageProps(image) {
   let originalPath = url.replace(storyblokRegex, '')
 
   let [, , dimensions, , filename] = originalPath.split('/')
-  let [width, height] = dimensions.split('x').map(num => parseInt(num, 10))
+  let [width, height] = dimensions.split('x').map((num) => parseInt(num, 10))
   let [, extension] = filename.split('.')
 
   let aspectRatio = width / height
@@ -36,4 +36,4 @@ function getBasicImageProps(image) {
   }
 }
 
-export default getBasicImageProps
+export default getBasicImageProps