perf: convert all images to avif (#1151)

Author: jderochervlk

app/routes/TryRoute.res

@@ -55,7 +55,7 @@ let default = () => {
   let data = ReactRouter.useLoaderData()
   <>
     <Meta
-      title="ReScript Playground" description="Try ReScript in the browser" ogImage="/og/try.png"
+      title="ReScript Playground" description="Try ReScript in the browser" ogImage="/og/try.avif"
     />
 
     {switch data {

image-converter.config.mjs

@@ -0,0 +1,9 @@
+export default {
+  dir: "public", // Directory to scan for images
+  converted: "*.{png,jpg,jpeg}", // Glob pattern for source image files to convert
+  format: "avif", // Output image format: 'webp' or 'avif'
+  quality: 80, // Quality of output images (0–100)
+  recursive: true, // Whether to search subdirectories recursively
+  removeOriginal: true, // Delete original files after successful conversion
+  ignoreOnStart: false, // If true, ignore existing files on watcher startup
+};

markdown-pages/blog/archived/bucklescript-release-3-1-0.mdx

@@ -20,14 +20,14 @@ A picture's worth a thousand words:
 **Before:**
 
 <img
-  src="https://bucklescript.github.io/img/debugger-before.png"
+  src="https://bucklescript.github.io/img/debugger-before.avif"
   alt="debugger before"
 />
 
 **After:**
 
 <img
-  src="https://bucklescript.github.io/img/debugger-after.png"
+  src="https://bucklescript.github.io/img/debugger-after.avif"
   alt="debugger after"
 />
 

markdown-pages/blog/archived/bucklescript-release-4-0-17.mdx

@@ -17,7 +17,7 @@ A picture is worth a thousand words, below is a large monorepo which contains
 4096 modules, changing the root node which has more than 3000 dependents, it
 finished building within 400ms.
 
-<img src="https://bucklescript.github.io/img/incremental.png" />
+<img src="https://bucklescript.github.io/img/incremental.avif" />
 
 We will write a dedicated article explaining how we achieve this incredible
 build performance.

markdown-pages/blog/archived/bucklescript-release-5-1-0.mdx

@@ -80,11 +80,11 @@ can be loaded into chrome via `chrome://tracing`.
 
 Below is a profile image that shows the tracing graph for a large project:
 
-<img src="https://bucklescript.github.io/img/profile-1.png" />
+<img src="https://bucklescript.github.io/img/profile-1.avif" />
 
 And you can zoom-in to see more details:
 
-<img src="https://bucklescript.github.io/img/profile-2.png" />
+<img src="https://bucklescript.github.io/img/profile-2.avif" />
 
 ## Support of ppx with arguments
 
@@ -128,10 +128,10 @@ using `bstracing` to show a comparison of clean building a large project around
 
 Version 5.0.6 (around 4.8s)
 
-<img src="https://bucklescript.github.io/img/profile-5.png" />
+<img src="https://bucklescript.github.io/img/profile-5.avif" />
 
 Version 5.1.0 (around 4.2s)
 
-<img src="https://bucklescript.github.io/img/profile-4.png" />
+<img src="https://bucklescript.github.io/img/profile-4.avif" />
 
 Happy hacking!

markdown-pages/blog/archived/bucklescript-release-5-2-0.mdx

@@ -38,7 +38,7 @@ system more valuable to JS target.
 
 Below is an image showing the diff in this release
 
-<img src="https://bucklescript.github.io/img/functor.png" />
+<img src="https://bucklescript.github.io/img/functor.avif" />
 
 As you can see, the `id` module changed from an array into an JS object.
 
@@ -57,7 +57,7 @@ annotate the generated JS code with its names.
 
 Below is an image showing the diff in this release
 
-<img src="https://bucklescript.github.io/img/pattern-match.png" />
+<img src="https://bucklescript.github.io/img/pattern-match.avif" />
 
 In the future, we will explore if we can produce such annotation in the runtime without losing efficiency.
 
@@ -72,7 +72,7 @@ including lazy evaluation, if branches and pattern match.
 In particular, we added a data-flow pass to eliminate non-necessary staticfail
 case.
 
-<img src="https://bucklescript.github.io/img/staticfail.png" />
+<img src="https://bucklescript.github.io/img/staticfail.avif" />
 
 ## Important bug fixes
 

markdown-pages/blog/archived/generalize-uncurry.mdx

@@ -53,17 +53,17 @@ message leaks the underlying encoding -- now all those limitations are gone!
 **Previously:**
 
 <img
-  src="/blog/archive/poly-error.png"
+  src="/blog/archive/poly-error.avif"
   className="my-4 mx-auto max-h-[500px]"
 />
 
 <img
-  src="/blog/archive/label-error.png"
+  src="/blog/archive/label-error.avif"
   className="my-4 mx-auto max-h-[500px]"
 />
 
 <img
-  src="/blog/archive/recursive-error.png"
+  src="/blog/archive/recursive-error.avif"
   className="my-4 mx-auto max-h-[500px]"
 />
 
@@ -72,11 +72,14 @@ The error messages above are cryptic and hard to understand. And the limitation
 Now those limitations are all gone, you can have polymorphic uncurried recursive functions and it support labels.
 
 <img
-  src="/blog/archive/uncurry-label.png"
+  src="/blog/archive/uncurry-label.avif"
   className="my-4 mx-auto max-h-[500px]"
 />
 
-<img src="/blog/archive/recursive.png" className="my-4 mx-auto max-h-[500px]" />
+<img
+  src="/blog/archive/recursive.avif"
+  className="my-4 mx-auto max-h-[500px]"
+/>
 
 The error message is also enhanced significantly
 

markdown-pages/blog/archived/state-of-reasonml-org-2020-q2-pt1.mdx

@@ -1,8 +1,8 @@
 ---
 author: ryyppy
 date: "2020-05-06"
-previewImg: /blog/archive/state-of-reasonml-org-q2-2020.jpg
-articleImg: /blog/archive/state-of-reasonml-pt1-hero.jpg
+previewImg: /blog/archive/state-of-reasonml-org-q2-2020.avif
+articleImg: /blog/archive/state-of-reasonml-pt1-hero.avif
 title: State of reasonml.org 2020-Q2 / Pt. 1
 description: |
   A report on recent achievements in the reasonml.org project and what
@@ -51,7 +51,7 @@ The initial work was mostly about understanding the information architecture, re
 
 <Image
   withShadow={true}
-  src="/blog/archive/reasonml-org-color-palette-retina.jpg"
+  src="/blog/archive/reasonml-org-color-palette-retina.avif"
   caption="Current state of the reasonml.org color palette"
 />
 
@@ -75,7 +75,7 @@ Our goal is to have a properly curated, well structured and streamlined overview
 
 <Image
   withShadow={true}
-  src="/blog/archive/reasonml-org-structure-retina.jpg"
+  src="/blog/archive/reasonml-org-structure-retina.avif"
   caption="First hand-sketches of the reasonml.org structure"
 />
 

markdown-pages/blog/archived/state-of-reasonml-org-2020-q2-pt2.mdx

@@ -1,8 +1,8 @@
 ---
 author: ryyppy
 date: "2020-05-11"
-previewImg: /blog/archive/state-of-reasonml-org-q2-2020.jpg
-articleImg: /blog/archive/state-of-reasonml-2020-q2-pt2-articleimg.jpg
+previewImg: /blog/archive/state-of-reasonml-org-q2-2020.avif
+articleImg: /blog/archive/state-of-reasonml-2020-q2-pt2-articleimg.avif
 title: State of reasonml.org 2020-Q2 / Pt. 2
 description: |
   A report on recent achievements in the reasonml.org project. This part is all

markdown-pages/blog/archived/state-of-reasonml-org-2020-q2-pt3.mdx

@@ -1,7 +1,7 @@
 ---
 author: ryyppy
 date: "2020-05-12"
-previewImg: /blog/archive/state-of-reasonml-org-q2-2020.jpg
+previewImg: /blog/archive/state-of-reasonml-org-q2-2020.avif
 title: State of reasonml.org 2020-Q2 / Pt. 3
 description: |
   A report on recent achievements in the reasonml.org project. In this part we
@@ -35,7 +35,7 @@ We don't have any **search functionality** yet, and this will take some more tim
 There were some solutions, but still, Algolia turned out to be the best candidate with its smallest pricing tier. We don't want to rely on the Algolia OSS webscraping API, since it doesn't give us enough control on manipulating the search results, and we need more control if we want to be able to design a custom search experience.
 
 <Image
-  src="/blog/archive/search-mockup.jpg"
+  src="/blog/archive/search-mockup.avif"
   withShadow={true}
   caption="A unified search overlay mockup for prose & API content"
 />
@@ -47,7 +47,7 @@ We did the ground work for our search feature and we will get into more detail a
 We also invested a lot of time into thinking about the future of the Reason playground from a UX perspective. Our most important goal is to make it possible to switch BuckleScript versions on demand. We also wanted the relevant Reason version to be part of the playground bundle.
 
 <Image
-  src="/blog/archive/playground-mockup.jpg"
+  src="/blog/archive/playground-mockup.avif"
   withShadow={true}
   caption="UI mockup for the new playground (Desktop version)"
 />