feat: image optimization

sapper/package.json

@@ -50,6 +50,7 @@
     "rollup-plugin-terser": "7.0.2",
     "sapper": "0.28.10",
     "svelte": "3.29.4",
+    "svelte-image": "^0.2.7",
     "svelte-preprocess": "4.5.2",
     "tailwindcss": "1.9.6"
   },

sapper/rollup.config.js

@@ -9,6 +9,7 @@ import sveltePreprocess from 'svelte-preprocess'
 import pkg from './package.json'
 const sapperEnv = require('sapper-environment')
 import svelteSVG from 'rollup-plugin-svelte-svg'
+import image from 'svelte-image'
 const mode = process.env.NODE_ENV
 const dev = mode === 'development'
 const legacy = !!process.env.SAPPER_LEGACY_BUILD
@@ -37,7 +38,18 @@ export default {
         'process.env.NODE_ENV': JSON.stringify(mode),
       }),
       svelte({
-        preprocess,
+        preprocess: {
+          ...preprocess,
+          ...image({
+            placeholder: 'blur',
+            webpOptions: {
+              quality: 100,
+              lossless: false,
+              force: true,
+            },
+            webp: false,
+          }),
+        },
         dev,
         hydratable: true,
         emitCss: true,

sapper/src/components/animation/CardHover.svelte

@@ -12,6 +12,6 @@
   on:touchend={() => (active = false)}
   on:mouseenter={handleHover}
   on:mouseleave={handleHover}
-  class="inline-block transform transition duration-150 ease-in w-full {active ? 'shadow-hover' : 'shadow-featured'}">
+  class="bg-transparent inline-block transform transition duration-150 ease-in w-full {active ? 'shadow-hover' : 'shadow-featured'}">
   <slot />
 </div>

sapper/src/components/contact/Challenge.svelte

@@ -1,12 +1,15 @@
 <script>
   import Layout from './Layout.svelte'
+  import Image from 'svelte-image'
 </script>
 
 <Layout
   title="Har du en liknande utmaning?"
   text="Vi är redo att hjälpa era att ta det första steget mot att förverkliga er digitala vision. Kontakta oss så berättar vi mer.">
   <div class="self-start flex flex-col flex-shrink-0 md:pt-8">
-    <img src="sales.png" alt="sales person" />
+    <div class="w-56">
+      <Image src="sales.png" alt="sales person" />
+    </div>
     <div class="mt-4">
       <p class="font-medium">Jonna Hjern</p>
       <p class="font-thin">

sapper/src/components/contact/Layout.svelte

@@ -20,7 +20,7 @@
         </h2>
         <Typography.ParagraphLg>{text}</Typography.ParagraphLg>
         <Animation.ButtonHover>
-          <a class="block" href="/kontakta-oss">
+          <a href="/kontakta-oss">
             <Buttons.Default width={'w-full md:w-auto'}>
               {ctaText}
             </Buttons.Default>

sapper/src/routes/GreenBlock.svelte

@@ -2,6 +2,7 @@
   import Layout from '../components/layout'
   import Animation from '../components/animation'
   import Typography from '../components/typography'
+  import Image from 'svelte-image'
 
   const customers = ['trr', 'tsab', 'vimla', 'tj', 'nh', 'gr']
 </script>
@@ -24,10 +25,7 @@
       <div class="grid grid-cols-12 grid-rows-6 w-full">
         <div
           class="grid col-start-1 col-end-6 row-start-2 row-span-full hidden md:block max-w-xl  z-50">
-          <img
-            class="h-auto"
-            src="Radu-Amir-working-Lowres.jpg"
-            alt="illustration" />
+          <Image src="Radu-Amir-working-Lowres.jpg" alt="two co-workers" />
         </div>
         <div
           class="grid col-span-full row-span-full md:col-start-5 md:col-end-13 row-start-1 md:row-end-5">

sapper/src/routes/index.svelte

@@ -15,6 +15,7 @@
   import GreenBlock from './GreenBlock.svelte'
   import Layout from '../components/layout'
   import Meta from '../components/Meta.svelte'
+  import Image from 'svelte-image'
 
   export async function preload(_page, session) {
     return API({ fetch: this.fetch, session })
@@ -129,11 +130,8 @@
             hjälper er att digitalisera er affär.
           </Typography.ParagraphMd>
         </div>
-        <div class="hidden md:block max-w-xl">
-          <img
-            class="h-auto"
-            src="Mikael-Nisse-Mimmi-Lowres.jpg"
-            alt="illustration" />
+        <div class="hidden md:block max-w-xl w-full">
+          <Image src="Mikael-Nisse-Mimmi-Lowres.jpg" alt="two co-workers" />
         </div>
       </div>
     </Animation.WithScrollFadeIn>
@@ -170,8 +168,8 @@
             team och vi jobbar tillsammans mot våra gemensamma mål.
           </Typography.ParagraphMd>
         </div>
-        <div class="hidden md:block max-w-xl">
-          <img
+        <div class="hidden md:block max-w-xl h-full w-full relative">
+          <Image
             class="ml-auto"
             src="Dennis-Radu-Amir-Lowres.jpg"
             alt="illustration" />

sapper/src/routes/om-oss/index.svelte

@@ -16,6 +16,8 @@
   import ContactBlock from '../../components/contact'
   import Meta from '../../components/Meta.svelte'
   import md5 from 'md5'
+  import Image from 'svelte-image'
+
   export let pages
 
   const coworkers = pages.map(({ title, excerpt, feature_image: image }) => {
@@ -76,14 +78,10 @@
       </div>
     </div>
     <div class="grid md:grid-cols-2 grid-cols-1 justify-items-center gap-8">
-      <img
-        class="h-auto w-full object-cover md:mb-32"
-        src="Kitchen-Monday-meeting-Lowres.png"
-        alt="beautiful kitchen" />
-      <img
-        class="h-auto w-full object-cover md:mt-32"
-        src="Hopper-Interior-Lowres.png"
-        alt="nice room" />
+      <Image src="Kitchen-Monday-meeting-Lowres.png" alt="beautiful kitchen" />
+      <div class="md:mt-32 w-full">
+        <Image src="Hopper-Interior-Lowres.png" alt="nice room" />
+      </div>
     </div>
   </Layout.Container>
 </Animation.WithScrollFadeIn>
@@ -133,9 +131,13 @@
 <Animation.WithScrollFadeIn>
   <div class="grid grid-cols-1 lg:grid-cols-2 bg-blue-marine lg:h-banner">
     <div
-      class="row-start-1 col-start-1 hidden lg:block bg-cover bg-top"
-      style="background-image: url(looking-into-wall.png);"
-      title="looking into the wall" />
+      class="row-start-1 col-start-1 hidden lg:block relative w-full h-full overflow-hidden">
+      <Image
+        class="custom-image"
+        wrapperClass="custom-image-wrapper"
+        src="looking-into-wall.png"
+        alt="looking into wall" />
+    </div>
     <div class="col-span-full relative row-start-1 self-center px-8">
       <div class="py-16 max-w-screen-xl mx-auto w-full">
         <div class="grid grid-cols-1 lg:grid-cols-2">

sapper/static/global.css

@@ -15,6 +15,10 @@ body {
   }
 }
 
+.custom-image-wrapper {
+  min-width: 600px;
+}
+
 .iteam-width {
   display: grid;
   grid-template-columns: 2rem 1fr minmax(100px, 1280px) 1fr 2rem;