diff --git a/website/src/pages/area-bump/index.js b/website/src/pages/area-bump/index.js
index 11a3a1d6aa..5f63422a31 100644
--- a/website/src/pages/area-bump/index.js
+++ b/website/src/pages/area-bump/index.js
@@ -2,7 +2,6 @@ import React from 'react'
 import range from 'lodash/range'
 import random from 'lodash/random'
 import { useStaticQuery, graphql } from 'gatsby'
-import { getSrc } from 'gatsby-plugin-image'
 import { patternDotsDef, patternLinesDef } from '@nivo/core'
 import { ResponsiveAreaBump, AreaBumpDefaultProps } from '@nivo/bump'
 import { ComponentTemplate } from '../../components/components/ComponentTemplate'
@@ -104,14 +103,14 @@ const initialProperties = {
     motionConfig: AreaBumpDefaultProps.motionConfig,
 }
 
-const Bump = () => {
+const AreaBump = () => {
     const {
         image: {
             childImageSharp: { gatsbyImageData: image },
         },
     } = useStaticQuery(graphql`
         query {
-            image: file(absolutePath: { glob: "**/src/assets/captures/bump.png" }) {
+            image: file(absolutePath: { glob: "**/src/assets/captures/area-bump.png" }) {
                 childImageSharp {
                     gatsbyImageData(layout: FIXED, width: 900, quality: 100)
                 }
@@ -154,4 +153,4 @@ const Bump = () => {
     )
 }
 
-export default Bump
+export default AreaBump
diff --git a/website/src/pages/bar/api.js b/website/src/pages/bar/api.js
index e9992f89d8..fd46f4b43e 100644
--- a/website/src/pages/bar/api.js
+++ b/website/src/pages/bar/api.js
@@ -5,13 +5,28 @@ import { groups } from '../../data/components/bar/props'
 import meta from '../../data/components/bar/meta.yml'
 import mapper from '../../data/components/bar/mapper'
 import { generateLightDataSet } from '../../data/components/bar/generator'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const { data, keys } = generateLightDataSet()
 
 const BarApi = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/bar.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <>
-            <Seo title="Bar HTTP API" keywords={[...meta.Bar.tags, 'HTTP API']} />
+            <Seo title="Bar HTTP API" image={image} keywords={[...meta.Bar.tags, 'HTTP API']} />
             <ApiClient
                 componentName="Bar"
                 chartClass="bar"
diff --git a/website/src/pages/bar/canvas.js b/website/src/pages/bar/canvas.js
index cc655c6d92..31b5159f46 100644
--- a/website/src/pages/bar/canvas.js
+++ b/website/src/pages/bar/canvas.js
@@ -5,6 +5,7 @@ import meta from '../../data/components/bar/meta.yml'
 import { generateHeavyDataSet } from '../../data/components/bar/generator'
 import mapper from '../../data/components/bar/mapper'
 import { groups } from '../../data/components/bar/props'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const Tooltip = data => {
     /* return custom tooltip */
@@ -99,6 +100,20 @@ const initialProperties = {
 }
 
 const BarCanvas = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/bar-canvas.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="BarCanvas"
@@ -116,6 +131,7 @@ const BarCanvas = () => {
             })}
             generateData={generateHeavyDataSet}
             getTabData={data => data.data}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/bar/index.js b/website/src/pages/bar/index.js
index 98e87ce0b9..43c8d0042b 100644
--- a/website/src/pages/bar/index.js
+++ b/website/src/pages/bar/index.js
@@ -6,6 +6,7 @@ import meta from '../../data/components/bar/meta.yml'
 import { generateLightDataSet } from '../../data/components/bar/generator'
 import mapper from '../../data/components/bar/mapper'
 import { groups } from '../../data/components/bar/props'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const Tooltip = () => {
     /* return custom tooltip */
@@ -151,6 +152,20 @@ const initialProperties = {
 }
 
 const Bar = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/bar.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="Bar"
@@ -169,6 +184,7 @@ const Bar = () => {
             })}
             generateData={generateLightDataSet}
             getTabData={data => data.data}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/bullet/index.js b/website/src/pages/bullet/index.js
index 37bf1a10f4..3981de72c6 100644
--- a/website/src/pages/bullet/index.js
+++ b/website/src/pages/bullet/index.js
@@ -5,6 +5,7 @@ import { generateBulletData } from '@nivo/generators'
 import { ComponentTemplate } from '../../components/components/ComponentTemplate'
 import meta from '../../data/components/bullet/meta.yml'
 import { groups } from '../../data/components/bullet/props'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const generateData = () => [
     generateBulletData('temp.', shuffle([100, 120, 140])[0]),
@@ -46,6 +47,20 @@ const initialProperties = {
 }
 
 const Bullet = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/bullet.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="Bullet"
@@ -57,6 +72,7 @@ const Bullet = () => {
             initialProperties={initialProperties}
             defaultProperties={defaultProps}
             generateData={generateData}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/bump/index.js b/website/src/pages/bump/index.js
index 4e57bf0fc7..cc47fec798 100644
--- a/website/src/pages/bump/index.js
+++ b/website/src/pages/bump/index.js
@@ -6,6 +6,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
 import meta from '../../data/components/bump/meta.yml'
 import { groups } from '../../data/components/bump/props'
 import mapper from '../../data/components/bump/mapper'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const generateData = () => {
     const years = range(2000, 2005)
@@ -115,6 +116,20 @@ const initialProperties = {
 }
 
 const Bump = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/bump.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="Bump"
@@ -127,6 +142,7 @@ const Bump = () => {
             initialProperties={initialProperties}
             propertiesMapper={mapper}
             generateData={generateData}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/calendar/api.js b/website/src/pages/calendar/api.js
index 7d989cea9e..2931fcba8b 100644
--- a/website/src/pages/calendar/api.js
+++ b/website/src/pages/calendar/api.js
@@ -5,6 +5,7 @@ import ApiClient from '../../components/components/api-client/ApiClient'
 import mapper from '../../data/components/calendar/mapper'
 import { groups } from '../../data/components/calendar/props'
 import meta from '../../data/components/calendar/meta.yml'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const from = new Date(2015, 3, 1)
 const to = new Date(2018, 7, 12)
@@ -12,9 +13,27 @@ const generateData = () => generateDayCounts(from, to)
 const data = generateData()
 
 const CalendarApi = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/calendar.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <>
-            <Seo title="Calendar HTTP API" keywords={[...meta.Calendar.tags, 'HTTP API']} />
+            <Seo
+                title="Calendar HTTP API"
+                image={image}
+                keywords={[...meta.Calendar.tags, 'HTTP API']}
+            />
             <ApiClient
                 componentName="Calendar"
                 chartClass="calendar"
diff --git a/website/src/pages/calendar/canvas.js b/website/src/pages/calendar/canvas.js
index 8f9e6be135..6f73e751eb 100644
--- a/website/src/pages/calendar/canvas.js
+++ b/website/src/pages/calendar/canvas.js
@@ -5,6 +5,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
 import meta from '../../data/components/calendar/meta.yml'
 import mapper from '../../data/components/calendar/mapper'
 import { groups } from '../../data/components/calendar/props'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const from = new Date(2013, 3, 1)
 const to = new Date(2019, 7, 12)
@@ -67,6 +68,20 @@ const initialProperties = {
 }
 
 const CalendarCanvas = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/calendar.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="CalendarCanvas"
@@ -83,6 +98,7 @@ const CalendarCanvas = () => {
                 tooltip: properties.tooltip ? Tooltip : undefined,
             })}
             generateData={generateData}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/calendar/index.js b/website/src/pages/calendar/index.js
index 3d7a32d7ad..1a9d108985 100644
--- a/website/src/pages/calendar/index.js
+++ b/website/src/pages/calendar/index.js
@@ -5,6 +5,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
 import meta from '../../data/components/calendar/meta.yml'
 import mapper from '../../data/components/calendar/mapper'
 import { groups } from '../../data/components/calendar/props'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const Tooltip = data => {
     /* return custom tooltip */
@@ -65,6 +66,20 @@ const initialProperties = {
 }
 
 const Calendar = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/calendar.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="Calendar"
@@ -81,6 +96,7 @@ const Calendar = () => {
                 tooltip: properties.tooltip ? Tooltip : undefined,
             })}
             generateData={generateData}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/chord/api.js b/website/src/pages/chord/api.js
index b7dd1958df..6bdaaf080a 100644
--- a/website/src/pages/chord/api.js
+++ b/website/src/pages/chord/api.js
@@ -5,15 +5,30 @@ import ApiClient from '../../components/components/api-client/ApiClient'
 import { groups } from '../../data/components/chord/props'
 import mapper from '../../data/components/chord/mapper'
 import meta from '../../data/components/chord/meta.yml'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const MATRIX_SIZE = 5
 
 const data = generateChordData({ size: MATRIX_SIZE })
 
 const ChordApi = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/chord.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <>
-            <Seo title="Chord HTTP API" keywords={[...meta.Chord.tags, 'HTTP API']} />
+            <Seo title="Chord HTTP API" image={image} keywords={[...meta.Chord.tags, 'HTTP API']} />
             <ApiClient
                 componentName="Chord"
                 chartClass="chord"
diff --git a/website/src/pages/chord/canvas.js b/website/src/pages/chord/canvas.js
index b7db1a8128..f07a272374 100644
--- a/website/src/pages/chord/canvas.js
+++ b/website/src/pages/chord/canvas.js
@@ -5,6 +5,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
 import meta from '../../data/components/chord/meta.yml'
 import mapper from '../../data/components/chord/mapper'
 import { groups } from '../../data/components/chord/props'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const MATRIX_SIZE = 38
 
@@ -87,6 +88,20 @@ const initialProperties = {
 const generateData = () => generateChordData({ size: MATRIX_SIZE })
 
 const ChordCanvas = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/chord-canvas.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="ChordCanvas"
@@ -105,6 +120,7 @@ const ChordCanvas = () => {
             dataKey="matrix"
             getDataSize={() => MATRIX_SIZE * MATRIX_SIZE + MATRIX_SIZE}
             getTabData={data => data.matrix}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/chord/index.js b/website/src/pages/chord/index.js
index 4624c89b8a..e702f55717 100644
--- a/website/src/pages/chord/index.js
+++ b/website/src/pages/chord/index.js
@@ -5,6 +5,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
 import meta from '../../data/components/chord/meta.yml'
 import mapper from '../../data/components/chord/mapper'
 import { groups } from '../../data/components/chord/props'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const MATRIX_SIZE = 5
 
@@ -89,6 +90,20 @@ const initialProperties = {
 const generateData = () => generateChordData({ size: MATRIX_SIZE })
 
 const Chord = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/chord.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="Chord"
@@ -106,6 +121,7 @@ const Chord = () => {
             generateData={generateData}
             dataKey="matrix"
             getTabData={data => data.matrix}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/choropleth/canvas.js b/website/src/pages/choropleth/canvas.js
index bb088062c6..4215577f11 100644
--- a/website/src/pages/choropleth/canvas.js
+++ b/website/src/pages/choropleth/canvas.js
@@ -6,6 +6,7 @@ import mapper from '../../data/components/geo/mapper'
 import { groups } from '../../data/components/choropleth/props'
 import { generateChoroplethData } from '../../data/components/geo/generator'
 import countries from '../../data/components/geo/world_countries'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const Tooltip = data => {
     /* return custom tooltip */
@@ -63,6 +64,20 @@ const initialProperties = {
 }
 
 const ChoroplethCanvas = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/choropleth-canvas.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="ChoroplethCanvas"
@@ -80,6 +95,7 @@ const ChoroplethCanvas = () => {
                 tooltip: properties.tooltip ? Tooltip : undefined,
             })}
             generateData={generateChoroplethData}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/choropleth/index.js b/website/src/pages/choropleth/index.js
index f7920d0385..1013a772fd 100644
--- a/website/src/pages/choropleth/index.js
+++ b/website/src/pages/choropleth/index.js
@@ -7,6 +7,7 @@ import mapper from '../../data/components/geo/mapper'
 import { groups } from '../../data/components/choropleth/props'
 import { generateChoroplethData } from '../../data/components/geo/generator'
 import countries from '../../data/components/geo/world_countries'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const Tooltip = data => {
     /* return custom tooltip */
@@ -75,6 +76,20 @@ const initialProperties = {
 }
 
 const Choropleth = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/choropleth.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="Choropleth"
@@ -92,6 +107,7 @@ const Choropleth = () => {
                 tooltip: properties.tooltip ? Tooltip : undefined,
             })}
             generateData={generateChoroplethData}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/circle-packing/api.js b/website/src/pages/circle-packing/api.js
index 44d6e0bd4f..2fd03ffa06 100644
--- a/website/src/pages/circle-packing/api.js
+++ b/website/src/pages/circle-packing/api.js
@@ -5,14 +5,30 @@ import ApiClient from '../../components/components/api-client/ApiClient'
 import { groups } from '../../data/components/circle-packing/props'
 import mapper from '../../data/components/circle-packing/mapper'
 import meta from '../../data/components/circle-packing/meta.yml'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const root = generateLibTree()
 
 const CirclePackingApi = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/circle-packing.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <>
             <Seo
                 title="CirclePacking HTTP API"
+                image={image}
                 keywords={[...meta.CirclePacking.tags, 'HTTP API']}
             />
             <ApiClient
diff --git a/website/src/pages/circle-packing/canvas.js b/website/src/pages/circle-packing/canvas.js
index 421170f230..c9fa7b30ee 100644
--- a/website/src/pages/circle-packing/canvas.js
+++ b/website/src/pages/circle-packing/canvas.js
@@ -6,6 +6,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
 import meta from '../../data/components/circle-packing/meta.yml'
 import mapper from '../../data/components/circle-packing/mapper'
 import { groups } from '../../data/components/circle-packing/props'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const NODE_COUNT = 800
 
@@ -57,6 +58,22 @@ const initialProperties = {
 }
 
 const CirclePackingCanvas = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(
+                absolutePath: { glob: "**/src/assets/captures/circle-packing-canvas.png" }
+            ) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="CirclePackingCanvas"
@@ -70,6 +87,7 @@ const CirclePackingCanvas = () => {
             propertiesMapper={mapper}
             generateData={generateData}
             getDataSize={() => NODE_COUNT}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/circle-packing/html.js b/website/src/pages/circle-packing/html.js
index ef227e0357..61706cc049 100644
--- a/website/src/pages/circle-packing/html.js
+++ b/website/src/pages/circle-packing/html.js
@@ -5,6 +5,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
 import meta from '../../data/components/circle-packing/meta.yml'
 import mapper from '../../data/components/circle-packing/mapper'
 import { groups } from '../../data/components/circle-packing/props'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const generateData = () => generateLibTree()
 
@@ -43,6 +44,20 @@ const initialProperties = {
 }
 
 const CirclePackingHtml = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/circle-packing.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="CirclePackingHtml"
@@ -56,6 +71,7 @@ const CirclePackingHtml = () => {
             propertiesMapper={mapper}
             generateData={generateData}
             dataKey="root"
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/circle-packing/index.js b/website/src/pages/circle-packing/index.js
index 67c5afe6e2..374eb64607 100644
--- a/website/src/pages/circle-packing/index.js
+++ b/website/src/pages/circle-packing/index.js
@@ -6,6 +6,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
 import meta from '../../data/components/circle-packing/meta.yml'
 import mapper from '../../data/components/circle-packing/mapper'
 import { groups } from '../../data/components/circle-packing/props'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const initialProperties = {
     margin: {
@@ -57,6 +58,20 @@ const initialProperties = {
 const generateData = () => generateLibTree()
 
 const CirclePacking = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/circle-packing.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="CirclePacking"
@@ -69,6 +84,7 @@ const CirclePacking = () => {
             defaultProperties={defaultProps}
             propertiesMapper={mapper}
             generateData={generateData}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/funnel/index.tsx b/website/src/pages/funnel/index.tsx
index 35d2905977..06fff469f5 100644
--- a/website/src/pages/funnel/index.tsx
+++ b/website/src/pages/funnel/index.tsx
@@ -8,6 +8,7 @@ import mapper from '../../data/components/funnel/mapper'
 import { groups } from '../../data/components/funnel/props'
 import { generateLightDataSet } from '../../data/components/funnel/generator'
 import { FunnelDatum, FunnelSvgProps } from '@nivo/funnel/dist/types/types'
+import { graphql, useStaticQuery } from 'gatsby'
 
 type MappedFunnelProps = Omit<FunnelSvgProps<FunnelDatum>, 'data' | 'width' | 'height'>
 type UnmappedFunnelProps = Omit<MappedFunnelProps, 'valueFormat'> & {
@@ -56,41 +57,58 @@ const initialProperties: UnmappedFunnelProps = {
     motionConfig: 'wobbly' as const,
 }
 
-const Funnel = () => (
-    <ComponentTemplate<UnmappedFunnelProps, MappedFunnelProps, FunnelDatum[]>
-        name="Funnel"
-        meta={meta.Funnel}
-        icon="funnel"
-        flavors={meta.flavors}
-        currentFlavor="svg"
-        properties={groups}
-        initialProperties={initialProperties}
-        defaultProperties={svgDefaultProps}
-        propertiesMapper={mapper}
-        generateData={generateLightDataSet}
-    >
-        {(properties, data, theme, logAction) => (
-            <ResponsiveFunnel
-                data={data}
-                {...properties}
-                theme={merge({}, theme, {
-                    labels: {
-                        text: {
-                            fontSize: 14,
+const Funnel = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/funnel.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
+    return (
+        <ComponentTemplate<UnmappedFunnelProps, MappedFunnelProps, FunnelDatum[]>
+            name="Funnel"
+            meta={meta.Funnel}
+            icon="funnel"
+            flavors={meta.flavors}
+            currentFlavor="svg"
+            properties={groups}
+            initialProperties={initialProperties}
+            defaultProperties={svgDefaultProps}
+            propertiesMapper={mapper}
+            generateData={generateLightDataSet}
+            image={image}
+        >
+            {(properties, data, theme, logAction) => (
+                <ResponsiveFunnel
+                    data={data}
+                    {...properties}
+                    theme={merge({}, theme, {
+                        labels: {
+                            text: {
+                                fontSize: 14,
+                            },
                         },
-                    },
-                })}
-                onClick={part => {
-                    logAction({
-                        type: 'click',
-                        label: `[part] id: ${part.data.id}, value: ${part.formattedValue}`,
-                        color: part.color,
-                        data: omit(part, ['points', 'areaPoints', 'borderPoints']),
-                    })
-                }}
-            />
-        )}
-    </ComponentTemplate>
-)
+                    })}
+                    onClick={part => {
+                        logAction({
+                            type: 'click',
+                            label: `[part] id: ${part.data.id}, value: ${part.formattedValue}`,
+                            color: part.color,
+                            data: omit(part, ['points', 'areaPoints', 'borderPoints']),
+                        })
+                    }}
+                />
+            )}
+        </ComponentTemplate>
+    )
+}
 
 export default Funnel
diff --git a/website/src/pages/geomap/canvas.js b/website/src/pages/geomap/canvas.js
index af9d5e1a8e..1ce5616e27 100644
--- a/website/src/pages/geomap/canvas.js
+++ b/website/src/pages/geomap/canvas.js
@@ -6,6 +6,7 @@ import meta from '../../data/components/geomap/meta.yml'
 import mapper from '../../data/components/geo/mapper'
 import { groups } from '../../data/components/geomap/props'
 import countries from '../../data/components/geo/world_countries'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const initialProperties = {
     pixelRatio:
@@ -35,6 +36,20 @@ const initialProperties = {
 }
 
 const GeoMapCanvas = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/geomap-canvas.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="GeoMapCanvas"
@@ -51,6 +66,7 @@ const GeoMapCanvas = () => {
                 ...properties,
             })}
             hasData={false}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/geomap/index.js b/website/src/pages/geomap/index.js
index d7d6693a94..c7cb693867 100644
--- a/website/src/pages/geomap/index.js
+++ b/website/src/pages/geomap/index.js
@@ -6,6 +6,7 @@ import meta from '../../data/components/geomap/meta.yml'
 import mapper from '../../data/components/geo/mapper'
 import { groups } from '../../data/components/geomap/props'
 import countries from '../../data/components/geo/world_countries'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const initialProperties = {
     margin: {
@@ -32,6 +33,20 @@ const initialProperties = {
 }
 
 const GeoMap = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/geomap.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="GeoMap"
@@ -48,6 +63,7 @@ const GeoMap = () => {
                 ...properties,
             })}
             hasData={false}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/heatmap/api.js b/website/src/pages/heatmap/api.js
index bad7cef0e1..ed8c9c3049 100644
--- a/website/src/pages/heatmap/api.js
+++ b/website/src/pages/heatmap/api.js
@@ -5,13 +5,32 @@ import { groups } from '../../data/components/heatmap/props'
 import mapper from '../../data/components/heatmap/mapper'
 import { generateLightDataSet } from '../../data/components/heatmap/generator'
 import meta from '../../data/components/heatmap/meta.yml'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const data = generateLightDataSet()
 
 const HeatMapApi = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/heatmap.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <>
-            <Seo title="HeatMap HTTP API" keywords={[...meta.HeatMap.tags, 'HTTP API']} />
+            <Seo
+                title="HeatMap HTTP API"
+                image={image}
+                keywords={[...meta.HeatMap.tags, 'HTTP API']}
+            />
             <ApiClient
                 componentName="HeatMap"
                 chartClass="heatmap"
diff --git a/website/src/pages/heatmap/canvas.js b/website/src/pages/heatmap/canvas.js
index ffc9a99a87..90b220ef32 100644
--- a/website/src/pages/heatmap/canvas.js
+++ b/website/src/pages/heatmap/canvas.js
@@ -6,6 +6,7 @@ import meta from '../../data/components/heatmap/meta.yml'
 import mapper from '../../data/components/heatmap/mapper'
 import { groups } from '../../data/components/heatmap/props'
 import { generateHeavyDataSet } from '../../data/components/heatmap/generator'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const initialProperties = {
     indexBy: 'country',
@@ -95,6 +96,20 @@ const initialProperties = {
 }
 
 const HeatMapCanvas = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/heatmap-canvas.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="HeatMapCanvas"
@@ -115,6 +130,7 @@ const HeatMapCanvas = () => {
             generateData={generateHeavyDataSet}
             getDataSize={data => data.data.length * data.keys.length}
             getTabData={data => data.data}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/heatmap/index.js b/website/src/pages/heatmap/index.js
index 28bb862d91..97aecda9e5 100644
--- a/website/src/pages/heatmap/index.js
+++ b/website/src/pages/heatmap/index.js
@@ -7,6 +7,7 @@ import meta from '../../data/components/heatmap/meta.yml'
 import mapper from '../../data/components/heatmap/mapper'
 import { groups } from '../../data/components/heatmap/props'
 import { generateLightDataSet } from '../../data/components/heatmap/generator'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const initialProperties = {
     indexBy: 'country',
@@ -105,6 +106,20 @@ const initialProperties = {
 }
 
 const HeatMap = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/heatmap.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="HeatMap"
@@ -125,6 +140,7 @@ const HeatMap = () => {
             })}
             generateData={generateLightDataSet}
             getTabData={data => data.data}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/line/api.js b/website/src/pages/line/api.js
index 10a51b4675..5cb60e12ef 100644
--- a/website/src/pages/line/api.js
+++ b/website/src/pages/line/api.js
@@ -7,13 +7,28 @@ import mapper from '../../data/components/line/mapper'
 import defaultSettings from '../../data/components/line/defaults'
 import { generateLightDataSet } from '../../data/components/line/generator'
 import meta from '../../data/components/line/meta.yml'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const data = generateLightDataSet()
 
 const LineApi = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/line.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <>
-            <Seo title="Line HTTP API" keywords={[...meta.Line.tags, 'HTTP API']} />
+            <Seo title="Line HTTP API" image={image} keywords={[...meta.Line.tags, 'HTTP API']} />
             <ApiClient
                 componentName="Line"
                 apiPath="/charts/line"
diff --git a/website/src/pages/line/canvas.js b/website/src/pages/line/canvas.js
index 302ba7cdb1..84ab43e8e1 100644
--- a/website/src/pages/line/canvas.js
+++ b/website/src/pages/line/canvas.js
@@ -7,6 +7,7 @@ import mapper from '../../data/components/line/mapper'
 import { groups } from '../../data/components/line/props'
 import defaultSettings from '../../data/components/line/defaults'
 import { generateHeavyDataSet } from '../../data/components/line/generator'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const xValues = [0, 20, 40, 60, 80, 100, 120]
 const yValues = [0, 500, 1000, 1500, 2000, 2500]
@@ -115,6 +116,20 @@ const initialProperties = {
 }
 
 const LineCanvas = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/line-canvas.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="Line"
@@ -128,6 +143,7 @@ const LineCanvas = () => {
             propertiesMapper={mapper}
             generateData={generateHeavyDataSet}
             getDataSize={data => data.length * data[0].data.length}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/line/index.js b/website/src/pages/line/index.js
index bb40a5de21..0c733fc17d 100644
--- a/website/src/pages/line/index.js
+++ b/website/src/pages/line/index.js
@@ -7,6 +7,7 @@ import mapper from '../../data/components/line/mapper'
 import { groups } from '../../data/components/line/props'
 import defaultSettings from '../../data/components/line/defaults'
 import { generateLightDataSet } from '../../data/components/line/generator'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const initialProperties = {
     ...omit(defaultSettings, ['width', 'height']),
@@ -61,6 +62,20 @@ const linearData = [
 ]
 
 const Line = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/line.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="Line"
@@ -73,6 +88,7 @@ const Line = () => {
             defaultProperties={LineDefaultProps}
             propertiesMapper={mapper}
             generateData={generateLightDataSet}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/marimekko/index.js b/website/src/pages/marimekko/index.js
index 510235554d..b7706bc1b2 100644
--- a/website/src/pages/marimekko/index.js
+++ b/website/src/pages/marimekko/index.js
@@ -5,6 +5,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
 import meta from '../../data/components/marimekko/meta.yml'
 import mapper from '../../data/components/marimekko/mapper'
 import { groups } from '../../data/components/marimekko/props'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const getRandomValue = () => random(0, 32)
 
@@ -141,6 +142,20 @@ const initialProperties = {
 }
 
 const Marimekko = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/marimekko.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="Marimekko"
@@ -153,6 +168,7 @@ const Marimekko = () => {
             defaultProperties={defaultProps}
             propertiesMapper={mapper}
             generateData={generateData}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 const handleClick = bar => {
diff --git a/website/src/pages/network/canvas.js b/website/src/pages/network/canvas.js
index 64576430f1..bf9c144010 100644
--- a/website/src/pages/network/canvas.js
+++ b/website/src/pages/network/canvas.js
@@ -4,6 +4,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
 import meta from '../../data/components/network/meta.yml'
 import { groups } from '../../data/components/network/props'
 import { generateNetworkData } from '@nivo/generators'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const initialProperties = Object.freeze({
     pixelRatio:
@@ -33,6 +34,20 @@ const initialProperties = Object.freeze({
 const generateData = () => generateNetworkData()
 
 const NetworkCanvas = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/network-canvas.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="NetworkCanvas"
@@ -52,6 +67,7 @@ const NetworkCanvas = () => {
                 })
             }
             getDataSize={data => data.nodes.length}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/network/index.js b/website/src/pages/network/index.js
index 1e2a2bc7b8..f69ffac784 100644
--- a/website/src/pages/network/index.js
+++ b/website/src/pages/network/index.js
@@ -4,6 +4,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
 import meta from '../../data/components/network/meta.yml'
 import { groups } from '../../data/components/network/props'
 import { generateNetworkData } from '@nivo/generators'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const initialProperties = Object.freeze({
     margin: {
@@ -37,6 +38,20 @@ const initialProperties = Object.freeze({
 const generateData = () => generateNetworkData()
 
 const Network = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/network.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="Network"
@@ -49,6 +64,7 @@ const Network = () => {
             defaultProperties={NetworkDefaultProps}
             generateData={generateData}
             getDataSize={data => data.nodes.length}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/parallel-coordinates/canvas.js b/website/src/pages/parallel-coordinates/canvas.js
index dcf882411a..986be423b1 100644
--- a/website/src/pages/parallel-coordinates/canvas.js
+++ b/website/src/pages/parallel-coordinates/canvas.js
@@ -7,6 +7,7 @@ import meta from '../../data/components/parallel-coordinates/meta.yml'
 import mapper from '../../data/components/parallel-coordinates/mapper'
 import { groups } from '../../data/components/parallel-coordinates/props'
 import variables from '../../data/components/parallel-coordinates/variables'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const lineCount = 320
 
@@ -33,6 +34,22 @@ const initialProperties = {
 const generateData = () => generateParallelCoordinatesData({ size: lineCount })
 
 const ParallelCoordinatesCanvas = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(
+                absolutePath: { glob: "**/src/assets/captures/parallel-coordinates-canvas.png" }
+            ) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="ParallelCoordinatesCanvas"
@@ -46,6 +63,7 @@ const ParallelCoordinatesCanvas = () => {
             propertiesMapper={mapper}
             generateData={generateData}
             getDataSize={() => lineCount}
+            image={image}
         >
             {(properties, data, theme) => {
                 return (
diff --git a/website/src/pages/parallel-coordinates/index.js b/website/src/pages/parallel-coordinates/index.js
index df6774dfec..927fd3d527 100644
--- a/website/src/pages/parallel-coordinates/index.js
+++ b/website/src/pages/parallel-coordinates/index.js
@@ -7,6 +7,7 @@ import meta from '../../data/components/parallel-coordinates/meta.yml'
 import mapper from '../../data/components/parallel-coordinates/mapper'
 import { groups } from '../../data/components/parallel-coordinates/props'
 import variables from '../../data/components/parallel-coordinates/variables'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const initialProperties = {
     variables,
@@ -31,6 +32,20 @@ const initialProperties = {
 const generateData = () => generateParallelCoordinatesData({ size: 32 })
 
 const ParallelCoordinates = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/parallel-coordinates.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="ParallelCoordinates"
@@ -43,6 +58,7 @@ const ParallelCoordinates = () => {
             defaultProperties={commonDefaultProps}
             propertiesMapper={mapper}
             generateData={generateData}
+            image={image}
         >
             {(properties, data, theme) => {
                 return (
diff --git a/website/src/pages/pie/api.js b/website/src/pages/pie/api.js
index 0ae635b744..8935c1f816 100644
--- a/website/src/pages/pie/api.js
+++ b/website/src/pages/pie/api.js
@@ -5,6 +5,7 @@ import ApiClient from '../../components/components/api-client/ApiClient'
 import { groups } from '../../data/components/pie/props'
 import mapper from '../../data/components/pie/mapper'
 import meta from '../../data/components/pie/meta.yml'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const DATASET_SIZE = 12
 const generateData = () =>
@@ -16,9 +17,23 @@ const generateData = () =>
 const data = generateData()
 
 const PieApi = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/pie.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <>
-            <Seo title="Pie HTTP API" keywords={[...meta.Pie.tags, 'HTTP API']} />
+            <Seo title="Pie HTTP API" image={image} keywords={[...meta.Pie.tags, 'HTTP API']} />
             <ApiClient
                 componentName="Pie"
                 chartClass="pie"
diff --git a/website/src/pages/pie/canvas.js b/website/src/pages/pie/canvas.js
index 18414b906b..3555d28f47 100644
--- a/website/src/pages/pie/canvas.js
+++ b/website/src/pages/pie/canvas.js
@@ -5,6 +5,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
 import meta from '../../data/components/pie/meta.yml'
 import mapper from '../../data/components/pie/mapper'
 import { groups } from '../../data/components/pie/props'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const DATASET_SIZE = 24
 const generateData = () =>
@@ -89,6 +90,20 @@ const initialProperties = {
 }
 
 const PieCanvas = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/pie-canvas.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="PieCanvas"
@@ -102,6 +117,7 @@ const PieCanvas = () => {
             propertiesMapper={mapper}
             generateData={generateData}
             getDataSize={data => data.length}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 const handleArcClick = slice => {
diff --git a/website/src/pages/pie/index.js b/website/src/pages/pie/index.js
index 476863e10d..cb6e8ad758 100644
--- a/website/src/pages/pie/index.js
+++ b/website/src/pages/pie/index.js
@@ -5,6 +5,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
 import meta from '../../data/components/pie/meta.yml'
 import mapper from '../../data/components/pie/mapper'
 import { groups } from '../../data/components/pie/props'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const DATASET_SIZE = 5
 const generateData = () =>
@@ -101,6 +102,20 @@ const initialProperties = {
 }
 
 const Pie = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/pie.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="Pie"
@@ -113,6 +128,7 @@ const Pie = () => {
             defaultProperties={defaultProps}
             propertiesMapper={mapper}
             generateData={generateData}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 const handleArcClick = slice => {
diff --git a/website/src/pages/radar/api.js b/website/src/pages/radar/api.js
index 8aaa1fb430..2cec194fd9 100644
--- a/website/src/pages/radar/api.js
+++ b/website/src/pages/radar/api.js
@@ -5,13 +5,28 @@ import ApiClient from '../../components/components/api-client/ApiClient'
 import { groups } from '../../data/components/radar/props'
 import mapper from '../../data/components/radar/mapper'
 import meta from '../../data/components/radar/meta.yml'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const { data, keys } = generateWinesTastes()
 
 const RadarApi = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/radar.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <>
-            <Seo title="Radar HTTP API" keywords={[...meta.Radar.tags, 'HTTP API']} />
+            <Seo title="Radar HTTP API" image={image} keywords={[...meta.Radar.tags, 'HTTP API']} />
             <ApiClient
                 componentName="Radar"
                 chartClass="radar"
diff --git a/website/src/pages/radar/index.tsx b/website/src/pages/radar/index.tsx
index 271d73ef35..79521daafc 100644
--- a/website/src/pages/radar/index.tsx
+++ b/website/src/pages/radar/index.tsx
@@ -5,6 +5,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
 import meta from '../../data/components/radar/meta.yml'
 import mapper from '../../data/components/radar/mapper'
 import { groups } from '../../data/components/radar/props'
+import { graphql, useStaticQuery } from 'gatsby'
 
 type MappedRadarProps = Omit<RadarSvgProps<any>, 'data' | 'keys' | 'width' | 'height'>
 type UnmappedRadarProps = Omit<MappedRadarProps, 'valueFormat'> & {
@@ -79,30 +80,52 @@ const initialProperties: UnmappedRadarProps = {
     ],
 }
 
-const Radar = () => (
-    <ComponentTemplate<UnmappedRadarProps, MappedRadarProps, any>
-        name="Radar"
-        meta={meta.Radar}
-        icon="radar"
-        flavors={meta.flavors}
-        currentFlavor="svg"
-        properties={groups}
-        initialProperties={initialProperties}
-        defaultProperties={svgDefaultProps}
-        propertiesMapper={mapper}
-        codePropertiesMapper={(properties: any, data: any) => ({
-            keys: data.keys,
-            ...properties,
-        })}
-        generateData={generateWinesTastes}
-        getTabData={data => data.data}
-    >
-        {(properties, data, theme) => {
-            return (
-                <ResponsiveRadar data={data.data} keys={data.keys} {...properties} theme={theme} />
-            )
-        }}
-    </ComponentTemplate>
-)
+const Radar = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/radar.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
+    return (
+        <ComponentTemplate<UnmappedRadarProps, MappedRadarProps, any>
+            name="Radar"
+            meta={meta.Radar}
+            icon="radar"
+            flavors={meta.flavors}
+            currentFlavor="svg"
+            properties={groups}
+            initialProperties={initialProperties}
+            defaultProperties={svgDefaultProps}
+            propertiesMapper={mapper}
+            codePropertiesMapper={(properties: any, data: any) => ({
+                keys: data.keys,
+                ...properties,
+            })}
+            generateData={generateWinesTastes}
+            getTabData={data => data.data}
+            image={image}
+        >
+            {(properties, data, theme) => {
+                return (
+                    <ResponsiveRadar
+                        data={data.data}
+                        keys={data.keys}
+                        {...properties}
+                        theme={theme}
+                    />
+                )
+            }}
+        </ComponentTemplate>
+    )
+}
 
 export default Radar
diff --git a/website/src/pages/radial-bar/index.tsx b/website/src/pages/radial-bar/index.tsx
index 5f5f1e6988..dbf9b03940 100644
--- a/website/src/pages/radial-bar/index.tsx
+++ b/website/src/pages/radial-bar/index.tsx
@@ -4,6 +4,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
 import meta from '../../data/components/radial-bar/meta.yml'
 import mapper from '../../data/components/radial-bar/mapper'
 import { groups } from '../../data/components/radial-bar/props'
+import { graphql, useStaticQuery } from 'gatsby'
 
 type MappedRadarProps = Omit<RadialBarSvgProps, 'data' | 'width' | 'height'>
 type UnmappedRadarProps = Omit<
@@ -132,35 +133,52 @@ const generateData = () => {
     }))
 }
 
-const RadialBar = () => (
-    <ComponentTemplate<UnmappedRadarProps, MappedRadarProps, any>
-        name="RadialBar"
-        meta={meta.RadialBar}
-        icon="radial-bar"
-        flavors={meta.flavors}
-        currentFlavor="svg"
-        properties={groups}
-        initialProperties={initialProperties}
-        defaultProperties={svgDefaultProps}
-        propertiesMapper={mapper}
-        generateData={generateData}
-    >
-        {(properties, data, theme, logAction) => (
-            <ResponsiveRadialBar
-                data={data}
-                {...properties}
-                theme={theme}
-                onClick={bar => {
-                    logAction({
-                        type: 'click',
-                        label: `${bar.category} - ${bar.groupId}: ${bar.value}`,
-                        color: bar.color,
-                        data: bar,
-                    })
-                }}
-            />
-        )}
-    </ComponentTemplate>
-)
+const RadialBar = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/radial-bar.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
+    return (
+        <ComponentTemplate<UnmappedRadarProps, MappedRadarProps, any>
+            name="RadialBar"
+            meta={meta.RadialBar}
+            icon="radial-bar"
+            flavors={meta.flavors}
+            currentFlavor="svg"
+            properties={groups}
+            initialProperties={initialProperties}
+            defaultProperties={svgDefaultProps}
+            propertiesMapper={mapper}
+            generateData={generateData}
+            image={image}
+        >
+            {(properties, data, theme, logAction) => (
+                <ResponsiveRadialBar
+                    data={data}
+                    {...properties}
+                    theme={theme}
+                    onClick={bar => {
+                        logAction({
+                            type: 'click',
+                            label: `${bar.category} - ${bar.groupId}: ${bar.value}`,
+                            color: bar.color,
+                            data: bar,
+                        })
+                    }}
+                />
+            )}
+        </ComponentTemplate>
+    )
+}
 
 export default RadialBar
diff --git a/website/src/pages/sankey/api.js b/website/src/pages/sankey/api.js
index d02d56b2d8..fbb3eda200 100644
--- a/website/src/pages/sankey/api.js
+++ b/website/src/pages/sankey/api.js
@@ -5,13 +5,32 @@ import ApiClient from '../../components/components/api-client/ApiClient'
 import { groups } from '../../data/components/sankey/props'
 import mapper from '../../data/components/sankey/mapper'
 import meta from '../../data/components/sankey/meta.yml'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const data = generateSankeyData({ nodeCount: 6, maxIterations: 8 })
 
 const SankeyApi = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/sankey.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <>
-            <Seo title="Sankey HTTP API" keywords={[...meta.Sankey.tags, 'HTTP API']} />
+            <Seo
+                title="Sankey HTTP API"
+                image={image}
+                keywords={[...meta.Sankey.tags, 'HTTP API']}
+            />
             <ApiClient
                 componentName="Sankey"
                 chartClass="sankey"
diff --git a/website/src/pages/sankey/index.tsx b/website/src/pages/sankey/index.tsx
index 409100da36..3e0df32382 100644
--- a/website/src/pages/sankey/index.tsx
+++ b/website/src/pages/sankey/index.tsx
@@ -12,6 +12,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
 import meta from '../../data/components/sankey/meta.yml'
 import mapper from '../../data/components/sankey/mapper'
 import { groups } from '../../data/components/sankey/props'
+import { graphql, useStaticQuery } from 'gatsby'
 
 type MappedSankeyProps = Omit<SankeySvgProps<DefaultNode, DefaultLink>, 'data' | 'width' | 'height'>
 type UnmappedSankeyProps = Omit<MappedSankeyProps, 'valueFormat'> & {
@@ -98,54 +99,71 @@ const initialProperties: UnmappedSankeyProps = {
 
 const generateData = () => generateSankeyData({ nodeCount: 6, maxIterations: 8 })
 
-const Sankey = () => (
-    <ComponentTemplate<
-        UnmappedSankeyProps,
-        MappedSankeyProps,
-        SankeySvgProps<DefaultNode, DefaultLink>['data']
-    >
-        name="Sankey"
-        meta={meta.Sankey}
-        icon="sankey"
-        flavors={meta.flavors}
-        currentFlavor="svg"
-        properties={groups}
-        initialProperties={initialProperties}
-        defaultProperties={svgDefaultProps}
-        propertiesMapper={mapper}
-        generateData={generateData}
-    >
-        {(properties, data, theme, logAction) => {
-            return (
-                <ResponsiveSankey
-                    data={data}
-                    {...properties}
-                    theme={theme}
-                    onClick={node => {
-                        let label
-                        if ('id' in node) {
-                            label = `[node] ${node.id}: ${node.value}`
-                        } else {
-                            label = `[link] ${node.source.id} > ${node.target.id}: ${node.value}`
-                        }
+const Sankey = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/sankey.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
+    return (
+        <ComponentTemplate<
+            UnmappedSankeyProps,
+            MappedSankeyProps,
+            SankeySvgProps<DefaultNode, DefaultLink>['data']
+        >
+            name="Sankey"
+            meta={meta.Sankey}
+            icon="sankey"
+            flavors={meta.flavors}
+            currentFlavor="svg"
+            properties={groups}
+            initialProperties={initialProperties}
+            defaultProperties={svgDefaultProps}
+            propertiesMapper={mapper}
+            generateData={generateData}
+            image={image}
+        >
+            {(properties, data, theme, logAction) => {
+                return (
+                    <ResponsiveSankey
+                        data={data}
+                        {...properties}
+                        theme={theme}
+                        onClick={node => {
+                            let label
+                            if ('id' in node) {
+                                label = `[node] ${node.id}: ${node.value}`
+                            } else {
+                                label = `[link] ${node.source.id} > ${node.target.id}: ${node.value}`
+                            }
 
-                        logAction({
-                            type: 'click',
-                            label,
-                            data: omit(node, [
-                                'sourceLinks',
-                                'targetLinks',
-                                'source.sourceLinks',
-                                'source.targetLinks',
-                                'target.sourceLinks',
-                                'target.targetLinks',
-                            ]),
-                        })
-                    }}
-                />
-            )
-        }}
-    </ComponentTemplate>
-)
+                            logAction({
+                                type: 'click',
+                                label,
+                                data: omit(node, [
+                                    'sourceLinks',
+                                    'targetLinks',
+                                    'source.sourceLinks',
+                                    'source.targetLinks',
+                                    'target.sourceLinks',
+                                    'target.targetLinks',
+                                ]),
+                            })
+                        }}
+                    />
+                )
+            }}
+        </ComponentTemplate>
+    )
+}
 
 export default Sankey
diff --git a/website/src/pages/scatterplot/canvas.js b/website/src/pages/scatterplot/canvas.js
index d66ebff05a..0124b55d1d 100644
--- a/website/src/pages/scatterplot/canvas.js
+++ b/website/src/pages/scatterplot/canvas.js
@@ -5,6 +5,7 @@ import meta from '../../data/components/scatterplot/meta.yml'
 import mapper from '../../data/components/scatterplot/mapper'
 import { groups } from '../../data/components/scatterplot/props'
 import { generateHeavyDataSet } from '../../data/components/scatterplot/generator'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const initialProperties = {
     margin: {
@@ -111,6 +112,20 @@ const initialProperties = {
 }
 
 const ScatterPlotCanvas = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/scatterplot-canvas.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="ScatterPlotCanvas"
@@ -123,6 +138,7 @@ const ScatterPlotCanvas = () => {
             defaultProperties={canvasDefaultProps}
             propertiesMapper={mapper}
             generateData={generateHeavyDataSet}
+            image={image}
         >
             {(properties, data, theme, logAction) => (
                 <ResponsiveScatterPlotCanvas
diff --git a/website/src/pages/scatterplot/index.js b/website/src/pages/scatterplot/index.js
index e659e4760d..fa0262c937 100644
--- a/website/src/pages/scatterplot/index.js
+++ b/website/src/pages/scatterplot/index.js
@@ -5,6 +5,7 @@ import meta from '../../data/components/scatterplot/meta.yml'
 import mapper from '../../data/components/scatterplot/mapper'
 import { groups } from '../../data/components/scatterplot/props'
 import { generateLightDataSet } from '../../data/components/scatterplot/generator'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const initialProperties = {
     margin: {
@@ -111,6 +112,20 @@ const initialProperties = {
 }
 
 const ScatterPlot = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/scatterplot.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="ScatterPlot"
@@ -123,6 +138,7 @@ const ScatterPlot = () => {
             defaultProperties={svgDefaultProps}
             propertiesMapper={mapper}
             generateData={generateLightDataSet}
+            image={image}
         >
             {(properties, data, theme, logAction) => (
                 <ResponsiveScatterPlot
diff --git a/website/src/pages/stream/index.js b/website/src/pages/stream/index.js
index 9bfab35824..4cafdfc006 100644
--- a/website/src/pages/stream/index.js
+++ b/website/src/pages/stream/index.js
@@ -6,6 +6,7 @@ import mapper from '../../data/components/stream/mapper'
 import { groups } from '../../data/components/stream/props'
 import { generateLightDataSet } from '../../data/components/stream/generator'
 import defaultSettings from '../../data/components/stream/defaults'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const initialProperties = {
     ...defaultSettings,
@@ -35,6 +36,20 @@ const initialProperties = {
 }
 
 const Stream = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/stream.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="Stream"
@@ -52,6 +67,7 @@ const Stream = () => {
             })}
             generateData={generateLightDataSet}
             getTabData={data => data.data}
+            image={image}
         >
             {(properties, data, theme) => {
                 return (
diff --git a/website/src/pages/sunburst/api.js b/website/src/pages/sunburst/api.js
index 212d102030..1746b6556c 100644
--- a/website/src/pages/sunburst/api.js
+++ b/website/src/pages/sunburst/api.js
@@ -5,13 +5,32 @@ import ApiClient from '../../components/components/api-client/ApiClient'
 import { groups } from '../../data/components/sunburst/props'
 import mapper from '../../data/components/sunburst/mapper'
 import meta from '../../data/components/sunburst/meta.yml'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const data = generateLibTree()
 
 const SunburstApi = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/sunburst.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <>
-            <Seo title="Sunburst HTTP API" keywords={[...meta.Sunburst.tags, 'HTTP API']} />
+            <Seo
+                title="Sunburst HTTP API"
+                image={image}
+                keywords={[...meta.Sunburst.tags, 'HTTP API']}
+            />
             <ApiClient
                 componentName="Sunburst"
                 chartClass="sunburst"
diff --git a/website/src/pages/sunburst/index.js b/website/src/pages/sunburst/index.js
index 8eb989281d..3614f8fa45 100644
--- a/website/src/pages/sunburst/index.js
+++ b/website/src/pages/sunburst/index.js
@@ -6,6 +6,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
 import meta from '../../data/components/sunburst/meta.yml'
 import mapper from '../../data/components/sunburst/mapper'
 import { groups } from '../../data/components/sunburst/props'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const Tooltip = () => {
     /* return custom tooltip */
@@ -53,6 +54,20 @@ const initialProperties = {
 }
 
 const Sunburst = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/sunburst.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="Sunburst"
@@ -65,6 +80,7 @@ const Sunburst = () => {
             initialProperties={initialProperties}
             propertiesMapper={mapper}
             generateData={generateData}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/swarmplot/canvas.js b/website/src/pages/swarmplot/canvas.js
index 4d38df5acb..3ba4cc9304 100644
--- a/website/src/pages/swarmplot/canvas.js
+++ b/website/src/pages/swarmplot/canvas.js
@@ -5,6 +5,7 @@ import meta from '../../data/components/swarmplot/meta.yml'
 import mapper from '../../data/components/swarmplot/mapper'
 import { groups } from '../../data/components/swarmplot/props'
 import { generateHeavyDataSet } from '../../data/components/swarmplot/generator'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const initialProperties = Object.freeze({
     pixelRatio:
@@ -92,7 +93,21 @@ const initialProperties = Object.freeze({
     debugMesh: false,
 })
 
-const ScatterPlotCanvas = () => {
+const SwarmPlotCanvas = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/swarmplot-canvas.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="SwarmPlotCanvas"
@@ -111,6 +126,7 @@ const ScatterPlotCanvas = () => {
             generateData={generateHeavyDataSet}
             getTabData={data => data.data}
             getDataSize={data => data.data.length}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
@@ -134,4 +150,4 @@ const ScatterPlotCanvas = () => {
     )
 }
 
-export default ScatterPlotCanvas
+export default SwarmPlotCanvas
diff --git a/website/src/pages/swarmplot/index.js b/website/src/pages/swarmplot/index.js
index b394bf392d..22eabab9d3 100644
--- a/website/src/pages/swarmplot/index.js
+++ b/website/src/pages/swarmplot/index.js
@@ -5,6 +5,7 @@ import meta from '../../data/components/swarmplot/meta.yml'
 import mapper from '../../data/components/swarmplot/mapper'
 import { groups } from '../../data/components/swarmplot/props'
 import { generateLightDataSet } from '../../data/components/swarmplot/generator'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const initialProperties = Object.freeze({
     groupBy: 'group',
@@ -96,7 +97,21 @@ const initialProperties = Object.freeze({
     motionConfig: 'gentle',
 })
 
-const ScatterPlot = () => {
+const SwarmPlot = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/swarmplot.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="SwarmPlot"
@@ -115,6 +130,7 @@ const ScatterPlot = () => {
             generateData={generateLightDataSet}
             getTabData={data => data.data}
             getDataSize={data => data.data.length}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
@@ -138,4 +154,4 @@ const ScatterPlot = () => {
     )
 }
 
-export default ScatterPlot
+export default SwarmPlot
diff --git a/website/src/pages/treemap/api.js b/website/src/pages/treemap/api.js
index d6781e8a63..2783564358 100644
--- a/website/src/pages/treemap/api.js
+++ b/website/src/pages/treemap/api.js
@@ -6,13 +6,32 @@ import { groups } from '../../data/components/treemap/props'
 import mapper from '../../data/components/treemap/mapper'
 import { generateLightDataSet } from '../../data/components/treemap/generator'
 import meta from '../../data/components/treemap/meta.yml'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const data = generateLightDataSet().root
 
 const TreeMapApi = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/treemap.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <>
-            <Seo title="TreeMap HTTP API" keywords={[...meta.TreeMap.tags, 'HTTP API']} />
+            <Seo
+                title="TreeMap HTTP API"
+                image={image}
+                keywords={[...meta.TreeMap.tags, 'HTTP API']}
+            />
             <ApiClient
                 componentName="TreeMap"
                 chartClass="treemap"
diff --git a/website/src/pages/treemap/canvas.js b/website/src/pages/treemap/canvas.js
index 5a16ffcbae..cce72be576 100644
--- a/website/src/pages/treemap/canvas.js
+++ b/website/src/pages/treemap/canvas.js
@@ -10,6 +10,7 @@ import meta from '../../data/components/treemap/meta.yml'
 import mapper from '../../data/components/treemap/mapper'
 import { groups } from '../../data/components/treemap/props'
 import { generateHeavyDataSet } from '../../data/components/treemap/generator'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const initialProperties = {
     identity: TreeMapCanvasDefaultProps.identity,
@@ -55,6 +56,20 @@ const initialProperties = {
 }
 
 const TreeMapCanvas = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/treemap-canvas.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="TreeMapCanvas"
@@ -67,6 +82,7 @@ const TreeMapCanvas = () => {
             defaultProperties={TreeMapCanvasDefaultProps}
             propertiesMapper={mapper}
             generateData={generateHeavyDataSet}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/treemap/html.js b/website/src/pages/treemap/html.js
index 9719a5f214..6375a520f8 100644
--- a/website/src/pages/treemap/html.js
+++ b/website/src/pages/treemap/html.js
@@ -5,6 +5,7 @@ import meta from '../../data/components/treemap/meta.yml'
 import mapper from '../../data/components/treemap/mapper'
 import { groups } from '../../data/components/treemap/props'
 import { generateLightDataSet } from '../../data/components/treemap/generator'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const initialProperties = {
     identity: 'name',
@@ -56,6 +57,20 @@ const initialProperties = {
 }
 
 const TreeMapHtml = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/treemap-html.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="TreeMapHtml"
@@ -68,6 +83,7 @@ const TreeMapHtml = () => {
             defaultProperties={TreeMapDefaultProps}
             propertiesMapper={mapper}
             generateData={generateLightDataSet}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/treemap/index.js b/website/src/pages/treemap/index.js
index 8bfe421059..4820e1215b 100644
--- a/website/src/pages/treemap/index.js
+++ b/website/src/pages/treemap/index.js
@@ -5,6 +5,7 @@ import meta from '../../data/components/treemap/meta.yml'
 import mapper from '../../data/components/treemap/mapper'
 import { groups } from '../../data/components/treemap/props'
 import { generateLightDataSet } from '../../data/components/treemap/generator'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const generateData = () => generateLightDataSet().root
 
@@ -58,6 +59,20 @@ const initialProperties = {
 }
 
 const TreeMap = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/treemap.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="TreeMap"
@@ -70,6 +85,7 @@ const TreeMap = () => {
             defaultProperties={TreeMapDefaultProps}
             propertiesMapper={mapper}
             generateData={generateData}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/voronoi/index.js b/website/src/pages/voronoi/index.js
index c66008fb87..a9676f8392 100644
--- a/website/src/pages/voronoi/index.js
+++ b/website/src/pages/voronoi/index.js
@@ -4,6 +4,7 @@ import { ResponsiveVoronoi, defaultVoronoiProps } from '@nivo/voronoi'
 import { ComponentTemplate } from '../../components/components/ComponentTemplate'
 import meta from '../../data/components/voronoi/meta.yml'
 import { groups } from '../../data/components/voronoi/props'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const xDomain = [0, 100]
 const yDomain = [0, 100]
@@ -38,6 +39,20 @@ const initialProperties = {
 }
 
 const Voronoi = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/voronoi.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="Voronoi"
@@ -49,6 +64,7 @@ const Voronoi = () => {
             initialProperties={initialProperties}
             defaultProperties={defaultVoronoiProps}
             generateData={generateData}
+            image={image}
         >
             {(properties, data, theme) => {
                 return (
diff --git a/website/src/pages/waffle/canvas.js b/website/src/pages/waffle/canvas.js
index dc9572d124..cc154aea5c 100644
--- a/website/src/pages/waffle/canvas.js
+++ b/website/src/pages/waffle/canvas.js
@@ -4,6 +4,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
 import meta from '../../data/components/waffle/meta.yml'
 import { groups } from '../../data/components/waffle/props'
 import mapper from '../../data/components/waffle/mapper'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const generateData = () => [
     {
@@ -112,6 +113,20 @@ const initialProperties = {
 }
 
 const WaffleCanvas = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/waffle-canvas.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="WaffleCanvas"
@@ -129,6 +144,7 @@ const WaffleCanvas = () => {
                 tooltip: properties.tooltip ? 'CustomTooltip(props) => (…)' : undefined,
             })}
             generateData={generateData}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/waffle/html.js b/website/src/pages/waffle/html.js
index bc440290fd..4ab558c9da 100644
--- a/website/src/pages/waffle/html.js
+++ b/website/src/pages/waffle/html.js
@@ -4,6 +4,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
 import meta from '../../data/components/waffle/meta.yml'
 import { groups } from '../../data/components/waffle/props'
 import mapper from '../../data/components/waffle/mapper'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const generateData = () => [
     {
@@ -61,6 +62,20 @@ const initialProperties = {
 }
 
 const WaffleHtml = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/waffle-html.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="WaffleHtml"
@@ -78,6 +93,7 @@ const WaffleHtml = () => {
                 tooltip: properties.tooltip ? 'CustomTooltip(props) => (…)' : undefined,
             })}
             generateData={generateData}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
diff --git a/website/src/pages/waffle/index.js b/website/src/pages/waffle/index.js
index e550ec38d1..4030f9a907 100644
--- a/website/src/pages/waffle/index.js
+++ b/website/src/pages/waffle/index.js
@@ -4,6 +4,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
 import meta from '../../data/components/waffle/meta.yml'
 import { groups } from '../../data/components/waffle/props'
 import mapper from '../../data/components/waffle/mapper'
+import { graphql, useStaticQuery } from 'gatsby'
 
 const generateData = () => [
     {
@@ -90,6 +91,20 @@ const initialProperties = {
 }
 
 const Waffle = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/waffle.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 900, quality: 100)
+                }
+            }
+        }
+    `)
+
     return (
         <ComponentTemplate
             name="Waffle"
@@ -107,6 +122,7 @@ const Waffle = () => {
                 tooltip: properties.tooltip ? 'CustomTooltip(props) => (…)' : undefined,
             })}
             generateData={generateData}
+            image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (