Back to Blog
Tutorials

Как сжать изображения для сайта: полное руководство 2025

Освойте оптимизацию изображений для сайта ради быстрой загрузки и лучшего SEO. Узнайте о приёмах сжатия, оптимизации Core Web Vitals, адаптивных изображениях и современных форматах (WebP, AVIF).

AuthorTinyImagePro Team
Published7 нояб. 2025 г.
Read Time18 min read

На изображения обычно приходится 50–70% общего веса страницы, поэтому их оптимизация — один из самых результативных способов ускорить сайт. Правильно сжатые и оптимизированные изображения дают более быструю загрузку, лучшие позиции в SEO, удобство для пользователей и снижение затрат на хостинг. Это подробное руководство расскажет всё, что нужно знать о сжатии и оптимизации изображений для сайтов в 2025 году.

Почему оптимизация изображений на сайте так важна

Скорость загрузки и удобство пользователей

Влияние:

  • 53% мобильных пользователей уходят с сайтов, которые грузятся дольше 3 секунд
  • Каждая секунда задержки снижает конверсию на 7%
  • На быстрых сайтах средняя сессия длиннее на 70%

Что даёт оптимизация изображений:

  • Уменьшение веса страницы на 40–80%
  • Ускорение загрузки в 2–5 раз
  • Лучший опыт на мобильных
  • Меньше отказов

SEO и позиции в Google

Точка зрения Google:

  • Скорость страницы — прямой фактор ранжирования (с 2010 для десктопа, с 2018 для мобильных)
  • Core Web Vitals стали сигналами ранжирования в 2021 году
  • Быстрые сайты чаще обходятся поисковым роботом
  • Лучшие пользовательские метрики (отказы, время на сайте) поднимают позиции

Что даёт SEO-оптимизация изображений:

  • Более высокие позиции в поиске
  • Лучшая видимость в поиске по картинкам
  • Больше органического трафика
  • Лучшие результаты в мобильном поиске

Влияние на Core Web Vitals

Метрика Что измеряет Влияние изображений Хороший порог
LCP (Largest Contentful Paint) Скорость загрузки Hero-изображения напрямую влияют на LCP < 2,5 секунды
FID (First Input Delay) Интерактивность Тяжёлые изображения блокируют основной поток < 100 мс
CLS (Cumulative Layout Shift) Визуальная стабильность Изображения без размеров вызывают сдвиги < 0,1
INP (Interaction to Next Paint) Отзывчивость Тяжёлые изображения задерживают взаимодействие < 200 мс

Важно: оптимизированные изображения критичны для прохождения Core Web Vitals, которые напрямую влияют на позиции в поиске.

Экономия затрат

Расходы на трафик:

  • Неоптимизированный сайт: 5 МБ средняя страница × 100 000 посетителей = 500 ГБ/мес
  • Оптимизированный сайт: 1 МБ средняя страница × 100 000 посетителей = 100 ГБ/мес
  • Экономия: 400 ГБ/мес = 40–200 $/мес (в зависимости от хостинга)

Расходы на CDN:

  • CloudFlare: 0,01–0,05 $ за ГБ
  • Amazon CloudFront: 0,085 $ за ГБ
  • Экономия 400 ГБ = 4–34 $/мес

Оптимальные характеристики изображений для сайтов

Размеры изображений по разделам сайта

Раздел сайта Рекомендуемые размеры Целевой размер файла Качество Формат
Hero/баннер 1920×1080 – 2560×1440 px 150–400 КБ 80–85% JPEG/WebP
Обложка статьи 1200×630 px (16:9) 100–200 КБ 75–85% JPEG/WebP
Картинки в статье 800×600 – 1200×900 px 80–150 КБ 75–80% JPEG/WebP
Фото товаров 1000×1000 – 2000×2000 px 100–300 КБ 85–90% JPEG/WebP
Миниатюры 300×300 – 600×600 px 20–60 КБ 70–80% JPEG/WebP
Галерея 1200×800 px 100–200 КБ 80–85% JPEG/WebP
Фоновые изображения 1920×1080 px 150–300 КБ 75–80% JPEG/WebP
Логотипы (с прозрачностью) 200×100 – 400×200 px 10–50 КБ 100% PNG/SVG
Иконки 32×32 – 128×128 px 2–10 КБ 100% PNG/SVG
Open Graph / соцсети 1200×630 px 100–200 КБ 80% JPEG/PNG
Фавикон 32×32, 192×192, 512×512 px 2–15 КБ 100% PNG/ICO

Целевые размеры по типам страниц

Тип страницы Целевой вес страницы Бюджет на изображения Число изображений
Главная 1–2 МБ 500 КБ – 1 МБ 5–15 изображений
Статья блога 800 КБ – 1,5 МБ 400–800 КБ 3–8 изображений
Страница товара 1–2,5 МБ 600 КБ – 1,5 МБ 5–20 изображений
Категория/архив 1–2 МБ 600 КБ – 1 МБ 10–30 миниатюр
Лендинг 800 КБ – 1,5 МБ 400–800 КБ 3–10 изображений

Как сжать изображения для сайта: пошагово

Шаг 1. Выберите правильный формат

Дерево решений по формату:

Is it a photograph or complex image?
├─ YES → Use JPEG (or WebP for modern browsers)
└─ NO → Is transparency required?
    ├─ YES → Use PNG (or WebP with alpha)
    └─ NO → Is it a simple graphic/logo?
        ├─ YES → Use SVG (scalable, tiny file size)
        └─ NO → Use PNG-8 or JPEG

Рекомендации по форматам:

JPEG:

  • Лучше всего для: фотографий, сложных изображений, градиентов
  • Сжатие: с потерями (регулируемое качество)
  • Размер файла: маленький
  • Прозрачность: нет
  • Сценарий: 80% изображений на сайте

PNG:

  • Лучше всего для: скриншотов, графики, логотипов, изображений с текстом
  • Сжатие: без потерь
  • Размер файла: большой
  • Прозрачность: да
  • Сценарий: графика, где нужна попиксельная точность

WebP:

  • Лучше всего для: всех типов изображений (фото и графика)
  • Сжатие: варианты с потерями и без
  • Размер файла: на 25–35% меньше, чем JPEG/PNG
  • Прозрачность: да
  • Сценарий: современные сайты с запасными вариантами
  • Поддержка браузерами: 95%+ (все современные браузеры)

AVIF:

  • Лучше всего для: передовой оптимизации
  • Сжатие: с потерями и без
  • Размер файла: на 50% меньше, чем JPEG
  • Прозрачность: да
  • Сценарий: прогрессивное улучшение
  • Поддержка браузерами: 85%+ (растёт)

SVG:

  • Лучше всего для: логотипов, иконок, простой графики
  • Сжатие: векторное (бесконечно масштабируется)
  • Размер файла: крошечный (обычно 1–10 КБ)
  • Прозрачность: да
  • Сценарий: любая масштабируемая графика

Шаг 2. Уменьшите изображения до размеров отображения

Почему сначала уменьшение размера:

  • Отдавать изображение 4000×3000 px, которое показывается как 800×600 px, — это потеря 93% трафика
  • Меньшие размеры = лучшее сжатие = более быстрая загрузка
  • Меньше времени на обработку у пользователя

Как определить размер отображения:

  1. Откройте элемент в DevTools браузера
  2. Посмотрите фактические отрисованные размеры
  3. Учтите Retina-дисплеи (разрешение 2x)
  4. Используйте размеры адаптивных изображений

Стратегия для Retina-дисплеев:

  • Размер отображения: ширина 800 px
  • Размер для Retina: ширина 1600 px (2x)
  • Сжимайте с более высоким качеством, чтобы сохранить чёткость

Пример рабочего процесса:

# Display width: 800px
# Retina: 1600px actual image
# But compress more aggressively to keep file size down
convert original.jpg -resize 1600x -quality 75 optimized.jpg

Шаг 3. Сожмите с оптимальными настройками качества

Рекомендации по качеству для разных типов изображений:

