Performance improvement: WebPへの対応

components/DataView.vue

@@ -74,44 +74,44 @@
                 :aria-label="$t('シェアリンクをコピー', { title })"
                 @click="copyLink"
               >
-                <picture>
-                  <img src="/link.png" alt="link" class="icon-resize link" />
-                </picture>
+                <VPicture
+                  filename="link"
+                  alt="link"
+                  classname="icon-resize link"
+                />
               </button>
 
               <button
                 :aria-label="$t('LINEで{title}のグラフをシェア', { title })"
                 @click="line"
               >
-                <picture>
-                  <img src="/line.png" alt="LINE" class="icon-resize line" />
-                </picture>
+                <VPicture
+                  filename="line"
+                  alt="LINE"
+                  classname="icon-resize line"
+                />
               </button>
 
               <button
                 :aria-label="$t('Twitterで{title}のグラフをシェア', { title })"
                 @click="twitter"
               >
-                <picture>
-                  <img
-                    src="/twitter.png"
-                    alt="Twitter"
-                    class="icon-resize twitter"
-                  />
-                </picture>
+                <VPicture
+                  filename="twitter"
+                  alt="Twitter"
+                  classname="icon-resize twitter"
+                />
               </button>
 
               <button
                 :aria-label="$t('facebookで{title}のグラフをシェア', { title })"
                 @click="facebook"
               >
-                <picture>
-                  <img
-                    src="/facebook.png"
-                    alt="facebook"
-                    class="icon-resize facebook"
-                  />
-                </picture>
+                <VPicture
+                  filename="facebook"
+                  alt="facebook"
+                  classname="icon-resize facebook"
+                />
               </button>
             </div>
           </div>
@@ -133,7 +133,10 @@
 <script lang="ts">
 import Vue from 'vue'
 
