fix: scripts for optimizing images

package.json

@@ -5,12 +5,17 @@
     "build": "sapper build --legacy",
     "export": "sapper export --legacy",
     "start": "node __sapper__/build",
+    "clean-after": "rimraf __sapper__/export/images/**/*.webp",
+    "optimize-images": "node scripts/optimize-images",
+    "prod": "run-s export clean-after optimize-images",
     "lint": "eslint . --ext .js,.svelte",
     "lint:fix": "eslint . --ext .js,.svelte --fix"
   },
   "dependencies": {
     "compression": "^1.7.4",
     "email-validator": "^2.0.4",
+    "imagemin": "^7.0.1",
+    "imagemin-webp": "^6.0.0",
     "polka": "next",
     "sirv": "^1.0.6"
   },
@@ -36,11 +41,13 @@
     "eslint-plugin-svelte3": "^2.7.3",
     "node-sass": "^4.14.1",
     "npm-run-all": "^4.1.5",
+    "rimraf": "^3.0.2",
     "rollup": "^2.26.11",
     "rollup-plugin-svelte": "^6.0.1",
     "rollup-plugin-terser": "^7.0.2",
     "sapper": "^0.28.6",
     "svelte": "^3.24.1",
+    "svelte-image": "^0.2.7",
     "svelte-preprocess": "^4.2.1"
   }
 }

scripts/optimize-images.js

@@ -0,0 +1,27 @@
+const path = require('path')
+const imagemin = require('imagemin')
+const webp = require('imagemin-webp')
+
+const webpOptions = {
+  quality: 75,
+  lossless: false,
+  force: true
+}
+
+const sources = [
+  { // Sponsors
+    input: path.resolve('./static/images/sponsors/') + '/*',
+    output: path.resolve('./__sapper__/export/images/sponsors/')
+  },
+  { // People
+    input: path.resolve('./static/images/people/') + '/*',
+    output: path.resolve('./__sapper__/export/images/people/')
+  }
+]
+
+for (const source of sources) {
+  imagemin([source.input], {
+    destination: source.output,
+    plugins: [webp(webpOptions)]
+  })
+}

src/components/image.svelte

@@ -0,0 +1,13 @@
+<script>
+  export let alt
+  export let src
+  const webpSrc = [src.split('.').slice(0, -1), 'webp'].join('.')
+</script>
+
+<picture>
+  {#if process.env.NODE_ENV !== 'development'}
+    <source srcset='{webpSrc}' type='image/webp'>
+  {/if}
+  <source srcset='{src}' type='image/jpeg'> 
+  <img {src} {alt}>
+</picture>

src/components/sections/contact.svelte

@@ -1,6 +1,8 @@
 <script>
   import contacts from '../../../data/contacts.yml'
+
   import Section from '../section.svelte'
+  import Image from '../image.svelte'
 </script>
 
 <Section id={'contact'} heading={'Contact'} >
@@ -10,7 +12,7 @@
   <div class="gallery">
     {#each contacts as contact}
       <div class="contact">
-        <img src={contact.image} alt="{contact.name} photo">
+        <Image src={contact.image} alt="{contact.name} photo" />
         <h3>{contact.name}</h3>
         <h4>{contact.post}</h4>
         <p><span>Phone:</span> <a href="tel:{contact.phone}">{contact.phone}</a></p>
@@ -53,7 +55,7 @@
       flex: 1;
       white-space: nowrap;
 
-      img {
+      :global(img) {
         height: 150px;
         border-radius: 10px;
         margin-bottom: 30px;

src/components/sections/sponsors.svelte

@@ -1,15 +1,17 @@
 <script>
   import sponsors from '../../../data/sponsors.yml'
+
   import Section from '../section.svelte'
   import LinkIcon from '../icons/link.svelte'
+  import Image from '../image.svelte'
 </script>
 
 <Section id={'sponsors'} heading={'Sponsors'} >
   <div class="gallery">
     {#each sponsors as sponsor}
       <a href='{sponsor.link}' target='_blank' rel='noopener'>
         <div class="image-wrapper">
-          <img src={sponsor.image} alt="{sponsor.name} logo"/>
+          <Image src={sponsor.image} alt="{sponsor.name} logo" />
         </div>
         <span>
           {sponsor.name}
@@ -45,7 +47,7 @@
       &:active {
         opacity: 1;
 
-        img {
+        :global(img) {
           filter: saturate(100%);
           transform: scale(1.1);
         }
@@ -62,18 +64,18 @@
       display: flex;
       align-items: center;
       margin-bottom: 20px;
-    }
 
-    img {
-      max-height: 75px;
-      max-width: 250px;
-      align-self: center;
-      border-radius: 10px;
-      transition: 0.1s all ease-in-out;
-      filter: saturate(0%);
+      :global(img) {
+        max-height: 75px;
+        max-width: 250px;
+        align-self: center;
+        border-radius: 10px;
+        transition: 0.1s all ease-in-out;
+        filter: saturate(0%);
 
-      @media only screen and (max-width: 800px) {
-        filter: saturate(75%);
+        @media only screen and (max-width: 800px) {
+          filter: saturate(75%);
+        }
       }
     }
   }

static/robots.txt

@@ -1,2 +1 @@
-# https://www.robotstxt.org/robotstxt.html
 User-agent: *