Тип изображения Качество JPEG Качество WebP Примечания
Hero-изображения 80–85% 75–80% На виду, нужно качество
Фото товаров 85–90% 80–85% Критично для продаж
Картинки в блоге 75–80% 70–75% Хороший баланс
Миниатюры 70–75% 65–70% Малый размер, агрессивное сжатие допустимо
Фоновые изображения 70–80% 65–75% Можно сжимать сильнее
Портреты 80–85% 75–80% Важны детали лица
Пейзажи 75–80% 70–75% Следите за полосами на небе

С помощью TinyImagePro (рекомендуем):

  1. Откройте TinyImagePro.com
  2. Загрузите изображения для сайта
  3. Выберите пресет «Website» или задайте качество вручную
  4. Выберите формат на выходе (JPEG, PNG, WebP)
  5. Сожмите и скачайте
  6. Загрузите на сайт

Пакетная обработка:

  • Обрабатывайте все изображения сразу ради единообразия
  • Используйте одинаковые настройки качества для похожих типов
  • Поддерживайте упорядоченную структуру папок

Шаг 4. Внедрите адаптивные изображения

Зачем нужны адаптивные изображения:

  • Мобильным пользователям не нужны изображения десктопного размера
  • Экономия трафика на маленьких экранах
  • Улучшение производительности на мобильных

Реализация через srcset в HTML:

<img
  src="image-800w.jpg"
  srcset="
    image-400w.jpg 400w,
    image-800w.jpg 800w,
    image-1200w.jpg 1200w,
    image-1600w.jpg 1600w
  "
  sizes="(max-width: 400px) 400px,
         (max-width: 800px) 800px,
         (max-width: 1200px) 1200px,
         1600px"
  alt="Description"
  width="1600"
  height="900"
  loading="lazy"
>

Преимущества:

  • Браузер сам выбирает подходящий размер
  • Мобильные пользователи получают изображения поменьше
  • Десктопные — изображения высокого качества
  • Автоматическая оптимизация

Создание наборов адаптивных изображений:

  1. Сделайте 3–4 варианта размеров (400 px, 800 px, 1200 px, 1600 px)
  2. Сожмите каждый с подходящим качеством
  3. Используйте атрибуты srcset и sizes
  4. Всегда указывайте ширину и высоту, чтобы избежать CLS

Шаг 5. Используйте современные форматы с запасными вариантами

Современный стек изображений:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" loading="lazy">
</picture>

Как это работает:

  1. Браузер сначала пробует AVIF (лучшее сжатие)
  2. Откатывается на WebP, если AVIF не поддерживается
  3. Откатывается на JPEG для старых браузеров
  4. Автоматически, без JavaScript

Сравнение размеров файлов:

  • Оригинал JPEG (1200×800): 450 КБ
  • Оптимизированный JPEG (качество 85%): 180 КБ (на 60% меньше)
  • WebP (качество 80%): 120 КБ (на 33% меньше JPEG)
  • AVIF (качество 75%): 80 КБ (на 33% меньше WebP)

Рабочий процесс конвертации:

# Create optimized JPEG
convert original.jpg -quality 85 image.jpg

# Create WebP version
cwebp -q 80 original.jpg -o image.webp

# Create AVIF version
avifenc -s 75 original.jpg image.avif

Продвинутые приёмы оптимизации изображений для сайтов

Ленивая загрузка изображений

Что это: изображения загружаются только когда вот-вот появятся в области видимости.

Преимущества:

  • Более быстрая первичная загрузка страницы
  • Экономия трафика для тех, кто не прокручивает страницу
  • Лучшие показатели Core Web Vitals
  • Меньше нагрузка на сервер

Реализация (нативная):

<img src="image.jpg" alt="Description" loading="lazy">

Лучшие практики:

  • Не делайте ленивыми изображения над линией сгиба (это вредит LCP)
  • Делайте ленивым всё, что ниже линии сгиба
  • Применяйте на всех статьях блога и длинных страницах
  • Сочетайте с адаптивными изображениями

Над линией сгиба и под ней:

<!-- Above the fold (hero image): DON'T lazy load -->
<img src="hero.jpg" alt="Hero" loading="eager">

