Добавил оптимизацию загрузки картинок

This commit is contained in:
adlevin
2026-02-06 06:31:28 +03:00
parent 21361390d2
commit 56e4c1239b
7 changed files with 47 additions and 7 deletions

View File

@@ -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 {

BIN
assets/images/about.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
assets/images/hero-1.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
assets/images/hero-2.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
assets/images/hero-3.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

View File

@@ -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>

View File

@@ -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;
}