+const VPicture = () => import('@/components/VPicture.vue')
+
 export default Vue.extend({
+  components: { VPicture },
   props: {
     title: {
       type: String,

components/SideNavigation.vue

@@ -67,17 +67,22 @@
             target="_blank"
             rel="noopener"
           >
-            <img src="/twitter.png" width="90px" height="90px" alt="Twitter" />
+            <VPicture
+              filename="twitter"
+              width="30px"
+              height="30px"
+              alt="Twitter"
+            />
           </a>
           <a
             href="https://www.facebook.com/Justdouit19/"
             target="_blank"
             rel="noopener"
           >
-            <img
-              src="/facebook.png"
-              width="90px"
-              height="90px"
+            <VPicture
+              filename="facebook"
+              width="30px"
+              height="30px"
               alt="Facebook"
             />
           </a>
@@ -86,7 +91,12 @@
             target="_blank"
             rel="noopener"
           >
-            <img src="/github.png" width="90px" height="90px" alt="GitHub" />
+            <VPicture
+              filename="github"
+              width="30px"
+              height="30px"
+              alt="Github"
+            />
           </a>
         </div>
         <div class="SideNavigation-SponsorLinkContainer">
@@ -109,35 +119,38 @@
                 <span class="image-title">{{ $t('CC BY 4.0') }}</span>
               </template>
               <template #ccByImage>
-                <img
-                  class="cc-by-logo"
-                  src="/cc-by-mini.svg"
+                <VPicture
+                  classname="cc-by-logo"
+                  filename="cc-by-mini"
                   width="85.3px"
                   height="16px"
                   :alt="$t('CC BY 4.0')"
                 />
               </template>
             </i18n> </a
           ><br />
+          <br />
           {{ $t('Operations by:') }}<br />
           <nuxt-link :to="{ path: localePath('/about/') }">
             <span class="image-title">{{ $t('JUST道IT') }}</span>
-            <img
-              class="justdoit-logo"
-              src="/justdouit.png"
+
+            <VPicture
+              classname="justdoit-logo"
+              filename="justdouit"
               width="132px"
               height="46.6px"
               :alt="$t('JUST道IT')"
             />
           </nuxt-link>
 
+          <br />
           <br />
           {{ $t('Powered by:') }}<br />
           <a href="https://www.sakura.ad.jp/" target="_blank" rel="noopener">
             <span class="image-title">{{ $t('さくらインターネット') }}</span>
-            <img
-              class="sakura-internet-logo"
-              src="/sakura.svg"
+            <VPicture
+              classname="sakura-internet-logo"
+              filename="sakura"
               width="176px"
               height="62px"
               :alt="$t('さくらインターネット')"
@@ -155,8 +168,11 @@ import LanguageSelector from '@/components/LanguageSelector.vue'
 import LogoAnimation from '@/components/Logo-Animation'
 import LogoAnimationSp from '@/components/Logo-Animation-sp.vue'
 
+const VPicture = () => import('@/components/VPicture.vue')
+
 export default {
   components: {
+    VPicture,
     LogoAnimationSp,
     LogoAnimation,
     ListItem,
@@ -363,14 +379,14 @@ export default {
     & a:hover {
       opacity: 0.6;
     }
-    & img {
+    & picture {
       padding-bottom: 0.9rem;
     }
-    & img.justdouit-logo {
+    & picture.justdouit-logo {
       margin: 0 0 0 -3px;
       width: 132px;
     }
-    & img.sakura-internet-logo {
+    & picture.sakura-internet-logo {
       margin: -6px 0 0 -14px;
       width: 176px;
     }
@@ -407,11 +423,9 @@ export default {
   }
   &-SocialLinkContainer {
     display: flex;
-    & img {
+    & picture {
       width: 30px;
-      &:first-of-type {
-        margin-right: 10px;
-      }
+      margin-right: 10px;
     }
   }
 }

components/VPicture.vue

@@ -0,0 +1,51 @@
+<template>
+  <picture>
+    <source
+      :srcset="'/' + filename + '.webp'"
+      :width="width"
+      :height="height"
+      :alt="alt"
+      :class="classname"
+      decoding="async"
+      loading="lazy"
+      type="image/webp"
+    />
+    <img
+      :src="'/' + filename + '.png'"
+      :width="width"
+      :height="height"
+      :class="classname"
+      :alt="alt"
+      loading="lazy"
+      decoding="async"
+    />
+  </picture>
+</template>
+
+<script>
+export default {
+  name: 'VPicture',
+  props: {
+    filename: {
+      type: String,
+      default: ''
+    },
+    alt: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    },
+    classname: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>

pages/about.vue

@@ -297,7 +297,11 @@
     </TextCard>
 
     <TextCard title="">
-      <img src="/ogp.png" />
+      <VPicture
+        filename="ogp"
+        classname="img"
+        :alt="$t('北海道アイキャッチ画像')"
+      />
       <i18n path="Illustration by {LITTLEKIT} under {ccBy}">
         <template #LITTLEKIT>
           <a href="https://twitter.com/LITTLEKIT">{{ $t('LITTLEKIT') }}</a>
@@ -316,9 +320,11 @@
 import Vue from 'vue'
 import { MetaInfo } from 'vue-meta'
 import TextCard from '@/components/TextCard.vue'
+const VPicture = () => import('@/components/VPicture.vue')
 
 export default Vue.extend({
   components: {
+    VPicture,
     TextCard
   },
   head(): MetaInfo {

pages/print/info.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <img src="/ogp.png" alt="{{ $t('北海道アイキャッチ画像')" />
+    <VPicture filename="ogp" :alt="$t('北海道アイキャッチ画像')" />
     <br />
     <br />
     <h1 class="sitename">
@@ -39,44 +39,46 @@
             <span class="image-title">{{ $t('CC BY 4.0') }}</span>
           </template>
           <template #ccByImage>
-            <img
-              class="cc-by-logo"
-              src="/cc-by-mini.svg"
+            <VPicture
+              classname="cc-by-logo"
+              src="cc-by-mini"
               width="85.3px"
               height="16px"
-              alt="$t('CC BY 4.0')"
+              :alt="$t('CC BY 4.0')"
             />
           </template>
         </i18n>
       </li>
       <li class="supplementHeader2">
         {{ $t('Operations by:') }}<br />
         <span class="image-title">{{ $t('JUST道IT') }}</span>
-        <img
-          class="justdoit-logo"
-          src="/justdouit.png"
+        <VPicture
+          filename="justdouit"
+          classname="justdoit-logo"
           width="132px"
           height="46.6px"
-          alt="$t('JUST道IT')"
+          :alt="$t('JUST道IT')"
         />
       </li>
       <li class="supplementHeader3">
         {{ $t('Powered by:') }}<br />
         <span class="image-title">{{ $t('さくらインターネット') }}</span>
-        <img
-          class="sakura-internet-logo"
-          src="/sakura.svg"
+        <VPicture
+          classname="sakura-internet-logo"
+          filename="sakura"
           width="176px"
           height="62px"
-          alt="$t('さくらインターネット')"
+          :alt="$t('さくらインターネット')"
         />
       </li>
     </ul>
   </div>
 </template>
 
 <script>
+const VPicture = () => import('@/components/VPicture')
 export default {
+  components: { VPicture },
   layout: 'print',
   head() {
     return {