<!-- Below the fold: DO lazy load -->
<img src="content.jpg" alt="Content" loading="lazy">

Прогрессивный JPEG для веба

Что это: JPEG загружается в несколько проходов — сначала показывает превью в низком разрешении, затем постепенно улучшается.

Преимущества:

  • Лучше воспринимаемая производительность
  • Пользователь сразу видит что-то
  • Размер файла на 2–5% меньше
  • Лучший опыт на медленном соединении

Когда использовать:

  • Изображения тяжелее 30 КБ
  • Hero-изображения
  • Обложки
  • Любое заметное изображение

Как создать:

# ImageMagick
convert input.jpg -interlace Plane output.jpg

# cjpeg (MozJPEG)
cjpeg -progressive -quality 85 input.jpg > output.jpg

TinyImagePro: автоматически создаёт прогрессивные JPEG для изображений тяжелее 30 КБ.

Спрайты для иконок

Что это: объединение нескольких маленьких изображений (иконок) в один файл.

Преимущества:

  • Меньше HTTP-запросов (критично для производительности)
  • Более быстрая загрузка страницы
  • Лучшее кэширование
  • Меньше нагрузка на сервер

Пример спрайт-листа:

icons.png (400×100px containing 4 icons)
Icon 1: 0,0,100px,100px
Icon 2: 100,0,100px,100px
Icon 3: 200,0,100px,100px
Icon 4: 300,0,100px,100px

Реализация в CSS:

.icon {
  background-image: url('icons.png');
  width: 100px;
  height: 100px;
}

.icon-search { background-position: 0 0; }
.icon-cart { background-position: -100px 0; }
.icon-user { background-position: -200px 0; }
.icon-menu { background-position: -300px 0; }

Лучшая альтернатива (2025): используйте SVG-спрайты или иконочные шрифты — они лучше масштабируются.

Критичные изображения и предзагрузка

Предзагрузка критичных изображений:

<head>
  <!-- Preload hero image for faster LCP -->
  <link rel="preload" as="image" href="hero.webp" type="image/webp">
  <link rel="preload" as="image" href="hero.jpg" type="image/jpeg">
</head>

Когда предзагружать:

  • Hero-изображения над линией сгиба
  • Логотип
  • Критичные фоновые изображения
  • LCP-изображение (элемент Largest Contentful Paint)

Когда НЕ предзагружать:

  • Изображения под линией сгиба
  • Некритичные изображения
  • Более 2–3 изображений (отдача убывает)

CDN для доставки изображений

Зачем нужен CDN:

  • Отдавать изображения с серверов ближе к пользователю
  • На 40–60% быстрее загрузка по всему миру
  • Меньше нагрузки на исходный сервер
  • Автоматическое сжатие и оптимизация (у некоторых CDN)
  • Лучшее управление кэшем

Популярные CDN для изображений:

CDN Ключевые возможности Цена
Cloudflare Images Автооптимизация, конвертация в WebP/AVIF, изменение размера 5 $/мес + 1 $ за 100 000 изображений
Cloudinary Оптимизация на ИИ, трансформации, адаптивные изображения Бесплатно: 25 ГБ/мес, Pro 89 $/мес
imgix Обработка изображений в реальном времени, адаптивные изображения Бесплатно: 1 000 мастер-изображений
Amazon CloudFront Глобальная раздача, интеграция с S3 По факту: 0,085 $/ГБ
KeyCDN Быстрая доставка, поддержка WebP 0,04 $/ГБ

Базовая настройка CDN:

<!-- Before: Origin server -->
<img src="https://yoursite.com/images/photo.jpg">

<!-- After: CDN -->
<img src="https://cdn.yoursite.com/images/photo.jpg">

Продвинутый CDN с трансформациями (на примере Cloudinary):

<img src="https://res.cloudinary.com/demo/image/upload/w_800,q_auto,f_auto/photo.jpg">

Параметры: w_800 (ширина), q_auto (авто-качество), f_auto (авто-формат WebP/AVIF)

Оптимизация для конкретных платформ

Оптимизация изображений в WordPress

