diff --git a/components/blocks/HeroSection.tsx b/components/blocks/HeroSection.tsx
index d8061187d..9b407a41f 100644
--- a/components/blocks/HeroSection.tsx
+++ b/components/blocks/HeroSection.tsx
@@ -41,6 +41,7 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
               objectPosition: `${backgroundImage?.focalX ?? 50}% ${backgroundImage?.focalY ?? 50}%`,
             }}
             sizes="100vw"
+            quality={50}
             priority
           />
           {/* Cinematic Color Grading Overlay */}
diff --git a/next.config.mjs b/next.config.mjs
index 49cf03f39..999ead2dc 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -449,7 +449,7 @@ const nextConfig = {
   },
   images: {
     qualities: [25, 50, 75, 100],
-    formats: ['image/webp'],
+    formats: ['image/avif', 'image/webp'],
     deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
     remotePatterns: [
       {