diff --git a/package-lock.json b/package-lock.json
index e3627b1..3e794fb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,6 +43,7 @@
         "rehype-parse": "^8.0.4",
         "rehype-react": "^7.1.1",
         "rehype-slug": "^5.0.1",
+        "sharp": "^0.32.6",
         "tailwindcss": "^3.1.6",
         "typescript": "^5.2.2",
         "unified": "^10.1.2",
@@ -6651,6 +6652,11 @@
         "deep-equal": "^2.0.5"
       }
     },
+    "node_modules/b4a": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.4.tgz",
+      "integrity": "sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw=="
+    },
     "node_modules/babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -10640,6 +10646,11 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
+    "node_modules/fast-fifo": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
+      "integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ=="
+    },
     "node_modules/fast-glob": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
@@ -12058,6 +12069,14 @@
       "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
       "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
     },
+    "node_modules/gatsby-plugin-sharp/node_modules/detect-libc": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.2.tgz",
+      "integrity": "sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/gatsby-plugin-sharp/node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -12069,6 +12088,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/gatsby-plugin-sharp/node_modules/node-addon-api": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.1.0.tgz",
+      "integrity": "sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA=="
+    },
     "node_modules/gatsby-plugin-sharp/node_modules/semver": {
       "version": "7.5.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
@@ -12083,6 +12107,28 @@
         "node": ">=10"
       }
     },
+    "node_modules/gatsby-plugin-sharp/node_modules/sharp": {
+      "version": "0.30.7",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.30.7.tgz",
+      "integrity": "sha512-G+MY2YW33jgflKPTXXptVO28HvNOo9G3j0MybYAHeEmby+QuD2U98dT6ueht9cv/XDqZspSpIhoSW+BAKJ7Hig==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.1",
+        "node-addon-api": "^5.0.0",
+        "prebuild-install": "^7.1.1",
+        "semver": "^7.3.7",
+        "simple-get": "^4.0.1",
+        "tar-fs": "^2.1.1",
+        "tunnel-agent": "^0.6.0"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/gatsby-plugin-sharp/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -12184,6 +12230,71 @@
         "node": ">=14.15.0"
       }
     },
+    "node_modules/gatsby-sharp/node_modules/detect-libc": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.2.tgz",
+      "integrity": "sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/gatsby-sharp/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/gatsby-sharp/node_modules/node-addon-api": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.1.0.tgz",
+      "integrity": "sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA=="
+    },
+    "node_modules/gatsby-sharp/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/gatsby-sharp/node_modules/sharp": {
+      "version": "0.30.7",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.30.7.tgz",
+      "integrity": "sha512-G+MY2YW33jgflKPTXXptVO28HvNOo9G3j0MybYAHeEmby+QuD2U98dT6ueht9cv/XDqZspSpIhoSW+BAKJ7Hig==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.1",
+        "node-addon-api": "^5.0.0",
+        "prebuild-install": "^7.1.1",
+        "semver": "^7.3.7",
+        "simple-get": "^4.0.1",
+        "tar-fs": "^2.1.1",
+        "tunnel-agent": "^0.6.0"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/gatsby-sharp/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    },
     "node_modules/gatsby-source-filesystem": {
       "version": "4.25.0",
       "resolved": "https://registry.npmjs.org/gatsby-source-filesystem/-/gatsby-source-filesystem-4.25.0.tgz",
@@ -12365,6 +12476,14 @@
         "gatsby-plugin-sharp": "^4.0.0-next"
       }
     },
+    "node_modules/gatsby-transformer-sharp/node_modules/detect-libc": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.2.tgz",
+      "integrity": "sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/gatsby-transformer-sharp/node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -12376,6 +12495,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/gatsby-transformer-sharp/node_modules/node-addon-api": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.1.0.tgz",
+      "integrity": "sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA=="
+    },
     "node_modules/gatsby-transformer-sharp/node_modules/semver": {
       "version": "7.5.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
@@ -12390,6 +12514,28 @@
         "node": ">=10"
       }
     },
+    "node_modules/gatsby-transformer-sharp/node_modules/sharp": {
+      "version": "0.30.7",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.30.7.tgz",
+      "integrity": "sha512-G+MY2YW33jgflKPTXXptVO28HvNOo9G3j0MybYAHeEmby+QuD2U98dT6ueht9cv/XDqZspSpIhoSW+BAKJ7Hig==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.1",
+        "node-addon-api": "^5.0.0",
+        "prebuild-install": "^7.1.1",
+        "semver": "^7.3.7",
+        "simple-get": "^4.0.1",
+        "tar-fs": "^2.1.1",
+        "tunnel-agent": "^0.6.0"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/gatsby-transformer-sharp/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -17402,14 +17548,6 @@
         "wrap-ansi": "^5.1.0"
       }
     },
-    "node_modules/magicbook/node_modules/detect-libc": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.1.tgz",
-      "integrity": "sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/magicbook/node_modules/emoji-regex": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
@@ -17467,22 +17605,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/magicbook/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/magicbook/node_modules/node-addon-api": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
-      "integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA=="
-    },
     "node_modules/magicbook/node_modules/p-limit": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