Встроенные возможности:

  • WordPress автоматически создаёт несколько размеров (миниатюра, средний, большой)
  • Ленивая загрузка включена по умолчанию (WordPress 5.5+)
  • srcset добавляется к изображениям автоматически

Рекомендуемые плагины:

1. ShortPixel Image Optimizer:

  • Сжатие с потерями, «глянцевое» и без потерь
  • Конвертация в WebP
  • Массовая оптимизация
  • Бесплатно: 100 изображений/мес

2. Imagify:

  • 3 уровня оптимизации
  • Поддержка WebP и AVIF
  • Массовая оптимизация
  • Бесплатно: 20 МБ/мес

3. Smush:

  • Сжатие без потерь
  • Ленивая загрузка
  • Массовая обработка
  • Есть бесплатная версия

4. EWWW Image Optimizer:

  • Локальное и облачное сжатие
  • Конвертация в WebP
  • Автооптимизация при загрузке
  • Бесплатная и платная версии

Настройка WordPress:

// functions.php - Set custom image sizes
add_image_size('custom-large', 1600, 9999, false);
add_image_size('custom-medium', 800, 9999, false);
add_image_size('custom-small', 400, 9999, false);

// Disable unnecessary image sizes to save space
function disable_unused_image_sizes($sizes) {
    unset($sizes['medium_large']); // 768px
    unset($sizes['1536x1536']); // 2x medium_large
    unset($sizes['2048x2048']); // 2x large
    return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'disable_unused_image_sizes');

Оптимизация для Shopify / e-commerce

Требования к изображениям в e-commerce:

  • Фото товаров: высокое качество (сжатие 85–90%)
  • Несколько ракурсов: 4–8 изображений на товар
  • Функция зума: предоставляйте изображения 2000×2000 px
  • Миниатюры: агрессивное сжатие (70–75%)
  • Единообразие: одинаковое соотношение сторон у всех товаров

Лучшие практики Shopify:

  1. Загружайте фото товаров 2000×2000 px
  2. Shopify сам создаёт уменьшенные версии
  3. Используйте формат WebP (Shopify его поддерживает)
  4. Используйте CDN Shopify для изображений (автоматически)
  5. Давайте файлам описательные имена ради SEO: product-name-blue.jpg

Приложения для оптимизации изображений в Shopify:

  • TinyIMG SEO & Image Optimizer
  • Crush.pics Image Optimizer
  • Image Optimizer by Booster Apps

Спецификации фото товаров:

Main Product Image: 2000×2000px, 85-90% quality, 200-400KB
Thumbnail Grid: 600×600px, 75-80% quality, 40-80KB
Zoom View: 2500×2500px or higher, 90% quality, 400-600KB
Lifestyle Images: 1600×1200px, 80-85% quality, 150-300KB

Генераторы статических сайтов (Next.js, Gatsby)

Оптимизация изображений в Next.js:

import Image from 'next/image'

export default function ProductImage() {
  return (
    <Image
      src="/images/product.jpg"
      width={800}
      height={600}
      alt="Product"
      loading="lazy"
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,..." // Low-res placeholder
      quality={85}
    />
  )
}

Преимущества Next.js:

  • Автоматическая оптимизация изображений
  • Автоконвертация в WebP/AVIF
  • Адаптивные изображения (srcset)
  • Ленивая загрузка
  • Размытый плейсхолдер во время загрузки
  • Предотвращает CLS за счёт автоматических размеров

Gatsby Image:

import { GatsbyImage, getImage } from "gatsby-plugin-image"

export default function HeroImage({ data }) {
  const image = getImage(data.heroImage)

  return (
    <GatsbyImage
      image={image}
      alt="Hero"
      loading="eager" // Above-the-fold
    />
  )
}

Преимущества Gatsby:

  • Оптимизация изображений на этапе сборки
  • Автоматические адаптивные изображения
  • Конвертация в WebP
  • Эффект проявления из размытия
  • Поддержка арт-дирекшена

Мониторинг и тестирование производительности изображений

Инструменты для тестирования производительности

