Update old preview images

frontend/src/app/services/opengraph.service.ts

@@ -25,7 +25,7 @@ export class OpenGraphService {
   ) {
     // save og:image tag from original template
     const initialOgImageTag = metaService.getTag("property='og:image'");
-    this.defaultImageUrl = initialOgImageTag?.content || 'https://mempool.space/resources/previews/mempool-space-preview.png';
+    this.defaultImageUrl = initialOgImageTag?.content || 'https://mempool.space/resources/previews/mempool-space-preview.jpg';
     this.router.events.pipe(
       filter(event => event instanceof NavigationEnd),
       map(() => this.activatedRoute),

frontend/src/index.mempool.html

@@ -8,17 +8,17 @@
   <base href="/">
 
   <meta name="description" content="Explore the full Bitcoin ecosystem with The Mempool Open Source Project®. See the real-time status of your transactions, get network info, and more." />
-  <meta property="og:image" content="https://mempool.space/resources/previews/mempool-space-preview.png" />
-  <meta property="og:image:type" content="image/png" />
-  <meta property="og:image:width" content="1000" />
-  <meta property="og:image:height" content="500" />
+  <meta property="og:image" content="https://mempool.space/resources/previews/mempool-space-preview.jpg" />
+  <meta property="og:image:type" content="image/jpeg" />
+  <meta property="og:image:width" content="2000" />
+  <meta property="og:image:height" content="1000" />
   <meta property="og:description" content="Explore the full Bitcoin ecosystem with The Mempool Open Source Project®. See the real-time status of your transactions, get network info, and more." />
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:site" content="@mempool">
   <meta name="twitter:creator" content="@mempool">
   <meta name="twitter:title" content="The Mempool Open Source Project®">
   <meta name="twitter:description" content="Explore the full Bitcoin ecosystem with The Mempool Open Source Project®. See the real-time status of your transactions, get network info, and more." />
-  <meta name="twitter:image" content="https://mempool.space/resources/previews/mempool-space-preview.png" />
+  <meta name="twitter:image" content="https://mempool.space/resources/previews/mempool-space-preview.jpg" />
   <meta name="twitter:domain" content="mempool.space">
 
   <link rel="apple-touch-icon" sizes="180x180" href="/resources/favicons/apple-touch-icon.png">

unfurler/src/routes.ts

@@ -30,7 +30,7 @@ const routes = {
   },
   lightning: {
     title: "Lightning",
-    fallbackImg: '/resources/previews/lightning.png',
+    fallbackImg: '/resources/previews/lightning.jpg',
     routes: {
       node: {
         render: true,
@@ -68,7 +68,7 @@ const routes = {
   },
   mining: {
     title: "Mining",
-    fallbackImg: '/resources/previews/mining.png',
+    fallbackImg: '/resources/previews/mining.jpg',
     routes: {
       pool: {
         render: true,
@@ -83,7 +83,7 @@ const routes = {
 
 const networks = {
   bitcoin: {
-    fallbackImg: '/resources/previews/mempool-space-preview.png',
+    fallbackImg: '/resources/previews/mempool-space-preview.jpg',
     routes: {
       ...routes // all routes supported
     }