@@ -17516,42 +17638,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/magicbook/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/magicbook/node_modules/sharp": {
-      "version": "0.32.1",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.1.tgz",
-      "integrity": "sha512-kQTFtj7ldpUqSe8kDxoGLZc1rnMFU0AO2pqbX6pLy3b7Oj8ivJIdoKNwxHVQG2HN6XpHPJqCSM2nsma2gOXvOg==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "color": "^4.2.3",
-        "detect-libc": "^2.0.1",
-        "node-addon-api": "^6.1.0",
-        "prebuild-install": "^7.1.1",
-        "semver": "^7.5.0",
-        "simple-get": "^4.0.1",
-        "tar-fs": "^2.1.1",
-        "tunnel-agent": "^0.6.0"
-      },
-      "engines": {
-        "node": ">=14.15.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
     "node_modules/magicbook/node_modules/string-width": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
@@ -17597,11 +17683,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/magicbook/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-    },
     "node_modules/magicbook/node_modules/yargs": {
       "version": "13.3.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
@@ -20434,6 +20515,11 @@
         }
       ]
     },
+    "node_modules/queue-tick": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
+      "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag=="
+    },
     "node_modules/quick-lru": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
@@ -21764,31 +21850,31 @@
       "integrity": "sha512-LUMFi+RppPlrHzbqmFnINTrazo0lPNwhcgzuAXVVcfy/mqPDrQmHAyz5bvV0gDAuRFrk804V0HpQ6u9sZ0tBeg=="
     },
     "node_modules/sharp": {
-      "version": "0.30.7",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.30.7.tgz",
-      "integrity": "sha512-G+MY2YW33jgflKPTXXptVO28HvNOo9G3j0MybYAHeEmby+QuD2U98dT6ueht9cv/XDqZspSpIhoSW+BAKJ7Hig==",
+      "version": "0.32.6",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz",
+      "integrity": "sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==",
       "hasInstallScript": true,
       "dependencies": {
         "color": "^4.2.3",
-        "detect-libc": "^2.0.1",
-        "node-addon-api": "^5.0.0",
+        "detect-libc": "^2.0.2",
+        "node-addon-api": "^6.1.0",
         "prebuild-install": "^7.1.1",
-        "semver": "^7.3.7",
+        "semver": "^7.5.4",
         "simple-get": "^4.0.1",
-        "tar-fs": "^2.1.1",
+        "tar-fs": "^3.0.4",
         "tunnel-agent": "^0.6.0"
       },
       "engines": {
-        "node": ">=12.13.0"
+        "node": ">=14.15.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       }
     },
     "node_modules/sharp/node_modules/detect-libc": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.1.tgz",
-      "integrity": "sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.2.tgz",
+      "integrity": "sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==",
       "engines": {
         "node": ">=8"
       }
@@ -21805,14 +21891,14 @@
       }
     },
     "node_modules/sharp/node_modules/node-addon-api": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.1.0.tgz",
-      "integrity": "sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA=="
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
+      "integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA=="
     },
     "node_modules/sharp/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -21823,6 +21909,26 @@
         "node": ">=10"
       }
     },
+    "node_modules/sharp/node_modules/tar-fs": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.4.tgz",
+      "integrity": "sha512-5AFQU8b9qLfZCX9zp2duONhPmZv0hGYiBPJsyUdqMjzq/mqVpy/rEUSeHk1+YitmxugaptgBh5oDGU3VsAJq4w==",
+      "dependencies": {
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^3.1.5"
+      }
+    },
+    "node_modules/sharp/node_modules/tar-stream": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.6.tgz",
+      "integrity": "sha512-B/UyjYwPpMBv+PaFSWAmtYjwdrlEaZQEhMIBFNC5oEG8lpiW8XjcSdmEaClj28ArfKScKHs2nshz3k2le6crsg==",
+      "dependencies": {
+        "b4a": "^1.6.4",
+        "fast-fifo": "^1.2.0",
+        "streamx": "^2.15.0"
+      }
+    },
     "node_modules/sharp/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -22294,6 +22400,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/streamx": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.1.tgz",
+      "integrity": "sha512-fQMzy2O/Q47rgwErk/eGeLu/roaFWV0jVsogDmrszM9uIw8L5OA+t+V93MgYlufNptfjmYR1tOMWhei/Eh7TQA==",
+      "dependencies": {
+        "fast-fifo": "^1.1.0",
+        "queue-tick": "^1.0.1"
+      }
+    },
     "node_modules/strict-uri-encode": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
diff --git a/package.json b/package.json
index b2390cf..41d4a9f 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "build:pdf": "magicbook build",
     "test": "jest",
     "test:examples": "jest tests/examples.test.js",