Google PageSpeed Insights:

  • Тестирует Core Web Vitals
  • Даёт подсказки по оптимизации изображений
  • Предупреждает о неправильно подобранных размерах
  • Предлагает форматы нового поколения (WebP, AVIF)

GTmetrix:

  • Каскадная диаграмма (показывает тайминг загрузки изображений)
  • Отчёт по оптимизации изображений
  • Отслеживание истории производительности
  • Рекомендации по сжатию

WebPageTest:

  • Подробные метрики производительности
  • Раскадровка (визуальный прогресс загрузки)
  • Анализ изображений
  • Тестирование из разных локаций

Chrome DevTools:

1. Open DevTools (F12)
2. Network tab → Filter by "Img"
3. Reload page
4. Check:
   - Total image size
   - Number of images
   - Load time for each image
   - Images blocking render

Оптимизация Core Web Vitals

LCP (Largest Contentful Paint) — цель: < 2,5 с:

Частые виновники:

  • Неоптимизированное hero-изображение
  • Большое фоновое изображение
  • Медленный ответ сервера

Исправления:

  1. Оптимизируйте hero-изображение (< 200 КБ)
  2. Предзагрузите LCP-изображение
<link rel="preload" as="image" href="hero.webp" type="image/webp">
  1. Используйте CDN для более быстрой доставки
  2. Сжимайте агрессивнее
  3. Используйте форматы WebP/AVIF

CLS (Cumulative Layout Shift) — цель: < 0,1:

Частые виновники:

  • Изображения без атрибутов width/height
  • Изображения, которые подгружаются поздно и сдвигают контент
  • Реклама/встройки без зарезервированного места

Исправления:

  1. Всегда указывайте ширину и высоту
<img src="image.jpg" width="800" height="600" alt="..." loading="lazy">
  1. Используйте CSS aspect-ratio
img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}
  1. Резервируйте место под ленивые изображения

INP (Interaction to Next Paint) — цель: < 200 мс:

Частые виновники:

  • Тяжёлый JavaScript, обрабатывающий изображения
  • Слайдеры/карусели, блокирующие основной поток
  • Декодирование больших изображений во время взаимодействия

Исправления:

  1. Оптимизируйте изображения в каруселях (< 100 КБ каждое)
  2. Используйте CSS-трансформации для анимаций изображений
  3. Декодируйте изображения асинхронно
<img src="image.jpg" decoding="async" alt="...">

Настройка бюджетов производительности

Что такое бюджет производительности:

  • Максимально допустимые размеры ресурсов
  • Предотвращает откат производительности
  • Контролируется во время разработки

Пример бюджета на изображения:

{
  "resourceSizes": {
    "total": 1500,        // Total page size in KB
    "image": 800,         // Total image size in KB
    "script": 300,
    "stylesheet": 100,
    "other": 300
  },
  "resourceCounts": {
    "image": 20,          // Maximum number of images
    "script": 10,
    "stylesheet": 5
  }
}

Инструменты контроля:

  • Lighthouse CI (автоматизированное тестирование)
  • webpack-bundle-analyzer (анализ сборки)
  • bundlesize (npm-пакет)

Пример Lighthouse CI:

# .lighthouserc.json
{
  "ci": {
    "assert": {
      "assertions": {
        "total-byte-weight": ["error", {"maxNumericValue": 1500000}],
        "uses-optimized-images": "error",
        "uses-webp-images": "warn",
        "modern-image-formats": "warn"
      }
    }
  }
}

Частые проблемы с изображениями на сайте и их решения

Проблема: большой Cumulative Layout Shift (CLS)

Признак: контент прыгает, когда загружаются изображения.

Причина: изображения без указанных размеров.

Решение:

<!-- BAD: No dimensions -->
<img src="image.jpg" alt="Photo">

<!-- GOOD: Specified dimensions -->
<img src="image.jpg" width="800" height="600" alt="Photo">

<!-- BEST: Modern aspect-ratio CSS -->
<img src="image.jpg" alt="Photo" style="aspect-ratio: 16/9; width: 100%; height: auto;">

Проблема: медленный LCP (Largest Contentful Paint)

Признак: hero-изображение полностью отрисовывается за 3–5+ секунд.

