add webp

astro.config.mjs

@@ -3,4 +3,13 @@ import icon from 'astro-icon';
 
 export default defineConfig({
   integrations: [icon()],
+  compressHTML: true,
+  build: {
+    inlineStylesheets: 'auto',
+  },
+  vite: {
+    build: {
+      cssMinify: 'esbuild',
+    },
+  },
 });

src/i18n/en.ts

@@ -24,7 +24,7 @@ export const en: SiteCopy = {
   },
   footer: {
     company: 'Five Questions (Beijing) Technology Co., Ltd.',
-    addressLine: 'Address: No. 1117, 1st Floor, Building 1, No. 2 Yongcheng North Road, Haidian District, Beijing, 100000, China',
+    addressLine: 'Address: Room A-012, 1F, North Auxiliary Building, No. 6 Tianfu North Street, Wenjing Subdistrict, Tongzhou District, Beijing 101100, China',
     emailLine: 'Email: liutingchao@fivequestions.cn',
     colAbout: 'About',
     linkPhilosophy: 'Teaching philosophy',

src/i18n/fr.ts

@@ -24,7 +24,7 @@ export const fr: SiteCopy = {
   },
   footer: {
     company: 'Five Questions (Beijing) Technology Co., Ltd.',
-    addressLine: 'Adresse : district de Haidian, Pékin',
+    addressLine: 'Adresse : Room A-012, 1F, North Auxiliary Building, No. 6 Tianfu North Street, Wenjing Subdistrict, Tongzhou District, Beijing 101100, Chine',
     emailLine: 'Courriel : liutingchao@fivequestions.cn',
     colAbout: 'Liens',
     linkPhilosophy: 'Pédagogie',

src/i18n/ja.ts

@@ -24,7 +24,7 @@ export const ja: SiteCopy = {
   },
   footer: {
     company: '五道题（北京）科技有限公司',
-    addressLine: '住所：北京市海淀区永成北路2号楼1号楼1117室',
+    addressLine: '住所：北京市通州区文景街道田府北街6号北配楼1階A-012',
     emailLine: 'メール：liutingchao@fivequestions.cn',
     colAbout: 'サイトマップ',
     linkPhilosophy: '教育理念',

src/i18n/zh.ts

@@ -24,7 +24,7 @@ export const zh: SiteCopy = {
   },
   footer: {
     company: '五道题（北京）科技有限公司',
-    addressLine: '地址：北京市海淀区永成北路2号楼1号楼1117室',
+    addressLine: '地址：北京市通州区文景街道田府北街6号北配楼1层A-012',
     emailLine: '邮箱：liutingchao@fivequestions.cn',
     colAbout: '关于我们',
     linkPhilosophy: '教学理念',

src/pages/[...lang]/about.astro

@@ -28,7 +28,7 @@ const L = getCopy(locale);
   <section class="section compact" style="padding-top:0">
     <div class="container">
       <div class="hero-image" style="border-radius:0;box-shadow:none">
-        <img src="/images/sketch/6de9aa9e5d23da3009d3776b55c3b84c02a5aaa2.png" alt={L.about.visionFigureAlt} />
+        <img src="/images/sketch/6de9aa9e5d23da3009d3776b55c3b84c02a5aaa2.webp" alt={L.about.visionFigureAlt} loading="eager" fetchpriority="high" decoding="async" />
       </div>
     </div>
   </section>
@@ -52,7 +52,7 @@ const L = getCopy(locale);
           <p>{L.about.missionBody}</p>
         </div>
         <div class="alt-card-img photo">
-          <img src="/images/sketch/165dc7c938317262993013e2bf7108b0d8429d1e.png" alt={L.about.missionImgAlt} />
+          <img src="/images/sketch/165dc7c938317262993013e2bf7108b0d8429d1e.webp" alt={L.about.missionImgAlt} loading="lazy" decoding="async" />
         </div>
       </div>
     </div>
@@ -66,7 +66,7 @@ const L = getCopy(locale);
           <p>{L.about.storyBody}</p>
         </div>
         <div class="alt-card-img photo">
-          <img src="/images/sketch/d47cf2285609fda9339d16a5dae947ac4f22416e.png" alt={L.about.storyImgAlt} />
+          <img src="/images/sketch/d47cf2285609fda9339d16a5dae947ac4f22416e.webp" alt={L.about.storyImgAlt} loading="lazy" decoding="async" />
         </div>
       </div>
     </div>
@@ -80,7 +80,7 @@ const L = getCopy(locale);
           <p>{L.about.teamBody}</p>
         </div>
         <div class="alt-card-img photo">
-          <img src="/images/sketch/7cdc25ddd57dfe8b8394e8b3ed7ffc28225b6471.png" alt={L.about.teamImgAlt} />
+          <img src="/images/sketch/7cdc25ddd57dfe8b8394e8b3ed7ffc28225b6471.webp" alt={L.about.teamImgAlt} loading="lazy" decoding="async" />
         </div>
       </div>
     </div>

src/pages/[...lang]/curriculum.astro

@@ -33,7 +33,7 @@ const L = getCopy(locale);
           <p>{L.curriculum.hskBody}</p>
         </div>
         <div class="alt-card-img">
-          <img src="/images/sketch/67a807fec1b784684e1a026f0ee01f5072a571c7.png" alt={L.curriculum.hskImgAlt} />
+          <img src="/images/sketch/67a807fec1b784684e1a026f0ee01f5072a571c7.webp" alt={L.curriculum.hskImgAlt} loading="lazy" decoding="async" />
         </div>
       </div>
     </div>
@@ -47,7 +47,7 @@ const L = getCopy(locale);
           <p>{L.curriculum.skillsBody}</p>
         </div>
         <div class="alt-card-img">
-          <img src="/images/sketch/9286e6b5a91d38938547ebf3909e5d6886e79899.png" alt={L.curriculum.skillsImgAlt} />
+          <img src="/images/sketch/9286e6b5a91d38938547ebf3909e5d6886e79899.webp" alt={L.curriculum.skillsImgAlt} loading="lazy" decoding="async" />
         </div>
       </div>
     </div>
@@ -61,7 +61,7 @@ const L = getCopy(locale);
           <p>{L.curriculum.contextBody}</p>
         </div>
         <div class="alt-card-img">
-          <img src="/images/sketch/eb55da7436f1cf69f9ce2a44234033426361d80d.png" alt={L.curriculum.contextImgAlt} />
+          <img src="/images/sketch/eb55da7436f1cf69f9ce2a44234033426361d80d.webp" alt={L.curriculum.contextImgAlt} loading="lazy" decoding="async" />
         </div>
       </div>
     </div>
@@ -75,7 +75,7 @@ const L = getCopy(locale);
           <p>{L.curriculum.advancedBody}</p>
         </div>
         <div class="alt-card-img">
-          <img src="/images/sketch/3fb13b6b14a9c9c38c19f57b131e9dbb84e9d2a8.png" alt={L.curriculum.advancedImgAlt} />
+          <img src="/images/sketch/3fb13b6b14a9c9c38c19f57b131e9dbb84e9d2a8.webp" alt={L.curriculum.advancedImgAlt} loading="lazy" decoding="async" />
         </div>
       </div>
     </div>

src/pages/[...lang]/faculty.astro

@@ -27,9 +27,12 @@ const L = getCopy(locale);
       </div>
       <div class="hero-split-art">
         <img
-          src="/images/sketch/8f23517eccd3e10f8cdc63887d23cd0aaaa75181.png"
+          src="/images/sketch/8f23517eccd3e10f8cdc63887d23cd0aaaa75181.webp"
           alt={L.faculty.heroImgAlt}
           style="max-width:480px"
+          loading="eager"
+          fetchpriority="high"
+          decoding="async"
         />
       </div>
     </div>
@@ -110,7 +113,7 @@ const L = getCopy(locale);
           <p>{L.faculty.advantageBody}</p>
         </div>
         <div class="alt-card-img">
-          <img src="/images/sketch/eb55da7436f1cf69f9ce2a44234033426361d80d.png" alt={L.faculty.advantageImgAlt} />
+          <img src="/images/sketch/eb55da7436f1cf69f9ce2a44234033426361d80d.webp" alt={L.faculty.advantageImgAlt} loading="lazy" decoding="async" />
         </div>
       </div>
     </div>

src/pages/[...lang]/index.astro

@@ -35,7 +35,7 @@ const L = getCopy(locale);
         <div class="index-left-right feature-card">
           <div class="bento-hero">
             <div class="art-panel photo" style="height:100%">
-              <img src="/images/index-left.png" alt={L.home.bentoAlt} />
+              <img src="/images/index-left.webp" alt={L.home.bentoAlt} loading="eager" fetchpriority="high" decoding="async" />
             </div>
           </div>
           <div class="bento-side soft">
@@ -48,8 +48,10 @@ const L = getCopy(locale);
           <article class="feature-card soft card-with-thumb">
             <div class="card-thumb">
               <img
-                src="/images/sketch/f1b84ab9a9a9c47ffa390d0bea93ab79d019625c.png"
+                src="/images/sketch/f1b84ab9a9a9c47ffa390d0bea93ab79d019625c.webp"
                 alt=""
+                loading="lazy"
+                decoding="async"
               />
             </div>
             <h3>{L.home.aiTitle}</h3>
@@ -58,8 +60,10 @@ const L = getCopy(locale);
           <article class="feature-card soft card-with-thumb">
             <div class="card-thumb">
               <img
-                src="/images/sketch/efa4288e0fad73637720bfd9ac094a67a39ed465.png"
+                src="/images/sketch/efa4288e0fad73637720bfd9ac094a67a39ed465.webp"
                 alt=""
+                loading="lazy"
+                decoding="async"
               />
             </div>
             <h3>{L.home.personalTitle}</h3>
@@ -68,8 +72,10 @@ const L = getCopy(locale);
           <article class="feature-card soft card-with-thumb">
             <div class="card-thumb">
               <img
-                src="/images/sketch/bcc2546bb5ac5489aaf0a6cd2501e09da4de3570.png"
+                src="/images/sketch/bcc2546bb5ac5489aaf0a6cd2501e09da4de3570.webp"
                 alt=""
+                loading="lazy"
+                decoding="async"
               />
             </div>
             <h3>{L.home.communityTitle}</h3>
@@ -119,7 +125,7 @@ const L = getCopy(locale);
       <article class="feature-card showcase-card">
         <div class="showcase-hero">
           <div class="showcase-title">{L.home.facultyHighlightTitle}</div>
-          <img src="/images/teacher.png" alt={L.home.teacherImgAlt} />
+          <img src="/images/teacher.webp" alt={L.home.teacherImgAlt} loading="lazy" decoding="async" />
         </div>
         <div class="showcase-body">
           <p>{L.home.facultyHighlightBody}</p>
@@ -131,7 +137,7 @@ const L = getCopy(locale);
       <article class="feature-card showcase-card">
         <div class="showcase-hero">
           <div class="showcase-title">{L.home.experienceTitle}</div>
-          <img src="/images/study.png" alt={L.home.studyImgAlt} />
+          <img src="/images/study.webp" alt={L.home.studyImgAlt} loading="lazy" decoding="async" />
         </div>
         <div class="showcase-body">
           <p>{L.home.experienceBody}</p>

src/pages/[...lang]/teaching-philosophy.astro

@@ -24,9 +24,12 @@ const L = getCopy(locale);
       </div>
       <div class="hero-split-art">
         <img
-          src="/images/sketch/53f5e9c4751757b91531fd260cf01f6eff8e1278.png"
+          src="/images/sketch/53f5e9c4751757b91531fd260cf01f6eff8e1278.webp"
           alt={L.philosophy.heroImgAlt}
           style="max-width:480px"
+          loading="eager"
+          fetchpriority="high"
+          decoding="async"
         />
       </div>
     </div>
@@ -37,10 +40,10 @@ const L = getCopy(locale);
       <div class="alt-card">
         <div class="edu-goal-images">
           <div class="goal-photo">
-            <img src="/images/sketch/d5c638f4b093f233101f28a2872f10f3172a3ac4.png" alt={L.philosophy.goalPhotoAlt} />
+            <img src="/images/sketch/d5c638f4b093f233101f28a2872f10f3172a3ac4.webp" alt={L.philosophy.goalPhotoAlt} loading="lazy" decoding="async" />
           </div>
           <div class="goal-icon">
-            <img src="/images/sketch/3cfbe88194be43bcc0ab7a8e987c4d7eaad93ef5.png" alt={L.philosophy.goalIconAlt} />
+            <img src="/images/sketch/3cfbe88194be43bcc0ab7a8e987c4d7eaad93ef5.webp" alt={L.philosophy.goalIconAlt} loading="lazy" decoding="async" />
           </div>
         </div>
         <div class="alt-card-text">
@@ -59,25 +62,25 @@ const L = getCopy(locale);
       <div class="grid-four">
         <div class="method-item">
           <div class="method-icon">
-            <img src="/images/sketch/1abbe19f0bf338ca5914e4918c80e2a0166fb3c6.png" alt="" />
+            <img src="/images/sketch/1abbe19f0bf338ca5914e4918c80e2a0166fb3c6.webp" alt="" loading="lazy" decoding="async" />
           </div>
           <span class="method-label">{L.philosophy.m1}</span>
         </div>
         <div class="method-item">
           <div class="method-icon">
-            <img src="/images/sketch/9286e6b5a91d38938547ebf3909e5d6886e79899.png" alt="" />
+            <img src="/images/sketch/9286e6b5a91d38938547ebf3909e5d6886e79899.webp" alt="" loading="lazy" decoding="async" />
           </div>
           <span class="method-label">{L.philosophy.m2}</span>
         </div>
         <div class="method-item">
           <div class="method-icon">
-            <img src="/images/sketch/3cfbe88194be43bcc0ab7a8e987c4d7eaad93ef5.png" alt="" />
+            <img src="/images/sketch/3cfbe88194be43bcc0ab7a8e987c4d7eaad93ef5.webp" alt="" loading="lazy" decoding="async" />
           </div>
           <span class="method-label">{L.philosophy.m3}</span>
         </div>
         <div class="method-item">
           <div class="method-icon">
-            <img src="/images/sketch/abfcce4aed0c6b426ced3e4a00ca599ddb0bc080.png" alt="" />
+            <img src="/images/sketch/abfcce4aed0c6b426ced3e4a00ca599ddb0bc080.webp" alt="" loading="lazy" decoding="async" />
           </div>
           <span class="method-label">{L.philosophy.m4}</span>
         </div>
@@ -92,15 +95,15 @@ const L = getCopy(locale);
       </div>
       <div class="grid-three">
         <article class="feature-thumb-card">
-          <img class="thumb-img" src="/images/sketch/d5c638f4b093f233101f28a2872f10f3172a3ac4.png" alt={L.philosophy.f1alt} />
+          <img class="thumb-img" src="/images/sketch/d5c638f4b093f233101f28a2872f10f3172a3ac4.webp" alt={L.philosophy.f1alt} loading="lazy" decoding="async" />
           <div class="thumb-caption">{L.philosophy.f1cap}</div>
         </article>
         <article class="feature-thumb-card">
-          <img class="thumb-img" src="/images/sketch/4f0c158d4abd3ded7bc18fb50aedeedc77691076.png" alt={L.philosophy.f2alt} />
+          <img class="thumb-img" src="/images/sketch/4f0c158d4abd3ded7bc18fb50aedeedc77691076.webp" alt={L.philosophy.f2alt} loading="lazy" decoding="async" />
           <div class="thumb-caption">{L.philosophy.f2cap}</div>
         </article>
         <article class="feature-thumb-card">
-          <img class="thumb-img" src="/images/sketch/e008645eb4e8bd0b78d8a748abedf9702a1944c0.png" alt={L.philosophy.f3alt} />
+          <img class="thumb-img" src="/images/sketch/e008645eb4e8bd0b78d8a748abedf9702a1944c0.webp" alt={L.philosophy.f3alt} loading="lazy" decoding="async" />
           <div class="thumb-caption">{L.philosophy.f3cap}</div>
         </article>
       </div>

src/styles/global.css

@@ -346,7 +346,7 @@ button {
 }
 
 .index-hero {
-  background-image: url('/images/index-hero-bg.png');
+  background-image: url('/images/index-hero-bg.webp');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;