Change profile picture and make better netlify LM transforms

src/lib/large-media.ts

@@ -0,0 +1,42 @@
+import { map, multiply } from 'ramda'
+
+export interface ImageOptions {
+  width?: number
+  height?: number
+}
+
+/**
+ * Get the URL for resource with specified parameters for Netlify Large Media trasformation
+ *
+ * @see https://docs.netlify.com/large-media/transform-images/
+ */
+export function getNFResize(href: string, { width, height }: ImageOptions) {
+  return `${href}?nf_resize=fit${height ? `&h=${height}` : ''}${
+    width ? `&w=${width}` : ''
+  }`
+}
+
+export const PIXEL_DENSITIES = [1, 1.5, 2, 3, 4]
+
+function multiplyImageOptions(
+  multiplier,
+  imageOptions: ImageOptions
+): ImageOptions {
+  return map(multiply(multiplier), imageOptions)
+}
+
+/**
+ * Generate `srcset` attribute for all `PIXEL_DENSITIES` to serve images in appropriate quality
+ * for each device with specific density
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset
+ */
+export function generateSrcSet(href: string, imageOptions: ImageOptions) {
+  return PIXEL_DENSITIES.map(
+    (density) =>
+      `${getNFResize(
+        href,
+        multiplyImageOptions(density, imageOptions)
+      )} ${density}x`
+  ).join(',')
+}

src/markdown/renderer-extension.ts

@@ -1,12 +1,9 @@
+import { generateSrcSet, getNFResize } from '$lib/large-media'
 import Prism from 'prismjs'
 import loadLanguages from 'prismjs/components/index.js'
 
 loadLanguages(['bash', 'markdown', 'json', 'yaml', 'typescript'])
 
-function getNFResize(href: string, height: number, width: number) {
-  return `${href}?nf_resize=fit&h=${height}&w=${width}`
-}
-
 export const renderer = {
   heading(text: string, level: string) {
     const escapedText = text.toLowerCase().replace(/[^\w]+/g, '-')
@@ -23,13 +20,9 @@ export const renderer = {
   image(href: string, title: string, text: string) {
     const figcaption = title ? `<figcaption>${title}</figcaption>` : ''
     const isLocal = !href.startsWith('http')
-    const src = isLocal ? getNFResize(href, 800, 800) : href
+    const src = isLocal ? getNFResize(href, { height: 800, width: 800 }) : href
     const srcset = isLocal
-      ? `srcset="${getNFResize(href, 800, 800)}, ${getNFResize(
+      ? `srcset="${generateSrcSet(href, { width: 800, height: 800 })}"`
-          href,
-          1200,
-          1200
-        )} 1.5x, ${getNFResize(href, 1600, 1600)} 2x"`
       : ''
 
     return `

src/routes/index.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { generateSrcSet, getNFResize } from '$lib/large-media'
   import {
     citeOwnerClass,
     mottoClass,
@@ -16,9 +17,19 @@
     <picture>
       <source
         media="(max-width: 550px)"
-        srcset="images/profile-picture-portrait.jpg"
+        srcset={generateSrcSet('images/profile-portugal-portrait.jpg', {
+          width: 500,
+        })}
+      />
+      <img
+        alt="Portrait"
+        srcset={generateSrcSet('images/profile-portugal-landscape.jpg', {
+          width: 800,
+        })}
+        src={getNFResize('images/profile-portugal-landscape.jpg', {
+          width: 800,
+        })}
       />
-      <img alt="My profile" src="images/profile-picture2.jpg" />
     </picture>
   </figure>