diff --git a/apps/web/app/components/AccessPageSection.vue b/apps/web/app/components/AccessPageSection.vue
index 60c0d17b..b0ae3357 100644
--- a/apps/web/app/components/AccessPageSection.vue
+++ b/apps/web/app/components/AccessPageSection.vue
@@ -63,8 +63,8 @@ const { color } = useColor()
       </div>
 
       <figure class="place_image">
-        <img src="/access/fig_access01.jpg" alt="" />
-        <img src="/access/fig_access02.jpg" alt="" />
+        <img src="/access/fig_access01.jpg" alt="" loading="lazy" />
+        <img src="/access/fig_access02.jpg" alt="" loading="lazy" />
       </figure>
 
     </div>
diff --git a/apps/web/app/components/CooperationPartnerSection.vue b/apps/web/app/components/CooperationPartnerSection.vue
index 677588af..df4c81d5 100644
--- a/apps/web/app/components/CooperationPartnerSection.vue
+++ b/apps/web/app/components/CooperationPartnerSection.vue
@@ -10,9 +10,9 @@
           <source srcset="/logo/logo_vueconf-de.png" media="(min-width: 768px)" />
           <img
             src="/logo/logo_vueconf-de_sp.png"
-            loading="lazy"
             alt="vuejs.de"
             class="partner-image"
+            loading="lazy"
           />
         </picture>
       </NuxtLink>
diff --git a/apps/web/app/components/TeamPageSection.vue b/apps/web/app/components/TeamPageSection.vue
index 20cc4771..17739bff 100644
--- a/apps/web/app/components/TeamPageSection.vue
+++ b/apps/web/app/components/TeamPageSection.vue
@@ -11,10 +11,12 @@ const props = defineProps<{
 
 const config = useRuntimeConfig()
 
-const coreTeam = config.public.staffDatasource === 'supabase' ? props.data.coreStaffs.list : teamData
-const volunteerTeam = config.public.staffDatasource === 'supabase'
-  ? props.data.volunteerStaffs.list.map((staff) => staff.name)
-  : volunteers
+const coreTeam =
+  config.public.staffDatasource === 'supabase' ? props.data.coreStaffs.list : teamData
+const volunteerTeam =
+  config.public.staffDatasource === 'supabase'
+    ? props.data.volunteerStaffs.list.map((staff) => staff.name)
+    : volunteers
 // const team = teamData
 </script>
 
@@ -32,8 +34,13 @@ const volunteerTeam = config.public.staffDatasource === 'supabase'
       <div class="team-members-container">
         <div v-for="member in coreTeam" :key="member.name" class="team-member-wrapper">
           <template v-if="member.x_id !== ''">
-            <a :href="`https://x.com/${member.x_id}`" target="_blank" :aria-label="member.name">
-              <VFAvatar :src="member.image_url" :alt="member.name" />
+            <a
+              :href="`https://x.com/${member.x_id}`"
+              target="_blank"
+              :aria-label="member.name"
+              class="team-member-link"
+            >
+              <VFAvatar :src="member.image_url" :alt="member.name" size="medium" />
             </a>
             <div class="team-member-info">
               <VFTextLink
@@ -47,7 +54,7 @@ const volunteerTeam = config.public.staffDatasource === 'supabase'
             </div>
           </template>
           <template v-else>
-            <VFAvatar :src="member.image_url" :alt="member.name" />
+            <VFAvatar :src="member.image_url" :alt="member.name" size="medium" />
             <div class="team-member-info">
               <span class="team-member-name">{{ member.name }} </span>
             </div>
@@ -153,6 +160,10 @@ const volunteerTeam = config.public.staffDatasource === 'supabase'
   gap: 8px;
 }
 