Причины:

  • Hero-изображение слишком тяжёлое (> 500 КБ)
  • Нет предзагрузки
  • Ресурсы, блокирующие рендеринг
  • Медленный сервер/CDN

Решения:

  1. Сожмите hero-изображение до < 200 КБ
  2. Предзагрузите hero-изображение:
<link rel="preload" as="image" href="hero.webp" type="image/webp">
  1. Используйте CDN
  2. Оптимизируйте критический путь рендеринга

Проблема: изображения выглядят пиксельными на Retina-дисплеях

Причина: отдача 1x-изображений на 2x (Retina) дисплеях.

Решение: отдавайте 2x-изображения, но сжимайте сильнее:

<img
  src="image-800w.jpg"
  srcset="image-800w.jpg 1x, image-1600w.jpg 2x"
  alt="Product"
>

Где image-1600w.jpg сжато агрессивнее (70–75% вместо 85%), чтобы размер файла остался похожим.

Проблема: разное качество изображений по сайту

Причина: непоследовательные настройки сжатия.

Решение: создайте правила сжатия и используйте пакетную обработку:

Hero Images: 85% quality, WebP, < 200KB
Product Photos: 85% quality, WebP, < 250KB
Blog Images: 80% quality, WebP, < 150KB
Thumbnails: 75% quality, WebP, < 60KB
Backgrounds: 75% quality, WebP, < 200KB

Используйте пакетное сжатие TinyImagePro с пресетами ради единообразия.

Проблема: старые браузеры не поддерживают WebP/AVIF

Причина: совместимость с устаревшими браузерами.

Решение: всегда предусматривайте запасные варианты:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Fallback for all browsers">
</picture>

Браузер автоматически выберет лучший поддерживаемый формат.

Чек-лист лучших практик

Перед загрузкой

✅ Уменьшайте изображения до размеров отображения (с учётом 2x Retina) ✅ Выбирайте правильный формат (JPEG для фото, PNG для графики, SVG для логотипов) ✅ Сжимайте с умом (качество 75–90% в зависимости от задачи) ✅ Удаляйте метаданные EXIF (экономит 10–50 КБ, улучшает конфиденциальность) ✅ Создавайте несколько размеров для адаптивных изображений (400w, 800w, 1200w, 1600w) ✅ Конвертируйте в WebP/AVIF (с запасными JPEG/PNG)

Реализация в HTML

✅ Всегда указывайте атрибуты width и height (предотвращает CLS) ✅ Используйте ленивую загрузку для изображений ниже линии сгиба ✅ Внедряйте srcset для адаптивных изображений ✅ Добавляйте описательный alt-текст (SEO и доступность) ✅ Используйте loading="eager" только для изображений над линией сгиба ✅ Применяйте элементы <picture> для современных форматов ✅ Предзагружайте LCP-изображение (hero/баннер) ✅ Используйте decoding="async" для крупных изображений

Оптимизация производительности

✅ Держите общий вес изображений под 800 КБ на страницу ✅ Ограничивайте число изображений (идеально < 20 на страницу) ✅ Используйте CDN для глобальной доставки ✅ Включайте кэширование браузера (1 год для изображений) ✅ Отслеживайте Core Web Vitals ежемесячно ✅ Задавайте бюджеты производительности и соблюдайте их ✅ Тестируйте на медленном 3G ✅ Регулярно проверяйте через Lighthouse

Часто задаваемые вопросы

В: Какой формат лучше всего для фотографий на сайте? О: JPEG для максимальной совместимости, WebP — для сжатия на 25–35% лучше с откатом на JPEG. Используйте элемент <picture>, чтобы отдавать оба.

В: Насколько сильно сжимать изображения для сайта? О: Качество 75–85% для большинства изображений. Hero-изображения можно 85%, миниатюры — 70–75%. Стремитесь к < 200 КБ для крупных изображений и < 100 КБ для контентных.

В: Что использовать — WebP или AVIF? О: Используйте оба с запасными вариантами. Отдавайте AVIF поддерживающим браузерам (самый маленький), откатывайтесь на WebP (хорошая поддержка), затем на JPEG (универсально).

