perf: use images instead of the math plugin

README.md

@@ -1,27 +1,6 @@
-# Reveal.js + Astro
+# Savez-vous _vraiment_ ce qu'est la **couleur** ? Découvrez la science derrière les pixels 🎨
 
-Minimalist template for presentations on the web.
+Slides pour mon talk sur la science des couleurs.
 
-## Usage
-
-You have several options to start a new presentation using this template:
-
-- Click on the button 'Use this template' above, or
-- Clone the repo : `git clone [email protected]:jsulpis/slides-template.git`, or
-- Use [degit](https://www.npmjs.com/package/degit) (get a copy without cloning): `pnpm dlx degit jsulpis/slides-template my-talk`
-
-## UI Framework
-
-For the specific cases where you need one, you can add one of the [frameworks](https://docs.astro.build/en/guides/integrations-guide/) supported by Astro.
-
-For instance:
-
-```
-pnpm astro add svelte
-```
-
-or
-
-```bash
-pnpm astro add react tailwind
-```
+- Appuyez sur Espace ou flèche droite pour avancer à la slide suivante, flèche haut ou gauche pour la slide précédente
+- Appuyez sur Echap pour avoir une vue d'ensemble et naviguer dans la présentation

src/layouts/Layout.astro

@@ -19,7 +19,6 @@ const { title } = Astro.props;
 		<script>
 			import Reveal from "reveal.js";
 			import highlightPlugin from "reveal.js/plugin/highlight/highlight";
-			import { MathJax3 } from "reveal.js/plugin/math/math";
 
 			Reveal.initialize({
 				transition: "none",
@@ -32,7 +31,7 @@ const { title } = Astro.props;
 				width: "100%",
 				height: "100%",
 				margin: 0,
-				plugins: [highlightPlugin, MathJax3],
+				plugins: [highlightPlugin],
 			});
 
 			// Display a hand cursor when pressing AltLeft

src/slides/2-representation-of-colors/cie-xyz/CIEXYZ.astro

@@ -9,6 +9,8 @@ import xyColorMix from "../assets/xy-color-mix.jpg";
 import xyCieRgb from "../assets/xy-cie-rgb-1.jpg";
 import xyCieRgbWithLabel from "../assets/xy-cie-rgb-2.jpg";
 import xyDiagram from "../assets/xy-base.jpg";
+import xy from "../assets/xy.jpg";
+import xyz from "../assets/xyz.jpg";
 import CIEXYZCurves from "./CIEXYZCurves.svelte";
 ---
 
@@ -23,7 +25,12 @@ import CIEXYZCurves from "./CIEXYZCurves.svelte";
 </Slide>
 
 <Slide title="CIE 1931 XYZ">
-	<div is:raw>
+	<img data-src={xyz.src} alt="">
+	<!--
+		I use an image instead of the math plugin because it destroys performance
+		see https://x.com/jsulpis/status/1795349399746338962
+	-->
+	<!-- <div is:raw>
 		\[
 		\begin{pmatrix}
 			X \\
@@ -41,7 +48,7 @@ import CIEXYZCurves from "./CIEXYZCurves.svelte";
 			B \\
 		\end{pmatrix}
 		\]
-	</div>
+	</div> -->
 </Slide>
 
 <Slide title="CIE 1931 XYZ">
@@ -59,13 +66,14 @@ import CIEXYZCurves from "./CIEXYZCurves.svelte";
 	authors="Michael Horvath, Christoph Lipka" />
 
 <Slide title="CIE 1931 XYZ">
-	<div is:raw>
+	<img data-src={xy.src} alt="">
+	<!-- <div is:raw>
 		\[\begin{aligned}\\
 			Y &= Y \\
 			x &= \frac{X}{X+Y+Z} \\
 			y &= \frac{Y}{X+Y+Z} \\
 		\end{aligned} \]
-	</div>
+	</div> -->
 </Slide>
 
 <VideoSlide
@@ -86,3 +94,9 @@ import CIEXYZCurves from "./CIEXYZCurves.svelte";
 	</div>
 </Slide>
 
+<style>
+	img {
+		max-width: 75dvw;
+		max-height: 50dvh;
+	}
+</style>

src/slides/3-color-space-for-humans/ColorSpaceForHumans.astro

@@ -8,6 +8,8 @@ import cielch from "./assets/cielch-visible.webm";
 import srgb from "./assets/srgb.mov";
 import palette from "./assets/palette.jpg";
 import gradients from "./assets/gradient.avif";
+import lab from "./assets/lab.jpg";
+import lch from "./assets/lch.jpg";
 import Gradients from "./gradients/Gradients.astro";
 import HSLPalette from "./palette/HSLPalette.astro";
 import OKLCHPalette from "./palette/OKLCHPalette.astro";
@@ -24,7 +26,12 @@ import SectionTitle from "../../components/SectionTitle.astro";
 </Slide>
 
 <Slide title="CIE LAB 1976">
-	<div is:raw style="font-size: 1.5rem;">
+	<img data-src={lab.src} alt="" style="height: 70dvmin; margin-top: -2%">
+	<!--
+		I use an image instead of the math plugin because it destroys performance
+		see https://x.com/jsulpis/status/1795349399746338962
+	-->
+	<!-- <div is:raw style="font-size: 1.5rem;">
 		\[\begin{aligned}
 			L* &= 116f(\frac{Y}{Y_n}) - 16 \\
 			a* &= 500(f(\frac{X}{X_n}) - f(\frac{Y}{Y_n})) \\
@@ -37,7 +44,7 @@ import SectionTitle from "../../components/SectionTitle.astro";
   		\delta &= \tfrac{6}{29} \\ \\
 			(X_n, Y_n, Z_n)& \text{ coordonnées du blanc de référence}
 		\end{aligned} \]
-	</div>
+	</div> -->
 </Slide>
 
 <VideoSlide
@@ -48,12 +55,13 @@ import SectionTitle from "../../components/SectionTitle.astro";
 />
 
 <Slide title="CIE LCH 1976">
-	<div is:raw style="font-size: 2rem; margin-top: 3em; line-height: 2em;">
+	<img data-src={lch.src} alt="" style="height: 35dvmin">
+	<!-- <div is:raw style="font-size: 2rem; margin-top: 3em; line-height: 2em;">
 		\[\begin{aligned}
 			C^* &= \sqrt{a^{*2} + b^{*2}} \\
 			h &= \arctan \frac{b^*}{a^*}
 		\end{aligned} \]
-	</div>
+	</div> -->
 </Slide>
 
 <VideoSlide