+.team-member-link {
+  width: 100%;
+}
+
 .team-member-name {
   --team-member-name-font-size: 0.875rem;
 
diff --git a/apps/web/app/components/TopPageSection.vue b/apps/web/app/components/TopPageSection.vue
index 7cb38764..b29b97e0 100644
--- a/apps/web/app/components/TopPageSection.vue
+++ b/apps/web/app/components/TopPageSection.vue
@@ -21,7 +21,8 @@ const getAnchorPath = computed(
         <p class="place">
           Otemachi PLACE HALL &amp; CONFERENCE
           <br /><time datetime="2024-10-19T00:00+09:00"
-            >{{ $t('top_page.date') }}<template v-if="locale === 'ja'"><span class="day-of-week">SAT</span></template></time
+            >{{ $t('top_page.date')
+            }}<template v-if="locale === 'ja'"><span class="day-of-week">SAT</span></template></time
           >
         </p>
       </div>
@@ -80,11 +81,12 @@ const getAnchorPath = computed(
   z-index: -1;
   width: 100%;
 }
+
 .image-wrapper {
   position: relative;
   width: 100%;
   height: var(--background-image-height);
-  background-image: url('/main-visual.png');
+  background-image: url('/main-visual.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: top;
@@ -149,8 +151,8 @@ const getAnchorPath = computed(
   }
   .image-wrapper {
     background-size: auto 100%;
+    background-image: url('/main-visual-mobile.jpg');
   }
-
   .section-title {
     font-size: var(--font-size-heading500);
     font-weight: 700;
diff --git a/apps/web/app/components/event/EventAsset.vue b/apps/web/app/components/event/EventAsset.vue
index 58aabd97..58fc6223 100644
--- a/apps/web/app/components/event/EventAsset.vue
+++ b/apps/web/app/components/event/EventAsset.vue
@@ -2,7 +2,10 @@
 import type { Event } from '@vuejs-jp/model'
 
 interface EventAssetProps {
-  title: Extract<Event, 'creative-wall' | 'free-drinks-and-snacks' | 'tattoo-space' | 'cocktail-bash'>
+  title: Extract<
+    Event,
+    'creative-wall' | 'free-drinks-and-snacks' | 'tattoo-space' | 'cocktail-bash'
+  >
   marginTop?: number
 }
 
@@ -10,7 +13,13 @@ const props = defineProps<EventAssetProps>()
 </script>
 
 <template>
-  <img :src="`/event/${title}.png`" alt="" class="eventcard-image" :style="{ marginTop: `${marginTop}px` }" />
+  <NuxtImg
+    :src="`/event/${title}.png`"
+    alt=""
+    class="eventcard-image"
+    :style="{ marginTop: `${marginTop}px` }"
+    loading="lazy"
+  />
 </template>
 
 <style scoped>
diff --git a/apps/web/app/components/event/EventCard.vue b/apps/web/app/components/event/EventCard.vue
index 46cc924b..e421999c 100644
--- a/apps/web/app/components/event/EventCard.vue
+++ b/apps/web/app/components/event/EventCard.vue
@@ -17,6 +17,7 @@ const props = defineProps<EventCardProps>()
     :title="$t(`event.${title.replaceAll('-', '_')}`)"
     :font-class
     :padding-class
+    class="frame"
   >
     <template #content>
       <div class="eventcard-content">
@@ -34,6 +35,13 @@ const props = defineProps<EventCardProps>()
 <style scoped>
 @import url('~/assets/media.css');
 
+.frame {
+  display: flex;
+  flex-direction: column;
+  align-items: space-between;
+  justify-content: space-between;
+}
+
 .eventcard-content {
   font-size: 16px;
   font-weight: 500;
diff --git a/apps/web/app/components/event/EventMultipleAssets.vue b/apps/web/app/components/event/EventMultipleAssets.vue
index eee77d84..208230ea 100644
--- a/apps/web/app/components/event/EventMultipleAssets.vue
+++ b/apps/web/app/components/event/EventMultipleAssets.vue
@@ -16,7 +16,17 @@ const props = defineProps<EventMultipleAssetsProps>()
       '--head-img-height': `${imgHeight}px`,
     }"
   >
-    <img v-for="(title, key) in titleList" :key :src="`/event/${title}-${key + 1}.png`" alt="" />
+    <NuxtImg
+      v-for="(title, key) in titleList"
+      :key
+      :src="`/event/${title}-${key + 1}.png`"
+      alt=""
+      width="792"
+      height="512"
+      fit="cover"
+      loading="lazy"
+      class="image"
+    />
   </div>
 </template>
 
@@ -34,9 +44,10 @@ const props = defineProps<EventMultipleAssetsProps>()
   }
 }
 
-.eventcard-images ::v-deep(img) {
+.image {
+  height: var(--head-img-height);
+  width: auto;
   padding: 0;
   margin: 0 auto;
-  height: var(--head-img-height);
 }
 </style>
diff --git a/apps/web/app/components/sponsor/SponsorList.vue b/apps/web/app/components/sponsor/SponsorList.vue
index d0b2efca..ba4e6c38 100644
--- a/apps/web/app/components/sponsor/SponsorList.vue
+++ b/apps/web/app/components/sponsor/SponsorList.vue
@@ -22,7 +22,12 @@ const currentLocale = useLocaleCurrent().locale
           class="sponsor-list-item-link"
           :to="`${currentLocale === 'ja' ? '/' : `/${currentLocale}/`}sponsors/${item['detail_page_id']}`"
         >
-          <img class="sponsor-list-item-image" :src="item['image_url']" :alt="item.name" />
+          <NuxtImg
+            class="sponsor-list-item-image"
+            :src="item['image_url']"
+            :alt="item.name"
+            loading="lazy"
+          />
         </NuxtLink>
       </li>
     </ul>
diff --git a/apps/web/app/components/ticket/NamecardSection.vue b/apps/web/app/components/ticket/NamecardSection.vue
index 4080c2a8..dc047a35 100644
--- a/apps/web/app/components/ticket/NamecardSection.vue
+++ b/apps/web/app/components/ticket/NamecardSection.vue
@@ -24,7 +24,12 @@ const { locale: currentLocale } = useLocaleCurrent()
     </div>
 
     <div class="content-wrapper">
-      <img :src="'/namecard/namecard-samples.png'" alt="test" />
+      <NuxtImg
+        :src="'/namecard/namecard-samples.png'"
+        alt="test"
+        width="596"
+        loading="lazy"
+      />
       <div class="buttons-wrapper">
         <VFLinkButton
           class="action-button"
diff --git a/apps/web/app/components/ticket/PersonalSponsorSection.vue b/apps/web/app/components/ticket/PersonalSponsorSection.vue
index be0d3057..d9ffc1fe 100644
--- a/apps/web/app/components/ticket/PersonalSponsorSection.vue
+++ b/apps/web/app/components/ticket/PersonalSponsorSection.vue
@@ -14,9 +14,9 @@ import { ticketUrl } from '~/utils/constants'
         :key="i"
         :title="$t(`personal_sponsor.merit${i}.title`)"
         :detail="$t(`personal_sponsor.merit${i}.detail`)"
-        :caution="(i === 2 || i === 4) ? $t(`personal_sponsor.merit${i}.caution`) : ''"
+        :caution="i === 2 || i === 4 ? $t(`personal_sponsor.merit${i}.caution`) : ''"
       >
-        <img alt="" :src="`/sponsor/merit-${i}.jpg`" />
+        <NuxtImg alt="" :src="`/sponsor/merit-${i}.jpg`" loading="lazy" class="image" />
       </VFMeritCard>
     </div>
     <div class="personal-sponsor-text">
@@ -89,6 +89,12 @@ import { ticketUrl } from '~/utils/constants'
   color: var(--color-white);
 }
 
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .apply {
   display: flex;
   flex-direction: column;
@@ -109,7 +115,8 @@ import { ticketUrl } from '~/utils/constants'
 
 @media (--tablet) {
   .personal-sponsor-body {
-    --personal-sponsor-body-padding: calc(var(--unit) * 4) calc(var(--unit) * 2) calc(var(--unit) * 4);
+    --personal-sponsor-body-padding: calc(var(--unit) * 4) calc(var(--unit) * 2)
+      calc(var(--unit) * 4);
   }
 
   .personal-sponsor-body h3 {
diff --git a/apps/web/app/pages/sessions/[id]/index.vue b/apps/web/app/pages/sessions/[id]/index.vue
index 71b6fc7a..d6533513 100644
--- a/apps/web/app/pages/sessions/[id]/index.vue
+++ b/apps/web/app/pages/sessions/[id]/index.vue
@@ -73,6 +73,7 @@ useHead({
           :name="currentLocale === 'en' ? speakerData[0].name_en : speakerData[0].name_ja"
           :github-id="speakerData[0].github_id"
           :x-id="speakerData[0].x_id"
+          loading="eager"
         />
         <div class="person-info">
           {{ currentLocale === 'ja' ? speakerData[0].description_ja : speakerData[0].description_en }}
diff --git a/apps/web/app/public/event/creative-wall.png b/apps/web/app/public/event/creative-wall.png
index 60b3b4c1..bf56b41d 100644
Binary files a/apps/web/app/public/event/creative-wall.png and b/apps/web/app/public/event/creative-wall.png differ
diff --git a/apps/web/app/public/event/tattoo-space.png b/apps/web/app/public/event/tattoo-space.png
index 16b30968..a4278128 100644
Binary files a/apps/web/app/public/event/tattoo-space.png and b/apps/web/app/public/event/tattoo-space.png differ
diff --git a/apps/web/app/public/main-visual-mobile.jpg b/apps/web/app/public/main-visual-mobile.jpg
new file mode 100644
index 00000000..1f040581
Binary files /dev/null and b/apps/web/app/public/main-visual-mobile.jpg differ
diff --git a/apps/web/app/public/main-visual.jpg b/apps/web/app/public/main-visual.jpg
new file mode 100644
index 00000000..4ccd6155
Binary files /dev/null and b/apps/web/app/public/main-visual.jpg differ
diff --git a/apps/web/app/public/main-visual.png b/apps/web/app/public/main-visual.png
deleted file mode 100644
index f53ae289..00000000
Binary files a/apps/web/app/public/main-visual.png and /dev/null differ
diff --git a/apps/web/nuxt.config.ts b/apps/web/nuxt.config.ts
index e1eecc8d..d6b1f395 100644
--- a/apps/web/nuxt.config.ts
+++ b/apps/web/nuxt.config.ts
@@ -27,26 +27,23 @@ export default defineNuxtConfig({
       },
     },
   },
-  modules: [
-    '@vuejs-jp/vuefes-ui',
-    [
-      '@nuxtjs/device',
-      {
-        device: {
-          refreshOnResize: true,
-        },
+  modules: ['@vuejs-jp/vuefes-ui', [
+    '@nuxtjs/device',
+    {
+      device: {
+        refreshOnResize: true,
       },
-    ],
-    '@nuxtjs/i18n',
-    '@nuxtjs/supabase',
-    '@nuxt/content',
-    '@pinia/nuxt',
-    'nuxt-gtag',
-  ],
+    },
+  ], '@nuxtjs/i18n', '@nuxtjs/supabase', '@nuxt/content', '@pinia/nuxt', 'nuxt-gtag', '@nuxt/image'],
   // .env の NUXT_PUBLIC_SITE_URL を設定したので、一旦コメントアウトする
   // site: {
   //   url: 'https://vuefes.jp/2024/',
   // },
+  image: {
+    domains: ['jjdlwtezpdclgxxagxpj.supabase.co'],
+    quality: 80,
+    format: ['avif', 'webp']
+  },
   i18n: {
     legacy: false,
     strategy: 'prefix_except_default',
diff --git a/apps/web/package.json b/apps/web/package.json
index 3659fe4b..f505f9fe 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -27,6 +27,7 @@
     "@nuxt/content": "2.12.1",
     "@nuxt/types": "^2.17.3",
     "@nuxtjs/device": "3.1.1",
+    "@nuxt/image": "1.8.0",
     "@nuxtjs/i18n": "8.2.0",
     "@nuxtjs/supabase": "1.2.0",
     "@pinia/nuxt": "0.5.3",
diff --git a/bun.lockb b/bun.lockb
index e6da902e..2c6cad66 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/packages/ui/components/speaker/Avatar.vue b/packages/ui/components/speaker/Avatar.vue
index bed79233..578ebdfb 100644
--- a/packages/ui/components/speaker/Avatar.vue
+++ b/packages/ui/components/speaker/Avatar.vue
@@ -1,19 +1,39 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 type AvatarProps = {
   src: string
   alt: string
+  loading?: 'lazy' | 'eager'
+  size?: 'large' | 'medium' | 'small'
 }
+const props = withDefaults(defineProps<AvatarProps>(), {
+  loading: 'lazy',
+  size: 'large',
+})
 
-defineProps<AvatarProps>()
+const size = computed(() => {
+  const size = props.size || 'large'
+  return size === 'large' ? 600 : size === 'medium' ? 344 : 206
+})
 </script>
 
 <template>
-  <img :src="src" :alt="alt" />
+  <NuxtImg
+    :src="src"
+    :alt="alt"
+    :loading="loading"
+    placeholder
+    :width="size"
+    :height="size"
+    fit="cover"
+  />
 </template>
 
 <style scoped>
 img {
   width: 100%;
+  height: 100%;
   aspect-ratio: 1 / 1;
   object-fit: cover;
   border-radius: 12px;
diff --git a/packages/ui/components/speaker/Speaker.vue b/packages/ui/components/speaker/Speaker.vue
index d24d751f..d3adad58 100644
--- a/packages/ui/components/speaker/Speaker.vue
+++ b/packages/ui/components/speaker/Speaker.vue
@@ -11,16 +11,24 @@ type SpeakerProps = {
   githubId?: string
   xId?: string
   rowPosition?: boolean
+  loading?: 'lazy' | 'eager'
 }
 
-defineProps<SpeakerProps>()
+withDefaults(defineProps<SpeakerProps>(), {
+  company: '',
+  division: '',
+  githubId: '',
+  xId: '',
+  rowPosition: false,
+  loading: 'lazy',
+})
 
 const { color } = useColor()
 </script>
 
 <template>
   <div class="speaker-wrapper" :style="rowPosition ? '' : 'flex-direction: column;'">
-    <Avatar :src="image" :alt="name" />
+    <Avatar :src="image" :alt="name" :loading="loading" :size="rowPosition ? 'small' : 'large'" />
     <div class="speaker-info">
       <div class="speaker-affiliation">
         <p
diff --git a/packages/ui/components/sponsor/MeritCard.vue b/packages/ui/components/sponsor/MeritCard.vue
index f8f34de7..7f171902 100644
--- a/packages/ui/components/sponsor/MeritCard.vue
+++ b/packages/ui/components/sponsor/MeritCard.vue
@@ -11,9 +11,7 @@ const props = defineProps<MeritProps>()
 <template>
   <div class="merit">
     <div class="merit-card">
-      <div class="image">
-        <slot />
-      </div>
+      <slot />
     </div>
     <div class="merit-item">
       <h4 class="merit-title">{{ title }}</h4>
@@ -31,17 +29,9 @@ const props = defineProps<MeritProps>()
 }
 
 .merit-card {
-  position: relative;
-  display: grid;
-  place-items: center;
-  padding-bottom: calc(var(--unit) * 1);
   width: 224px;
   height: 126px;
-  background: var(--color-white);
-}
-
-.image {
-  text-align: center;
+  object-fit: cover;
 }
 
 .merit-item {
@@ -78,15 +68,9 @@ const props = defineProps<MeritProps>()
   }
 
   .merit-card {
-    width: 343px;
-    height: 228px;
-  }
-
-  .image {
-    margin: 0 auto;
-    width: 343px;
-    display: flex;
-    justify-content: center;
+    width: 100%;
+    height: auto;
+    max-width: 232px;
   }
 
   .merit-item ::v-deep(h4) {
diff --git a/packages/ui/components/store/Product.vue b/packages/ui/components/store/Product.vue
index 303aa526..6c02d984 100644
--- a/packages/ui/components/store/Product.vue
+++ b/packages/ui/components/store/Product.vue
@@ -9,13 +9,7 @@ const props = defineProps<StoreItemProps>()
 <template>
   <div class="store-item">
     <a :href="url" target="_blank">
-      <img
-        width="308"
-        height="308"
-        :alt
-        :src
-        decoding="async"
-      />
+      <NuxtImg :alt :src width="616" height="616" fit="cover" loading="lazy" class="image" />
     </a>
     <div class="name">{{ name }}</div>
     <div class="price">{{ price }}</div>
@@ -38,7 +32,7 @@ const props = defineProps<StoreItemProps>()
 }
 
 .store-item img {
-  border: 1px solid #DCE1E5;
+  border: 1px solid #dce1e5;
   border-radius: 8px;
 }
 
@@ -49,6 +43,11 @@ const props = defineProps<StoreItemProps>()
   line-height: 1;
 }
 
+.image {
+  width: 100%;
+  height: 100%;
+}
+
 .explain {
   margin-top: 8px;
   white-space: pre-wrap;
@@ -60,7 +59,7 @@ const props = defineProps<StoreItemProps>()
 
   &::v-deep(a:hover) {
     opacity: 0.4;
-    transition: .2s;
+    transition: 0.2s;
   }
 
   &::v-deep(p) {
diff --git a/packages/ui/components/ticket/TicketCard.vue b/packages/ui/components/ticket/TicketCard.vue
index 2e7ddedb..e090d4cf 100644
--- a/packages/ui/components/ticket/TicketCard.vue
+++ b/packages/ui/components/ticket/TicketCard.vue
@@ -12,10 +12,20 @@ const props = withDefaults(defineProps<TicketCardProps>(), {
 
 <template>
   <div class="ticket-card">
-    <img class="ticket-img" :src="props.imgSrc" :alt="props.imgAlt" />
+    <NuxtImg
+      class="ticket-img"
+      :src="props.imgSrc"
+      :alt="props.imgAlt"
+      width="928"
+      height="520"
+      fit="cover"
+      preload
+    />
     <div class="ticket-title">
       <template v-if="!isClose">{{ props.title }}</template>
-      <template v-else><s>{{ props.title }}</s></template>
+      <template v-else
+        ><s>{{ props.title }}</s></template
+      >
     </div>
     <div class="ticket-content">
       <slot />