-    "test:snippets": "jest tests/snippets.test.js"
+    "test:snippets": "jest tests/snippets.test.js",
+    "test:screenshots": "jest tests/screenshots.test.js"
   },
   "repository": {
     "type": "git",
@@ -58,6 +59,7 @@
     "rehype-parse": "^8.0.4",
     "rehype-react": "^7.1.1",
     "rehype-slug": "^5.0.1",
+    "sharp": "^0.32.6",
     "tailwindcss": "^3.1.6",
     "typescript": "^5.2.2",
     "unified": "^10.1.2",
diff --git a/tests/examples.test.js b/tests/examples.test.js
index 8d32bc7..5e95d2d 100644
--- a/tests/examples.test.js
+++ b/tests/examples.test.js
@@ -3,6 +3,7 @@ const fs = require('node:fs');
 const glob = require('glob');
 const path = require('node:path');
 const { getLinter } = require('./linter');
+const { getEditorUrls } = require('./utils');
 
 const externalAllowList = [
   'https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js',
@@ -11,19 +12,7 @@ const externalAllowList = [
   'https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js',
 ];
 
-const editorUrls = new Map();
-glob.sync('content/*.html').forEach((htmlFilePath) => {
-  const source = fs.readFileSync(htmlFilePath);
-  const $ = cheerio.load(source.toString());
-
-  $('[data-example-path]').each((_, el) => {
-    const $el = $(el);
-    const examplePath = $el.attr('data-example-path');
-    const editorUrl = $el.attr('data-p5-editor');
-
-    editorUrls.set(path.join('content/', examplePath), editorUrl);
-  });
-});
+const editorUrls = getEditorUrls();
 
 // ---
 
@@ -55,17 +44,6 @@ describe('Validate examples <script> tags', () => {
   });
 });
 
-describe('Validate examples preview images`', () => {
-  glob.sync('content/examples/*/*/').forEach((exampleDir) => {
-    describe(`${exampleDir} | ${editorUrls.get(exampleDir)}`, () => {
-      test('Example should have a `screenshot.png', () => {
-        const screenshotPath = path.join(exampleDir, 'screenshot.png');
-        expect(fs.existsSync(screenshotPath)).toBe(true);
-      });
-    });
-  });
-});
-
 describe('Lint examples`', () => {
   glob.sync('content/examples/*/*/').forEach((exampleDir) => {
     const chapter = Number(exampleDir.split('/').at(-2).split('_')[0]);
diff --git a/tests/screenshots.test.js b/tests/screenshots.test.js
new file mode 100644
index 0000000..121374a
--- /dev/null
+++ b/tests/screenshots.test.js
@@ -0,0 +1,36 @@
+const fs = require('node:fs');
+const glob = require('glob');
+const path = require('node:path');
+const sharp = require('sharp');
+const { getEditorUrls } = require('./utils');
+
+const editorUrls = getEditorUrls();
+
+// ---
+
+describe('Validate examples screenshots`', () => {
+  const createCanvasRegex = /\s*createCanvas\(\s*(\d+)\s*,\s*(\d+)/;
+
+  glob.sync('content/examples/*/*/').forEach((exampleDir) => {
+    describe(`${exampleDir} | ${editorUrls.get(exampleDir)}`, () => {
+      test('`screenshot.png` should exist and be @2x compared to the p5 sketch canvas', async () => {
+        const screenshotPath = path.join(exampleDir, 'screenshot.png');
+        expect(fs.existsSync(screenshotPath)).toBe(true);
+
+        // extract the sketch canvas dimensions from the `createCanvas()` function call in `sketch.js`
+        const sketchFilePath = path.join(exampleDir, 'sketch.js');
+        const sketchFile = fs.readFileSync(sketchFilePath).toString();
+        const canvasSize = createCanvasRegex.exec(sketchFile);
+        const expectedWidth = Number(canvasSize[1]) * 2;
+        const expectedHeight = Number(canvasSize[2]) * 2;
+
+        // get the actual dimensions of the screenshot
+        const { width, height } = await sharp(screenshotPath).metadata();
+
+        expect(`${width}x${height}`).toEqual(
+          `${expectedWidth}x${expectedHeight}`,
+        );
+      });
+    });
+  });
+});
diff --git a/tests/utils.js b/tests/utils.js
new file mode 100644
index 0000000..2845583
--- /dev/null
+++ b/tests/utils.js
@@ -0,0 +1,27 @@
+const cheerio = require('cheerio');
+const fs = require('node:fs');
+const glob = require('glob');
+const path = require('node:path');
+
+function getEditorUrls() {
+  const editorUrls = new Map();
+
+  glob.sync('content/*.html').forEach((htmlFilePath) => {
+    const source = fs.readFileSync(htmlFilePath);
+    const $ = cheerio.load(source.toString());
+
+    $('[data-example-path]').each((_, el) => {
+      const $el = $(el);
+      const examplePath = $el.attr('data-example-path');
+      const editorUrl = $el.attr('data-p5-editor');
+
+      editorUrls.set(path.join('content/', examplePath), editorUrl);
+    });
+  });
+
+  return editorUrls;
+}
+
+module.exports = {
+  getEditorUrls,
+};