webp images

data/blog/frontend-parallelizable-tasks-using-the-gpu.mdx

@@ -4,7 +4,7 @@ date: '2024-01-26'
 tags: ['performance']
 draft: false
 summary: Exploring the benefits and practical applications of parallel computational tasks on client machines, focusing on The Principle of Known Reliability and The GPU Crossover Threshold for optimal task distribution.
-images: ['/static/images/posts/cpu_gpu_benchmark.png', '/static/images/posts/cpu_gpu_benchmark_2.png']
+images: ['/static/images/posts/cpu_gpu_benchmark.webp', '/static/images/posts/cpu_gpu_benchmark_2.webp']
 ---
 
 #### **TL;DR**
@@ -38,15 +38,15 @@ But can we use it to distribute front-end tasks, and how does it compare? Why wo
 
 Using [The Matrix Multiplication Example](https://gpu.rocks/#/) from the GPU.JS website, [I ran several concurrent computations on my CPU and GPU. I then tracked the execution times.](https://observablehq.com/@robsutcliffe/frontend-parallelization-with-gpu-js)
 
-![](/static/images/posts/cpu_gpu_benchmark.png)
+![](/static/images/posts/cpu_gpu_benchmark.webp)
 
 My first observation was that the CPU performs better at executing tens of thousands of computations before it becomes optimal to use the GPU. Several other people have made a similar observation.
 
 Once we get above half a million computations, my CPU can't handle it. My GPU could efficiently run tens of millions of computations before I started running into issues.
 
 The most exciting observation was that the point where running computations on the GPU on my machine was around 80,000 computations. And that I can consistently identify this point after running at most 8 benchmark tests.
 
-![](/static/images/posts/cpu_gpu_benchmark_2.png)
+![](/static/images/posts/cpu_gpu_benchmark_2.webp)
 
 It only takes around 3 seconds for me to identify exactly where the sweet spot is, and this was not affected too much by other processes on the CPU or GPU. I call this point `The GPU Crossover Threshold`
 

data/blog/introduction_to_tidy_data_principles.mdx

@@ -4,7 +4,7 @@ date: '2024-02-25'
 tags: ['data']
 draft: false
 summary: An overview of tidy data principles, emphasizing the importance of structuring datasets for clarity, compatibility, and ease of analysis, with practical guidance on applying these principles using various programming tools.
-images: ['/static/images/posts/cpu_gpu_benchmark.png', '/static/images/posts/cpu_gpu_benchmark_2.png']
+images: []
 ---
 
 ## What is Tidy Data

data/blog/optimising-for-the-new-inp-web-vital.mdx

@@ -4,10 +4,10 @@ date: '2024-06-15'
 tags: ['performance']
 draft: false
 summary: The INP Web Vital is a new metric that measures the performance of a website. It is a crucial metric for web developers, as it helps them understand how well their website is performing and how to improve it.
-images: ['/static/images/posts/inp.png', '/static/images/posts/inp-long-task.png']
+images: ['/static/images/posts/inp.webp', '/static/images/posts/inp-long-task.webp']
 ---
 
-![INP long tasks](/static/images/posts/inp.png)
+![INP long tasks](/static/images/posts/inp.webp)
 
 
 ## What Is INP (Interaction to Next Paint)?
@@ -29,7 +29,7 @@ The new performance insights tab in the Chrome DevTools is perfect for identifyi
 3. Click Measure page load, and then interact with your site.
 4. After a few interactions, click stop.
 
-![INP long tasks](/static/images/posts/inp-long-task.png)
+![INP long tasks](/static/images/posts/inp-long-task.webp)
 
 *Avoid recording too many interactions at once; this makes it easier to work with the results.*
 

data/projectsData.ts

@@ -2,31 +2,31 @@ const projectsData = [
   {
     title: 'Economist Intelligence 75th Birthday',
     description: `A microsite for The Economist Intelligence 75th anniversary. I worked directly with the designer, strategist, and client to design and develop a unique one-off site.`,
-    imgSrc: '/static/images/projects/economist.png',
+    imgSrc: '/static/images/projects/economist.webp',
     href: 'https://www.youtube.com/watch?v=-hYjk9hpWWo',
   },
   {
     title: 'Language Learning with Video App',
     description: `A Strapi and Next.js application with scraping, fuzzy search, and a custom video player. Its features include JWT OAuth, fuzzy search, and a daily cron job to mirror existing databases and images.`,
-    imgSrc: '/static/images/projects/language_learning.png',
+    imgSrc: '/static/images/projects/language_learning.webp',
     href: 'https://youtu.be/2vUus1VzEyE',
   },
   {
     title: 'Socket.IO Real-time Game',
     description: `An application for students to watch and interact with films in real time and for teachers to control the film and see results at the end. The application heavily uses WebSockets and is animated with Framer Motion.`,
-    imgSrc: '/static/images/projects/game.png',
+    imgSrc: '/static/images/projects/game.webp',
     href: 'https://youtu.be/c3r1glqMMsU',
   },
   {
     title: 'News Feed Scrapping and Summarising',
     description: `Full stack next.js application with a daily cron job to scrape, summarise and tag web development blog posts. Uses fuzzy search directly in mysql for fast searching.`,
-    imgSrc: '/static/images/projects/fastfeed.png',
+    imgSrc: '/static/images/projects/fastfeed.webp',
     href: 'https://ffeed.vercel.app/',
   },
   {
     title: 'AI Treemap Generator',
     description: `Use various AI models to categories open ended survey responses and check with a the user at various stages if the categories are useful and accurate.`,
-    imgSrc: '/static/images/projects/survey.png',
+    imgSrc: '/static/images/projects/survey.webp',
     href: 'https://youtu.be/aAZPw7p2GbI',
   },
 ]