diff --git a/assets/css/main.css b/assets/css/main.css
index 9c3db3e..25c709f 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -438,12 +438,25 @@ a:hover {
     height: 100%;
     z-index: 1;
     flex-shrink: 0;
+    background-color: var(--primary-color);
+    overflow: hidden;
 }
 
 .hero-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    display: block;
+    animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 .hero-nav {
diff --git a/assets/images/about.webp b/assets/images/about.webp
new file mode 100644
index 0000000..ccb9812
Binary files /dev/null and b/assets/images/about.webp differ
diff --git a/assets/images/hero-1.webp b/assets/images/hero-1.webp
new file mode 100644
index 0000000..5e228d4
Binary files /dev/null and b/assets/images/hero-1.webp differ
diff --git a/assets/images/hero-2.webp b/assets/images/hero-2.webp
new file mode 100644
index 0000000..3032709
Binary files /dev/null and b/assets/images/hero-2.webp differ
diff --git a/assets/images/hero-3.webp b/assets/images/hero-3.webp
new file mode 100644
index 0000000..b46cc8a
Binary files /dev/null and b/assets/images/hero-3.webp differ
diff --git a/index.html b/index.html
index fc7c625..5e9374d 100644
--- a/index.html
+++ b/index.html
@@ -38,6 +38,11 @@
     <!-- CSS -->
     <link rel="stylesheet" href="assets/css/main.css?v=1.2">
     
+    <!-- Preload hero slider images -->
+    <link rel="preload" as="image" href="assets/images/hero-1.jpg">
+    <link rel="preload" as="image" href="assets/images/hero-2.jpg">
+    <link rel="preload" as="image" href="assets/images/hero-3.jpg">
+    
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -52,13 +57,13 @@
         <nav class="navbar">
             <div class="container">
                 <div class="navbar-brand">
-                    <img src="logo.svg" alt="ФИДЕМ" class="logo">
+                    <img src="logo.svg" alt="ФИДЕМ" class="logo" loading="eager">
                     <div class="brand-info">
                         <span class="brand-text">ФИДЕМ</span>
                         <span class="brand-subtitle">медицинский центр</span>
                         <div class="partner-info">
                             <span class="partner-text">Официальный партнер</span>
-                            <img src="assets/images/helix-logo.svg" alt="Helix" class="partner-logo">
+                            <img src="assets/images/helix-logo.svg" alt="Helix" class="partner-logo" loading="eager">
                             <span class="partner-brand">HELIX</span>
                         </div>
                     </div>
@@ -121,7 +126,10 @@
                         </div>
                     </div>
                     <div class="hero-image">
-                        <img src="assets/images/hero-1.jpg" alt="Медицинский центр ФИДЕМ">
+                        <picture>
+                            <source srcset="assets/images/hero-1.webp" type="image/webp">
+                            <img src="assets/images/hero-1.jpg" alt="Медицинский центр ФИДЕМ" loading="eager">
+                        </picture>
                     </div>
                 </div>
                 
@@ -139,7 +147,7 @@
                         </div>
                     </div>
                     <div class="hero-image">
-                        <img src="assets/images/hero-2.jpg" alt="Лабораторная диагностика">
+                        <img src="assets/images/hero-2.jpg" alt="Лабораторная диагностика" loading="eager">
                     </div>
                 </div>
                 
@@ -157,7 +165,7 @@
                         </div>
                     </div>
                     <div class="hero-image">
-                        <img src="assets/images/hero-3.jpg" alt="УЗИ диагностика">
+                        <img src="assets/images/hero-3.jpg" alt="УЗИ диагностика" loading="eager">
                     </div>
                 </div>
             </div>
@@ -326,7 +334,10 @@
                     </div>
                     
                     <div class="about-image">
-                        <img src="assets/images/about.jpg" alt="О медицинском центре ФИДЕМ">
+                        <picture>
+                            <source srcset="assets/images/about.webp" type="image/webp">
+                            <img src="assets/images/about.jpg" alt="О медицинском центре ФИДЕМ" loading="lazy">
+                        </picture>
                     </div>
                 </div>
             </div>
diff --git a/nginx_fidem.conf b/nginx_fidem.conf
index 852290a..9a5a14a 100644
--- a/nginx_fidem.conf
+++ b/nginx_fidem.conf
@@ -21,7 +21,23 @@ server {
         add_header Cache-Control "public, immutable";
     }
     
+    # Image optimization
+    location ~* \.(jpg|jpeg|png|gif|svg|webp)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+        add_header Vary "Accept-Encoding";
+    }
+    
+    # WebP support with proper Content-Type
+    location ~* \.webp$ {
+        add_header Content-Type "image/webp";
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+    
     # Gzip compression
     gzip on;
-    gzip_types text/css application/javascript image/svg+xml;
+    gzip_types text/css application/javascript image/svg+xml application/json text/plain;
+    gzip_min_length 1000;
+    gzip_vary on;
 }