diff --git a/apps/admin/src/assets/images/bg.png b/apps/admin/src/assets/images/bg.png
deleted file mode 100644
index 77b5f25..0000000
Binary files a/apps/admin/src/assets/images/bg.png and /dev/null differ
diff --git a/apps/admin/src/assets/images/bg.webp b/apps/admin/src/assets/images/bg.webp
new file mode 100644
index 0000000..564022d
Binary files /dev/null and b/apps/admin/src/assets/images/bg.webp differ
diff --git a/apps/admin/src/views/Login.vue b/apps/admin/src/views/Login.vue
index 2fe4596..afe8d9d 100644
--- a/apps/admin/src/views/Login.vue
+++ b/apps/admin/src/views/Login.vue
@@ -7,7 +7,7 @@ import { useAuthStore, type StaffUser } from '../stores/auth';
 import RobotVerify from '../components/RobotVerify.vue';
 import AdminLocaleSwitcher from '../components/AdminLocaleSwitcher.vue';
 import { useAdminLocale } from '../composables/useAdminLocale';
-import bgImage from '../assets/images/bg.png';
+import bgImage from '../assets/images/bg.webp';
 
 const router = useRouter();
 const route = useRoute();
diff --git a/apps/player/src/assets/images/banner.png b/apps/player/src/assets/images/banner.png
deleted file mode 100644
index 6307bcf..0000000
Binary files a/apps/player/src/assets/images/banner.png and /dev/null differ
diff --git a/apps/player/src/assets/images/banner.webp b/apps/player/src/assets/images/banner.webp
new file mode 100644
index 0000000..fe19051
Binary files /dev/null and b/apps/player/src/assets/images/banner.webp differ
diff --git a/apps/player/src/assets/images/bg.png b/apps/player/src/assets/images/bg.png
deleted file mode 100644
index a7334b3..0000000
Binary files a/apps/player/src/assets/images/bg.png and /dev/null differ
diff --git a/apps/player/src/assets/images/bg.webp b/apps/player/src/assets/images/bg.webp
new file mode 100644
index 0000000..732ae1a
Binary files /dev/null and b/apps/player/src/assets/images/bg.webp differ
diff --git a/apps/player/src/assets/images/card-bg.png b/apps/player/src/assets/images/card-bg.png
deleted file mode 100644
index 6fcdb4d..0000000
Binary files a/apps/player/src/assets/images/card-bg.png and /dev/null differ
diff --git a/apps/player/src/assets/images/card-bg.webp b/apps/player/src/assets/images/card-bg.webp
new file mode 100644
index 0000000..1e5c359
Binary files /dev/null and b/apps/player/src/assets/images/card-bg.webp differ
diff --git a/apps/player/src/assets/images/football-bet-frame.png b/apps/player/src/assets/images/football-bet-frame.png
deleted file mode 100644
index 9b8e668..0000000
Binary files a/apps/player/src/assets/images/football-bet-frame.png and /dev/null differ
diff --git a/apps/player/src/assets/images/football-bet-frame.webp b/apps/player/src/assets/images/football-bet-frame.webp
new file mode 100644
index 0000000..f4b99c2
Binary files /dev/null and b/apps/player/src/assets/images/football-bet-frame.webp differ
diff --git a/apps/player/src/assets/images/h5bg.png b/apps/player/src/assets/images/h5bg.png
deleted file mode 100644
index 56f38df..0000000
Binary files a/apps/player/src/assets/images/h5bg.png and /dev/null differ
diff --git a/apps/player/src/assets/images/h5bg.webp b/apps/player/src/assets/images/h5bg.webp
new file mode 100644
index 0000000..1aa0a54
Binary files /dev/null and b/apps/player/src/assets/images/h5bg.webp differ
diff --git a/apps/player/src/assets/images/saishi.png b/apps/player/src/assets/images/saishi.png
deleted file mode 100644
index 6d88501..0000000
Binary files a/apps/player/src/assets/images/saishi.png and /dev/null differ
diff --git a/apps/player/src/assets/images/saishi.webp b/apps/player/src/assets/images/saishi.webp
new file mode 100644
index 0000000..2bd603a
Binary files /dev/null and b/apps/player/src/assets/images/saishi.webp differ
diff --git a/apps/player/src/assets/images/wallet-bg.png b/apps/player/src/assets/images/wallet-bg.png
deleted file mode 100644
index 5d199de..0000000
Binary files a/apps/player/src/assets/images/wallet-bg.png and /dev/null differ
diff --git a/apps/player/src/assets/images/wallet-bg.webp b/apps/player/src/assets/images/wallet-bg.webp
new file mode 100644
index 0000000..e3b9d8e
Binary files /dev/null and b/apps/player/src/assets/images/wallet-bg.webp differ
diff --git a/apps/player/src/components/BannerCarousel.vue b/apps/player/src/components/BannerCarousel.vue
index f24b93a..e0b6238 100644
--- a/apps/player/src/components/BannerCarousel.vue
+++ b/apps/player/src/components/BannerCarousel.vue
@@ -4,7 +4,7 @@ import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
-import defaultBannerImg from '../assets/images/banner.png';
+import defaultBannerImg from '../assets/images/banner.webp';
 
 export interface BannerItem {
   id?: string;
diff --git a/apps/player/src/components/LeagueAccordionItem.vue b/apps/player/src/components/LeagueAccordionItem.vue
index 4996890..482835c 100644
--- a/apps/player/src/components/LeagueAccordionItem.vue
+++ b/apps/player/src/components/LeagueAccordionItem.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import MatchBetCard from './MatchBetCard.vue';
-import saishiImg from '../assets/images/saishi.png';
-import cardBg from '../assets/images/card-bg.png';
+import saishiImg from '../assets/images/saishi.webp';
+import cardBg from '../assets/images/card-bg.webp';
 
 const matchCardBg = `url(${cardBg})`;
 
diff --git a/apps/player/src/components/outright/OutrightEventSection.vue b/apps/player/src/components/outright/OutrightEventSection.vue
index 83ae3d0..4cefdcc 100644
--- a/apps/player/src/components/outright/OutrightEventSection.vue
+++ b/apps/player/src/components/outright/OutrightEventSection.vue
@@ -2,8 +2,8 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import OutrightOptionCard from './OutrightOptionCard.vue';
-import saishiImg from '../../assets/images/saishi.png';
-import cardBg from '../../assets/images/card-bg.png';
+import saishiImg from '../../assets/images/saishi.webp';
+import cardBg from '../../assets/images/card-bg.webp';
 
 const matchCardBg = `url(${cardBg})`;
 
diff --git a/apps/player/src/components/parlay/ParlayPanel.vue b/apps/player/src/components/parlay/ParlayPanel.vue
index 0dd52d8..95381df 100644
--- a/apps/player/src/components/parlay/ParlayPanel.vue
+++ b/apps/player/src/components/parlay/ParlayPanel.vue
@@ -9,7 +9,7 @@ import { PARLAY_MARKET_TYPES, PARLAY_SELECTION_KEYS, PARLAY_MARKET_GROUPS } from
 import BetGuideHelp from '../BetGuideHelp.vue';
 import GoldSpinner from '../GoldSpinner.vue';
 import TeamEmblem from '../TeamEmblem.vue';
-import cardBg from '../../assets/images/card-bg.png';
+import cardBg from '../../assets/images/card-bg.webp';
 import { matchPhaseLabel, type MatchPhase } from '../../utils/matchPhase';
 
 const matchCardBg = `url(${cardBg})`;
diff --git a/apps/player/src/constants/defaultBanner.ts b/apps/player/src/constants/defaultBanner.ts
index 9d8e4a0..f2a22b5 100644
--- a/apps/player/src/constants/defaultBanner.ts
+++ b/apps/player/src/constants/defaultBanner.ts
@@ -1,7 +1,7 @@
 import type { BannerItem } from '../components/BannerCarousel.vue';
 
-/** 默认轮播首图：apps/player/src/assets/images/banner.png */
-import defaultBannerImg from '../assets/images/banner.png';
+/** 默认轮播首图：apps/player/src/assets/images/banner.webp */
+import defaultBannerImg from '../assets/images/banner.webp';
 
 const FALLBACK_BANNER_URL = '/uploads/banners/welcome.svg';
 
diff --git a/apps/player/src/styles.css b/apps/player/src/styles.css
index 050c4a5..09c75cb 100644
--- a/apps/player/src/styles.css
+++ b/apps/player/src/styles.css
@@ -197,7 +197,7 @@ body {
   background-image:
     radial-gradient(ellipse 120% 60% at 50% -10%, rgba(212, 175, 55, 0.14), transparent 55%),
     linear-gradient(rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.88)),
-    url('./assets/images/bg.png');
+    url('./assets/images/bg.webp');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
diff --git a/apps/player/src/views/HomeView.vue b/apps/player/src/views/HomeView.vue
index 23ad524..32224b4 100644
--- a/apps/player/src/views/HomeView.vue
+++ b/apps/player/src/views/HomeView.vue
@@ -3,7 +3,7 @@ import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import emptyMatchesImg from '../assets/images/empty-matches.svg';
 import vsImg from '../assets/images/vs.png';
-import cardBg from '../assets/images/card-bg.png';
+import cardBg from '../assets/images/card-bg.webp';
 import BannerCarousel from '../components/BannerCarousel.vue';
 import { usePlayerHome } from '../composables/usePlayerHome';
 import TeamEmblem from '../components/TeamEmblem.vue';
diff --git a/apps/player/src/views/LoginView.vue b/apps/player/src/views/LoginView.vue
index be1b52b..2c37335 100644
--- a/apps/player/src/views/LoginView.vue
+++ b/apps/player/src/views/LoginView.vue
@@ -8,7 +8,7 @@ import { useAppLocale } from '../composables/useAppLocale';
 import LocaleSwitcher from '../components/LocaleSwitcher.vue';
 import PhoneCountrySelect from '../components/PhoneCountrySelect.vue';
 import RobotVerify from '../components/RobotVerify.vue';
-import loginBg from '../assets/images/h5bg.png';
+import loginBg from '../assets/images/h5bg.webp';
 
 type LoginMode = 'account' | 'phone';
 
diff --git a/apps/player/src/views/ProfileView.vue b/apps/player/src/views/ProfileView.vue
index 6b308eb..e88d8c0 100644
--- a/apps/player/src/views/ProfileView.vue
+++ b/apps/player/src/views/ProfileView.vue
@@ -9,7 +9,7 @@ import { useAuthStore } from '../stores/auth';
 import { useAppLocale } from '../composables/useAppLocale';
 import GoldSpinner from '../components/GoldSpinner.vue';
 import { usePullToRefresh } from '../composables/usePullToRefresh';
-import walletBg from '../assets/images/wallet-bg.png';
+import walletBg from '../assets/images/wallet-bg.webp';
 
 const { t, locale } = useI18n();
 const router = useRouter();
diff --git a/apps/player/src/views/RegisterView.vue b/apps/player/src/views/RegisterView.vue
index 187bc40..51d8611 100644
--- a/apps/player/src/views/RegisterView.vue
+++ b/apps/player/src/views/RegisterView.vue
@@ -8,7 +8,7 @@ import { useAppLocale } from '../composables/useAppLocale';
 import { useSmsCode } from '../composables/useSmsCode';
 import LocaleSwitcher from '../components/LocaleSwitcher.vue';
 import PhoneCountrySelect from '../components/PhoneCountrySelect.vue';
-import loginBg from '../assets/images/h5bg.png';
+import loginBg from '../assets/images/h5bg.webp';
 
 const { t, locale } = useI18n();
 const { initFromUser } = useAppLocale();
diff --git a/apps/player/src/vite-env.d.ts b/apps/player/src/vite-env.d.ts
index f4c1b62..9ec9a54 100644
--- a/apps/player/src/vite-env.d.ts
+++ b/apps/player/src/vite-env.d.ts
@@ -21,3 +21,8 @@ declare module '*.png' {
   const src: string;
   export default src;
 }
+
+declare module '*.webp' {
+  const src: string;
+  export default src;
+}