В: Как оптимизировать изображения для мобильных? О: Используйте адаптивные изображения с srcset, отдавайте мобильным изображения поменьше, внедряйте ленивую загрузку и сжимайте агрессивнее (качество 70–80%).

В: Из-за чего изображения грузятся медленно? О: Большие размеры файлов, отсутствие сжатия, нет ленивой загрузки, медленный сервер/CDN, слишком много изображений, ресурсы, блокирующие рендеринг.

В: Как убрать предупреждение «Используйте форматы изображений нового поколения»? О: Переведите изображения в WebP или AVIF с помощью инструментов вроде TinyImagePro или утилит командной строки, затем внедрите через элемент <picture> с запасными вариантами.

В: Делать ли hero-изображения ленивыми? О: Нет! Никогда не делайте ленивыми изображения над линией сгиба, особенно hero-изображения. Используйте loading="eager" или вовсе без атрибута loading. Ленивая загрузка hero-изображений вредит LCP.

В: Как работают адаптивные изображения с srcset? О: Браузер выбирает подходящее изображение по размеру экрана и разрешению. Дайте 3–4 варианта размера — браузер скачает только один.

В: Какой LCP считается хорошим? О: До 2,5 секунды — «Хорошо», 2,5–4,0 — «Требует улучшения», свыше 4,0 — «Плохо». Оптимизированные hero-изображения — ключ к хорошему LCP.

В: Как часто проверять производительность изображений? О: Идеально — ежемесячно. Запускайте тест Lighthouse после любых крупных изменений. Настройте автоматический мониторинг с Lighthouse CI.

Заключение

Оптимизация изображений на сайте — одно из самых результативных улучшений для производительности, SEO и удобства пользователей. Правильное сжатие и грамотная реализация могут сократить время загрузки страницы на 40–80%, заметно улучшить показатели Core Web Vitals и поднять позиции в поиске.

Ключевые выводы:

  • Сжимайте изображения до качества 75–85% ради уменьшения размера на 60–80%
  • Используйте современные форматы (WebP, AVIF) с запасными JPEG/PNG
  • Внедряйте адаптивные изображения с srcset для мобильных
  • Делайте ленивыми все изображения ниже линии сгиба
  • Всегда указывайте размеры, чтобы избежать сдвига вёрстки
  • Предзагружайте LCP-изображение (обычно hero-изображение)
  • Используйте CDN для быстрой глобальной доставки
  • Отслеживайте Core Web Vitals и задавайте бюджеты производительности
  • Стремитесь к < 200 КБ для hero-изображений и < 100 КБ для контентных

Готовы оптимизировать изображения своего сайта? Попробуйте наш бесплатный компрессор изображений для мгновенного профессионального результата.

Похожие руководства:

Ready to Compress Your Images?

Try our free online image compression tool. No signup required, 100% secure.

Start Compressing Now

Related Articles

Как превратить изображения в видео с озвучкой: гайд по созданию faceless-контента (2026)
Tutorials

Как превратить изображения в видео с озвучкой: гайд по созданию faceless-контента (2026)

Некоторые из самых быстрорастущих каналов на YouTube и TikTok никогда не показывают лицо. Обзоры продуктов, исторические разборы, туры по недвижимости, рецепты ...

6 min read
Как конвертировать PNG в PDF: объединяем изображения в один документ (гайд 2026)
Tutorials

Как конвертировать PNG в PDF: объединяем изображения в один документ (гайд 2026)

Изображения отлично подходят, чтобы что-то быстро зафиксировать, но как только нужно солидно поделиться целой пачкой — подписанным договором, отснятым постранич...

6 min read
Как конвертировать PDF в PNG: полный гайд по извлечению изображений в высоком качестве (2026)
Tutorials

Как конвертировать PDF в PNG: полный гайд по извлечению изображений в высоком качестве (2026)

PDF идеален, чтобы делиться документами, но никуда не годится, когда вам нужно именно изображение. PDF не вставишь в слайд PowerPoint, не загрузишь как графику ...

6 min read
Как сжать изображения для сайта: полное руководство 2025