docs: improve image assets

.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',
   })

.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>

.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%,

.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>

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

@@ -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;

.vitepress/theme/components/landing/5. sponsor-section/SponsorSection.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"

.vitepress/theme/composables/sponsor.ts

@@ -1,4 +1,7 @@
 import { onMounted, onUnmounted, ref } from 'vue'
+import voidZeroSvg from './images/voidzero.svg'
+import boltSvg from './images/bolt.svg'
+import nuxtLabsSvg from './images/nuxtlabs.svg'
 
 interface Sponsors {
   special: Sponsor[]
@@ -28,7 +31,7 @@ const dataUrl = `${dataHost}/vite.json`
 export const voidZero = {
   name: 'VoidZero',
   url: 'https://voidzero.dev',
-  img: '/voidzero.svg',
+  img: voidZeroSvg,
 } satisfies Sponsor
 
 const viteSponsors: Pick<Sponsors, 'special' | 'gold'> = {
@@ -37,13 +40,13 @@ const viteSponsors: Pick<Sponsors, 'special' | 'gold'> = {
     {
       name: 'Bolt',
       url: 'https://bolt.new',
-      img: '/bolt.svg',
+      img: boltSvg,
     },
     // sponsors antfu
     {
       name: 'NuxtLabs',
       url: 'https://nuxtlabs.com',
-      img: '/nuxtlabs.svg',
+      img: nuxtLabsSvg,
     },
   ],
   gold: [

blog/announcing-vite3.md

@@ -13,7 +13,7 @@ head:
       content: Announcing Vite 3
   - - meta
     - property: og:image
-      content: https://vite.dev/og-image-announcing-vite3.png
+      content: https://vite.dev/og-image-announcing-vite3.webp
   - - meta
     - property: og:url
       content: https://vite.dev/blog/announcing-vite3
@@ -31,7 +31,7 @@ _July 23, 2022_ - Check out the [Vite 4.0 announcement](./announcing-vite4.md)
 
 In February last year, [Evan You](https://twitter.com/youyuxi) released Vite 2. Since then, its adoption has grown non-stop, reaching more than 1 million npm downloads per week. A sprawling ecosystem rapidly formed after the release. Vite is powering a renewed innovation race in Web frameworks. [Nuxt 3](https://v3.nuxtjs.org/) uses Vite by default. [SvelteKit](https://kit.svelte.dev/), [Astro](https://astro.build/), [Hydrogen](https://hydrogen.shopify.dev/), and [SolidStart](https://docs.solidjs.com/quick-start) are all built with Vite. [Laravel has now decided to use Vite by default](https://laravel.com/docs/9.x/vite). [Vite Ruby](https://vite-ruby.netlify.app/) shows how Vite can improve Rails DX. [Vitest](https://vitest.dev) is making strides as a Vite-native alternative to Jest. Vite is behind [Cypress](https://docs.cypress.io/guides/component-testing/writing-your-first-component-test) and [Playwright](https://playwright.dev/docs/test-components)'s new Component Testing features, Storybook has [Vite as an official builder](https://github.com/storybookjs/builder-vite). And [the list goes on](https://patak.dev/vite/ecosystem.html). Maintainers from most of these projects got involved in improving the Vite core itself, working closely with the Vite [team](https://vite.dev/team) and other contributors.
 
-![Vite 3 Announcement Cover Image](/og-image-announcing-vite3.png)
+![Vite 3 Announcement Cover Image](/og-image-announcing-vite3.webp)
 
 Today, 16 months from the v2 launch we are happy to announce the release of Vite 3. We decided to release a new Vite major at least every year to align with [Node.js's EOL](https://nodejs.org/en/about/releases/), and take the opportunity to review Vite's API regularly with a short migration path for projects in the ecosystem.
 
@@ -47,7 +47,7 @@ If you are new to Vite, we recommend reading the [Why Vite Guide](https://vite.d
 
 Go to [vite.dev](https://vite.dev) to enjoy the new v3 docs. Vite is now using the new [VitePress](https://vitepress.vuejs.org) default theme, with a stunning dark mode between other features.
 
-[![Vite documentation frontpage](../images/v3-docs.png)](https://vite.dev)
+[![Vite documentation frontpage](../images/v3-docs.webp)](https://vite.dev)
 
 Several projects in the ecosystem have already migrated to it (see [Vitest](https://vitest.dev), [vite-plugin-pwa](https://vite-plugin-pwa.netlify.app/), and [VitePress](https://vitepress.vuejs.org/) itself).
 
@@ -223,9 +223,9 @@ In part, this reduction was possible by making some dependencies that most users
 
 A triaging marathon was spearheaded by [@bluwyoo](https://twitter.com/bluwyoo), [@sapphi_red](https://twitter.com/sapphi_red), that recently joined the Vite team. During the past three months, the Vite open issues were reduced from 770 to 400. And this dive was achieved while the newly open PRs were at an all-time high. At the same time, [@haoqunjiang](https://twitter.com/haoqunjiang) had also curated a comprehensive [overview of Vite issues](https://github.com/vitejs/vite/discussions/8232).
 
-[![Graph of open issues and pull requests in Vite](../images/v3-open-issues-and-PRs.png)](https://www.repotrends.com/vitejs/vite)
+[![Graph of open issues and pull requests in Vite](../images/v3-open-issues-and-PRs.webp)](https://www.repotrends.com/vitejs/vite)
 
-[![Graph of new issues and pull requests in Vite](../images/v3-new-open-issues-and-PRs.png)](https://www.repotrends.com/vitejs/vite)
+[![Graph of new issues and pull requests in Vite](../images/v3-new-open-issues-and-PRs.webp)](https://www.repotrends.com/vitejs/vite)
 
 ## Compatibility Notes
 

blog/announcing-vite4-3.md

@@ -13,7 +13,7 @@ head:
       content: Announcing Vite 4.3
   - - meta
     - property: og:image
-      content: https://vite.dev/og-image-announcing-vite4-3.png
+      content: https://vite.dev/og-image-announcing-vite4-3.webp
   - - meta
     - property: og:url
       content: https://vite.dev/blog/announcing-vite4-3
@@ -29,7 +29,7 @@ head:
 
 _April 20, 2023_
 
-![Vite 4.3 Announcement Cover Image](/og-image-announcing-vite4-3.png)
+![Vite 4.3 Announcement Cover Image](/og-image-announcing-vite4-3.webp)
 
 Quick links:
 
@@ -60,9 +60,9 @@ These are the performance improvements as measured by [sapphi-red/performance-co
 | **Root HMR**       |    30.5ms |   24.0ms |      -21.3% |
 | **Leaf HMR**       |    16.9ms |   10.0ms |      -40.8% |
 
-![Vite 4.3 vs 4.2 startup time comparison](/vite4-3-startup-time.png)
+![Vite 4.3 vs 4.2 startup time comparison](../images/vite4-3-startup-time.webp)
 
-![Vite 4.3 vs 4.2 HMR time comparison](/vite4-3-hmr-time.png)
+![Vite 4.3 vs 4.2 HMR time comparison](../images/vite4-3-hmr-time.webp)
 
 You can read more information about the benchmark [here](https://gist.github.com/sapphi-red/25be97327ee64a3c1dce793444afdf6e). Specs and Versions for this performance run:
 

blog/announcing-vite4.md

@@ -13,7 +13,7 @@ head:
       content: Announcing Vite 4
   - - meta
     - property: og:image
-      content: https://vite.dev/og-image-announcing-vite4.png
+      content: https://vite.dev/og-image-announcing-vite4.webp
   - - meta
     - property: og:url
       content: https://vite.dev/blog/announcing-vite4
@@ -31,13 +31,13 @@ _December 9, 2022_ - Check out the [Vite 5.0 announcement](./announcing-vite5.md
 
 Vite 3 [was released](./announcing-vite3.md) five months ago. npm downloads per week have gone from 1 million to 2.5 million since then. The ecosystem has matured too, and continues to grow. In this year's [Jamstack Conf survey](https://twitter.com/vite_js/status/1589665610119585793), usage among the community jumped from 14% to 32% while keeping a high 9.7 satisfaction score. We saw the stable releases of [Astro 1.0](https://astro.build/), [Nuxt 3](https://v3.nuxtjs.org/), and other Vite-powered frameworks that are innovating and collaborating: [SvelteKit](https://kit.svelte.dev/), [Solid Start](https://www.solidjs.com/blog/introducing-solidstart), [Qwik City](https://qwik.builder.io/qwikcity/overview/). Storybook announced first-class support for Vite as one of its main features for [Storybook 7.0](https://storybook.js.org/blog/first-class-vite-support-in-storybook/). Deno now [supports Vite](https://www.youtube.com/watch?v=Zjojo9wdvmY). [Vitest](https://vitest.dev) adoption is exploding, it will soon represent half of Vite's npm downloads. Nx is also investing in the ecosystem, and [officially supports Vite](https://nx.dev/packages/vite).
 
-[![Vite 4 Ecosystem](/ecosystem-vite4.png)](https://viteconf.org/2022/replay)
+[![Vite 4 Ecosystem](../images/ecosystem-vite4.webp)](https://viteconf.org/2022/replay)
 
 As a showcase of the growth Vite and related projects have experienced, the Vite ecosystem gathered on October 11th at [ViteConf 2022](https://viteconf.org/2022/replay). We saw representatives from the main web framework and tools tell stories of innovation and collaboration. And in a symbolic move, the Rollup team choose that exact day to release [Rollup 3](https://rollupjs.org).
 
 Today, the Vite [team](https://vite.dev/team) with the help of our ecosystem partners, is happy to announce the release of Vite 4, powered during build time by Rollup 3. We've worked with the ecosystem to ensure a smooth upgrade path for this new major. Vite is now using [Rollup 3](https://github.com/vitejs/vite/issues/9870), which allowed us to simplify Vite's internal asset handling and has many improvements. See the [Rollup 3 release notes here](https://github.com/rollup/rollup/releases/tag/v3.0.0).
 
-![Vite 4 Announcement Cover Image](/og-image-announcing-vite4.png)
+![Vite 4 Announcement Cover Image](/og-image-announcing-vite4.webp)
 
 Quick links:
 

blog/announcing-vite5-1.md

@@ -13,7 +13,7 @@ head:
       content: Announcing Vite 5.1
   - - meta
     - property: og:image
-      content: https://vite.dev/og-image-announcing-vite5-1.png
+      content: https://vite.dev/og-image-announcing-vite5-1.webp
   - - meta
     - property: og:url
       content: https://vite.dev/blog/announcing-vite5-1
@@ -29,7 +29,7 @@ head:
 
 _February 8, 2024_
 
-![Vite 5.1 Announcement Cover Image](/og-image-announcing-vite5-1.png)
+![Vite 5.1 Announcement Cover Image](/og-image-announcing-vite5-1.webp)
 
 Vite 5 [was released](./announcing-vite5.md) last November, and it represented another big leap for Vite and the ecosystem. A few weeks ago we celebrated 10 million weekly npm downloads and 900 contributors to the Vite repo. Today, we're excited to announce the release of Vite 5.1.
 
@@ -86,7 +86,7 @@ The preview server now exposes a `close` method, which will properly teardown th
 
 Vite keeps getting faster with each release, and Vite 5.1 is packed with performance improvements. We measured the loading time for 10K modules (25 level deep tree) using [vite-dev-server-perf](https://github.com/yyx990803/vite-dev-server-perf) for all minor versions from Vite 4.0. This is a good benchmark to measure the effect of Vite's bundle-less approach. Each module is a small TypeScript file with a counter and imports to other files in the tree, so this mostly measuring the time it takes to do the requests a separate modules. In Vite 4.0, loading 10K modules took 8 seconds on a M1 MAX. We had a breakthrough in [Vite 4.3 were we focused on performance](./announcing-vite4-3.md), and we were able to load them in 6.35 seconds. In Vite 5.1, we managed to do another performance leap. Vite is now serving the 10K modules in 5.35 seconds.
 
-![Vite 10K Modules Loading time progression](/vite5-1-10K-modules-loading-time.png)
+![Vite 10K Modules Loading time progression](../images/vite5-1-10K-modules-loading-time.webp)
 
 The results of this benchmark run on Headless Puppeteer and are a good way to compare versions. They don't represent the time as experienced by users though. When running the same 10K modules in an Incognito window is Chrome, we have:
 

blog/announcing-vite5.md

@@ -13,7 +13,7 @@ head:
       content: Announcing Vite 5
   - - meta
     - property: og:image
-      content: https://vite.dev/og-image-announcing-vite5.png
+      content: https://vite.dev/og-image-announcing-vite5.webp
   - - meta
     - property: og:url
       content: https://vite.dev/blog/announcing-vite5
@@ -29,7 +29,7 @@ head:
 
 _November 16, 2023_
 
-![Vite 5 Announcement Cover Image](/og-image-announcing-vite5.png)
+![Vite 5 Announcement Cover Image](/og-image-announcing-vite5.webp)
 
 Vite 4 [was released](./announcing-vite4.md) almost a year ago, and it served as a solid base for the ecosystem. npm downloads per week jumped from 2.5 million to 7.5 million, as projects keep building on a shared infrastructure. Frameworks continued to innovate, and on top of [Astro](https://astro.build/), [Nuxt](https://nuxt.com/), [SvelteKit](https://kit.svelte.dev/), [Solid Start](https://www.solidjs.com/blog/introducing-solidstart), [Qwik City](https://qwik.builder.io/qwikcity/overview/), between others, we saw new frameworks joining and making the ecosystem stronger. [RedwoodJS](https://redwoodjs.com/) and [Remix](https://remix.run/) switching to Vite paves the way for further adoption in the React ecosystem. [Vitest](https://vitest.dev) kept growing at an even faster pace than Vite. Its team has been hard at work and will soon [release Vitest 1.0](https://github.com/vitest-dev/vitest/issues/3596). The story of Vite when used with other tools such as [Storybook](https://storybook.js.org), [Nx](https://nx.dev), and [Playwright](https://playwright.dev) kept improving, and the same goes for environments, with Vite dev working both in [Deno](https://deno.com) and [Bun](https://bun.sh).
 

blog/announcing-vite6.md

@@ -13,7 +13,7 @@ head:
       content: Announcing Vite 6
   - - meta
     - property: og:image
-      content: https://vite.dev/og-image-announcing-vite6.png
+      content: https://vite.dev/og-image-announcing-vite6.webp
   - - meta
     - property: og:url
       content: https://vite.dev/blog/announcing-vite6
@@ -29,7 +29,7 @@ head:
 
 _November 26, 2024_
 
-![Vite 6 Announcement Cover Image](/og-image-announcing-vite6.png)
+![Vite 6 Announcement Cover Image](/og-image-announcing-vite6.webp)
 
 Today, we're taking another big step in Vite's story. The Vite [team](/team), [contributors](https://github.com/vitejs/vite/graphs/contributors), and ecosystem partners are excited to announce the release of Vite 6.
 
@@ -39,7 +39,7 @@ New frameworks have also joined the Vite ecosystem, including [TanStack Start](h
 
 Vite is used by OpenAI, Google, Apple, Microsoft, NASA, Shopify, Cloudflare, GitLab, Reddit, Linear, among many others. Two months ago, we started a list of [companies using Vite](https://github.com/vitejs/companies-using-vite). We're happy to see many developers sending us a PR to add their companies to the list. It's hard to believe how much the ecosystem we built together has grown since Vite gave its first steps.
 
-![Vite weekly npm downloads](/vite6-npm-weekly-downloads.png)
+![Vite weekly npm downloads](../images/vite6-npm-weekly-downloads.webp)
 
 ## Speeding up the Vite ecosystem
 

blog/announcing-vite7.md

@@ -13,7 +13,7 @@ head:
       content: Announcing Vite 7
   - - meta
     - property: og:image
-      content: https://vite.dev/og-image-announcing-vite7.png
+      content: https://vite.dev/og-image-announcing-vite7.webp
   - - meta
     - property: og:url
       content: https://vite.dev/blog/announcing-vite7
@@ -29,7 +29,7 @@ head:
 
 _June 24, 2025_
 
-![Vite 7 Announcement Cover Image](/og-image-announcing-vite7.png)
+![Vite 7 Announcement Cover Image](/og-image-announcing-vite7.webp)
 
 We're happy to share the release of Vite 7! It has been 5 years since Evan You sent the first commit to the Vite repo, and nobody could have predicted how much the frontend ecosystem would change since then. Most modern frontend frameworks and tools are now working together, building on top of Vite's shared infrastructure. And they can innovate at a faster pace by sharing at a higher level. Vite is now being downloaded 31 million times a week, with a 14 million increase in the last seven months since the previous major release.
 

guide/api-plugin.md

@@ -12,7 +12,7 @@ Vite は、確立されたパターンをすぐに提供できるように努め
 
 ::: tip
 プラグインを学んだり、デバッグしたり、作成したりする際には、 [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect) をプロジェクトに含めることをお勧めします。これにより、Vite プラグインの中間状態を検査できます。インストール後、`localhost:5173/__inspect/` にアクセスして、プロジェクトのモジュールや変換スタックを検査できます。インストール方法については、[vite-plugin-inspect のドキュメント](https://github.com/antfu/vite-plugin-inspect)をご覧ください。
-![vite-plugin-inspect](../images/vite-plugin-inspect.png)
+![vite-plugin-inspect](../images/vite-plugin-inspect.webp)
 :::
 
 ## 規約