.

env.d.ts

@@ -17,3 +17,13 @@ declare module '*.png' {
   const src: string
   export default src
 }
+
+declare module '*.jpg' {
+  const src: string
+  export default src
+}
+
+declare module '*.webp' {
+  const src: string
+  export default src
+}

src/assets/illustrations/index.ts

@@ -1,36 +1,36 @@
 import heroExplorer from './hero-explorer.svg'
-import treasureChest from './treasure-chest.png'
-import professor from './professor.png'
-import bankBuilding from './bank-building.png'
-import phoneIcon from './phone-icon.png'
+import treasureChest from './treasure-chest.webp'
+import professor from './professor.webp'
+import bankBuilding from './bank-building.webp'
+import phoneIcon from './phone-icon.webp'
 import shoppingCart from './shopping-cart.svg'
-import mapScene from './map-scene.png'
-import mapNodeOrb from './map-node-orb.png'
+import mapScene from './map-scene.webp'
+import mapNodeOrb from './map-node-orb.webp'
 import goldBar from './gold-bar.svg'
-import goldBarsStack from './gold-bars-stack.png'
-import coinLarge from './coin-large.png'
-import coinsStack from './coins-stack.png'
-import cashBundle from './cash-bundle.png'
-import homeHeroBg from './home-hero-bg.jpg'
-import marketHero from './market-hero.jpg'
-import walletHero from './wallet-hero.jpg'
-import gamepadIcon from './gamepad-icon.png'
-import targetIcon from './target-icon.png'
-import cartIcon from './cart-icon.png'
-import friendsIcon from './friends-icon.png'
-import challengeBanner from './challenge-banner.png'
+import goldBarsStack from './gold-bars-stack.webp'
+import coinLarge from './coin-large.webp'
+import coinsStack from './coins-stack.webp'
+import cashBundle from './cash-bundle.webp'
+import homeHeroBg from './home-hero-bg.webp'
+import marketHero from './market-hero.webp'
+import walletHero from './wallet-hero.webp'
+import gamepadIcon from './gamepad-icon.webp'
+import targetIcon from './target-icon.webp'
+import cartIcon from './cart-icon.webp'
+import friendsIcon from './friends-icon.webp'
+import challengeBanner from './challenge-banner.webp'
 import nextMissionBanner from './next-mission-banner.webp'
-import gameGoldChart from './game-gold-chart.png'
-import gameInflation from './game-inflation.png'
-import gamePortfolio from './game-portfolio.png'
-import gameShopping from './game-shopping.png'
-import gamePiggy from './game-piggy.png'
-import gameInvestor from './game-investor.png'
-import productCastle from './product-castle.png'
-import productCrown from './product-crown.png'
-import productSuit from './product-suit.png'
-import productPet from './product-pet.png'
-import productSea from './product-sea.png'
+import gameGoldChart from './game-gold-chart.webp'
+import gameInflation from './game-inflation.webp'
+import gamePortfolio from './game-portfolio.webp'
+import gameShopping from './game-shopping.webp'
+import gamePiggy from './game-piggy.webp'
+import gameInvestor from './game-investor.webp'
+import productCastle from './product-castle.webp'
+import productCrown from './product-crown.webp'
+import productSuit from './product-suit.webp'
+import productPet from './product-pet.webp'
+import productSea from './product-sea.webp'
 import schoolBackpack from './school-backpack.svg'
 
 export const illustrations = {

src/assets/profile/index.ts

@@ -1,6 +1,6 @@
-import avatar from './avatar.png'
-import shieldBadge from './shield-badge.png'
-import schoolBanner from './school-banner.png'
+import avatar from './avatar.webp'
+import shieldBadge from './shield-badge.webp'
+import schoolBanner from './school-banner.webp'
 
 export const profileAssets = {
   avatar,

src/components/common/BottomNavigation.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { Home, TrendingUp, Wallet, User } from 'lucide-vue-next'
-import castleGoldLand from '@/assets/icons/castle-gold-land.png'
+import castleGoldLand from '@/assets/icons/castle-gold-land.webp'
 
 const route = useRoute()
 const router = useRouter()

src/pages/LoginPage.vue

@@ -5,7 +5,7 @@ import { StaleSessionError } from '@/api/client'
 import { useAuthStore } from '@/stores/auth'
 import { useMarketStore } from '@/stores/market'
 import { useToast } from '@/composables/useToast'
-import loginHero from '@/assets/login/login-hero.jpg'
+import loginHero from '@/assets/login/login-hero.webp'
 
 const router = useRouter()
 const authStore = useAuthStore()