From: Cameron Otsuka <cameron@otsuka.haus>
Date: Fri, 10 Apr 2026 23:54:12 +0000 (-0700)
Subject: use astro sharp codec image defaults
X-Git-Url: https://git.otsuka.systems/?a=commitdiff_plain;h=e3790ecf915ba40b04ea187380f353362c407d2c;p=cotsuka.github.io

use astro sharp codec image defaults
---

diff --git a/astro.config.mjs b/astro.config.mjs
index 6186176..a6e9125 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -64,7 +64,17 @@ export default defineConfig({
     },
     syntaxHighlight: 'prism',
   },
-
+  image: {
+    layout: 'constrained',
+    service: {
+      entrypoint: 'astro/assets/services/sharp',
+      config: {
+        jpeg: { mozjpeg: true, progressive: true, quality: 75 },
+        webp: { quality: 75, effort: 4, alphaQuality: 80 },
+        avif: { quality: 50, effort: 2 },
+      }
+    }
+  },
   vite: {
     build: {
       rollupOptions: {
diff --git a/content/articles/bitcoin-mempools-cleared-is-nobody-using-bitcoin/index.mdx b/content/articles/bitcoin-mempools-cleared-is-nobody-using-bitcoin/index.mdx
index 5cf3ed1..8906c76 100644
--- a/content/articles/bitcoin-mempools-cleared-is-nobody-using-bitcoin/index.mdx
+++ b/content/articles/bitcoin-mempools-cleared-is-nobody-using-bitcoin/index.mdx
@@ -27,7 +27,6 @@ Here's the chart everyone was worried about, showing the dropoff in feerates:
 <Figure
   image={mempool1yr}
   alt="Bitcoin mempool by sats/vByte over the last year"
-  formats={['svg']}
 >
   Bitcoin mempool by sats/vByte over the last year. Data from 2024-02-07 through
   2025-02-07. Source: [mempool.space](https://mempool.space/graphs/mempool#1y).
@@ -40,7 +39,6 @@ I wouldn't call empty mempools abnormal by any means. Zooming out the mempool ch
 <Figure
   image={mempoolAllTime}
   alt="Bitcoin mempool by sats/vByte since beginning of data"
-  formats={['svg']}
 >
   Bitcoin mempool by sats/vByte since beginning of data. Data from beginning of
   dataset through 2025-02-07. Source:
@@ -112,7 +110,6 @@ We haven't seen a significant decline in total hashrate, despite hashprice decre
 <Figure
   image={hashrate2yr}
   alt="Bitcoin hashrate over the last 2 years"
-  formats={['svg']}
 >
   Bitcoin hashrate over the last 2 years. Data from 2023-02-08 through
   2025-02-07. Source:
diff --git a/content/articles/minimum-utxo-value/index.mdx b/content/articles/minimum-utxo-value/index.mdx
index 8ca8886..1e76262 100644
--- a/content/articles/minimum-utxo-value/index.mdx
+++ b/content/articles/minimum-utxo-value/index.mdx
@@ -33,7 +33,6 @@ The highest fee periods in Bitcoin history have been 2018, 2021, and 2023:
 <Figure
   image={minimumUTXOValueMempoolVBytesHistory}
   alt="Historical graph of Bitcoin mempool by vBytes"
-  formats={['svg']}
 >
   Source: [mempool.space](https://mempool.space/graphs/mempool#all).
 </Figure>
@@ -48,7 +47,6 @@ I've selected 4 blocks to deep dive, based on their proximity to mempool peaks i
 <Figure
   image={minimumUTXOValueBoxWhiskerOverall}
   alt="Box and whisker plot of fee rates across blocks"
-  formats={['svg']}
 >
   Outliers removed.
 </Figure>
@@ -74,7 +72,6 @@ I don't expect to see major differences in fee rates by script type, but since I
 <Figure
   image={minimumUTXOValueBoxWhiskerFeeRateScriptTypes}
   alt="Box and whiskper plot of fee rates by script type"
-  formats={['svg']}
 >
   Fee Rate axis capped at 50 sats/vB to better show the differences between
   script types.
@@ -95,7 +92,6 @@ Where the script types do differ is in the total size of the transaction and the
 <Figure
   image={minimumUTXOValueBoxWhiskerFeesScriptType}
   alt="Box and whisker plot of total fees by script type"
-  formats={['svg']}
 >
   Fee Rate axis capped at 300000 sats/vB to better show the differences between
   script types.
@@ -106,7 +102,6 @@ P2WSH and P2TR transactions appear to be paying higher median fees than other sc
 <Figure
   image={minimumUTXOValueBoxWhiskerFeesScriptTypeZoomed}
   alt="Box and whisker plot of total fees by script type, zoomed"
-  formats={['svg']}
 >
   Fee Rate axis capped at 18000 sats/vB to better show the differences between
   script types.
diff --git a/content/articles/r1-vs-o1-ai-as-commodity-or-moat/index.mdx b/content/articles/r1-vs-o1-ai-as-commodity-or-moat/index.mdx
index e54d80f..d4110a5 100644
--- a/content/articles/r1-vs-o1-ai-as-commodity-or-moat/index.mdx
+++ b/content/articles/r1-vs-o1-ai-as-commodity-or-moat/index.mdx
@@ -16,7 +16,7 @@ import dabbingMeme from './us-china-ai-model-enjoyers-dabbing-dude.jpg';
 import nvda from './nvda-2025-01-27.png';
 import inputOutputPricing from './input-output-pricing.jpg';
 import accuracyByBenchmark from './r1-o1-benchmarks.jpg';
-import r1OniPhone from './r1-on-iphone-localghost.gif';
+import r1OniPhone from './r1-on-iphone-localghost.webp';
 
 <Picture
   src={dabbingMeme}
@@ -58,7 +58,7 @@ This is incredible for the little guy: run your own model, privately, without th
 <Figure
   image={r1OniPhone}
   alt="R1 running locally on an iPhone"
-  formats={['gif']}
+  formats={['webp']}
 >
   A distilled version of R1 running locally on an iPhone. Source:
   [@localghost](https://x.com/localghost/status/1882109711732154387).
diff --git a/content/articles/r1-vs-o1-ai-as-commodity-or-moat/r1-on-iphone-localghost.gif b/content/articles/r1-vs-o1-ai-as-commodity-or-moat/r1-on-iphone-localghost.gif
deleted file mode 100644
index e220102..0000000
Binary files a/content/articles/r1-vs-o1-ai-as-commodity-or-moat/r1-on-iphone-localghost.gif and /dev/null differ
diff --git a/content/articles/r1-vs-o1-ai-as-commodity-or-moat/r1-on-iphone-localghost.webp b/content/articles/r1-vs-o1-ai-as-commodity-or-moat/r1-on-iphone-localghost.webp
new file mode 100644
index 0000000..0f24786
Binary files /dev/null and b/content/articles/r1-vs-o1-ai-as-commodity-or-moat/r1-on-iphone-localghost.webp differ
diff --git a/src/components/ui/figure.astro b/src/components/ui/figure.astro
index 9e44dcd..7b7813f 100644
--- a/src/components/ui/figure.astro
+++ b/src/components/ui/figure.astro
@@ -6,9 +6,10 @@ interface Props {
   image: ImageMetadata;
   alt: string;
   formats?: string[];
+  layout?: string;
 }
 
-const { image, alt, formats = ['avif', 'webp'] } = Astro.props;
+const { image, alt, formats = ['avif', 'webp'], layout } = Astro.props;
 ---
 
 <figure>
@@ -16,6 +17,7 @@ const { image, alt, formats = ['avif', 'webp'] } = Astro.props;
     src={image}
     alt={alt}
     formats={formats}
+    layout={layout}
     data-pagefind-index-attrs="alt"
   />
   <figcaption><slot /></figcaption>