Fine tune image rendering

src/markdown/renderer-extension.ts

@@ -1,5 +1,3 @@
-import path from 'path'
-
 export const renderer = {
   heading(text: string, level: string) {
     const escapedText = text.toLowerCase().replace(/[^\w]+/g, '-')
@@ -14,15 +12,16 @@ export const renderer = {
     `
   },
   image(href: string, title: string, text: string) {
-    const file = path.parse(href)
     const figcaption = title ? `<figcaption>${title}</figcaption>` : ''
+    const isLocal = !href.startsWith('http')
+    const src = isLocal ? `${href}?nf_resize=fit&h=640&w=640` : href
 
     return `
       <figure>
-        <picture>
+        <img
-          <source srcset="${file.dir}/optimized/${file.name}.webp" type="image/webp" />
+          alt="${text}"
-          <img alt="${text}" src="${href}" />
+          src="${src}"
-        </picture>
+        />
         ${figcaption}
       </figure>
     `

src/routes/index.svelte

@@ -4,6 +4,36 @@
   // }
 </script>
 
+<svelte:head>
+  <title>Introduction @michalvankodev</title>
+</svelte:head>
+
+<header class="index-header">
+  <figure class="profile-pic">
+    <picture>
+      <source
+        media="(max-width: 550px)"
+        srcset="images/profile-picture-portrait.jpg"
+      />
+      <img alt="My profile" src="images/profile-picture2.jpg" />
+    </picture>
+  </figure>
+
+  <p class="motto">
+    <cite>“Let your ambition carry you.”</cite>
+    <span>- La Flame</span>
+  </p>
+</header>
+
+<p>
+  Hey, welcome to my personal website. My name is
+  <strong>Michal&nbsp;Vanko</strong>
+  and I'm a
+  <em> <a href="https://en.wikipedia.org/wiki/Programmer">programmer</a> </em>
+  . I'll try to share some stories and opinions about things that I'm interested
+  in.
+</p>
+
 <style>
   figure,
   p {
@@ -30,30 +60,3 @@
     font-size: 1.4em;
   }
 </style>
-
-<svelte:head>
-  <title>Introduction @michalvankodev</title>
-</svelte:head>
-
-<header class="index-header">
-  <figure class="profile-pic">
-    <picture>
-      <source srcset="images/profile-picture.webp" type="image/webp" />
-      <img alt="My profile picture" src="images/profile-picture.jpg" />
-    </picture>
-  </figure>
-
-  <p class="motto">
-    <cite>“Let your ambition carry you.”</cite>
-    <span>- La Flame</span>
-  </p>
-</header>
-
-<p>
-  Hey, welcome to my personal website. My name is
-  <strong>Michal&nbsp;Vanko</strong>
-  and I'm a
-  <em> <a href="https://en.wikipedia.org/wiki/Programmer">programmer</a> </em>
-  . I'll try to share some stories and opinions about things that I'm interested
-  in.
-</p>