docs: improve image assets (vitejs#20578)

Author: sapphi-red

docs/.vitepress/buildEnd.config.ts

@@ -14,7 +14,7 @@ export const buildEnd = async (config: SiteConfig): Promise<void> => {
     id: blogUrl,
     link: blogUrl,
     language: 'en',
-    image: 'https://vite.dev/og-image.png',
+    image: 'https://vite.dev/og-image.jpg',
     favicon: 'https://vite.dev/logo.svg',
     copyright: 'Copyright © 2019-present VoidZero Inc. & Vite Contributors',
   })

docs/.vitepress/theme/components/AsideSponsors.vue

@@ -24,7 +24,12 @@ const sponsors = computed(() => {
     href="https://viteconf.org/?utm=vite-sidebar"
     target="_blank"
   >
-    <img width="22" height="22" src="/viteconf.svg" alt="ViteConf Logo" />
+    <img
+      width="22"
+      height="22"
+      src="../../../images/viteconf.svg"
+      alt="ViteConf Logo"
+    />
     <span>
       <p class="extra-info">Building Together</p>
       <p class="heading">ViteConf 2025</p>

docs/.vitepress/theme/components/landing/1. hero-section/HeroDiagram.vue

@@ -470,7 +470,7 @@ onMounted(() => {
       </div>
       <div class="vite-chip__filter" />
       <img
-        :src="isUwu ? '/logo-uwu.png' : '/logo.svg'"
+        :src="isUwu ? '/logo-uwu.webp' : '/logo.svg'"
         :alt="isUwu ? 'Vite Kawaii Logo by @icarusgkx' : 'Vite Logo'"
         class="vite-chip__logo"
         :class="{ uwu: isUwu }"
@@ -715,7 +715,7 @@ onMounted(() => {
   }
 
   background:
-    url('/noise.png'),
+    url('../common/noise.webp'),
     radial-gradient(
       circle at right center,
       rgb(86, 50, 119) 0%,
@@ -732,7 +732,7 @@ onMounted(() => {
 
   @media (min-width: 1024px) {
     background:
-      url('/noise.png'),
+      url('../common/noise.webp'),
       radial-gradient(
         circle at right center,
         rgba(75, 41, 105, 0.5) 0%,
@@ -751,7 +751,7 @@ onMounted(() => {
 
   @media (min-width: 1500px) {
     background:
-      url('/noise.png'),
+      url('../common/noise.webp'),
       radial-gradient(
         circle at right center,
         rgba(75, 41, 105, 0.5) 0%,
@@ -770,7 +770,7 @@ onMounted(() => {
 
   @media (min-width: 1800px) {
     background:
-      url('/noise.png'),
+      url('../common/noise.webp'),
       radial-gradient(
         circle at right center,
         rgba(75, 41, 105, 0.5) 0%,

docs/.vitepress/theme/components/landing/1. hero-section/HeroSection.vue

@@ -11,7 +11,12 @@ import HeroDiagram from './HeroDiagram.vue'
         class="hero__pill"
         target="_blank"
       >
-        <img src="/viteconf.svg" alt="Viteconf logo" width="20" height="20" />
+        <img
+          src="../../../../../images/viteconf.svg"
+          alt="Viteconf logo"
+          width="20"
+          height="20"
+        />
         <span>ViteConf 2025</span>
       </a>
 
@@ -31,7 +36,7 @@ import HeroDiagram from './HeroDiagram.vue'
           target="_blank"
           class="btn btn--outline"
         >
-          <img src="/github.svg" alt="GitHub logo" width="20" height="20" />
+          <img src="./github.svg" alt="GitHub logo" width="20" height="20" />
           GitHub
         </a>
       </div>

docs/public/github.svg renamed to docs/.vitepress/theme/components/landing/1. hero-section/github.svg

@@ -344,7 +344,7 @@ onUnmounted(() => {
       height: 100%;
       border-radius: 12px 0 0 12px;
       background:
-        url('/noise.png'),
+        url('../common/noise.webp'),
         radial-gradient(
           ellipse 140% 80% at 96% bottom,
           #13b351 0%,
@@ -381,7 +381,7 @@ onUnmounted(() => {
     right: 40px;
     width: 1px;
     height: calc(100% - 170px - 33px);
-    background: url('/noise.png'), #13b351;
+    background: url('../common/noise.webp'), #13b351;
     box-shadow: 0 0 10px 0 #13b351;
     transition: all 0.5s ease-in;
     will-change: transform, opacity;

docs/.vitepress/theme/components/landing/2. feature-section/FeatureInstantServerStart.vue

@@ -41,7 +41,7 @@ const { data } = useSponsor()
     <!-- Title Section -->
     <img
       class="icon-heart"
-      src="/heart.svg"
+      src="./heart.svg"
       alt="Vite is made possible by our contributors, partner companies, and sponsors"
       width="58"
       height="55"