Тяжёлые картинки: оптимизация без потери качества

Симптом

• Картинки загружаются медленно, особенно на мобильных устройствах.
• Время полной загрузки страницы превышает 3 с.
• В панели «Network» DevTools виден большой размер файлов (мегабайты).
• На мобильных сетях страница «падает» из‑за медленной загрузки изображений.
• Пользователи жалуются на «плохое качество» после сжатия.

Причина

1. Форматы без потерь (JPEG, PNG) сохраняют исходные данные, что приводит к большим файлам.
2. Отсутствие адаптивных изображений – одна большая картинка подставляется в все места, даже если экран маленький.
3. Неправильная настройка lazy loading – изображения загружаются сразу, даже если находятся ниже fold.
4. Отсутствие современных форматов (WebP, AVIF) – которые дают 30‑50 % меньший размер при сохранении качества.

Как проверить

1. Проверка размеров
   bash curl -I https://example.com/image.jpg В заголовке Content-Length виден размер.

2. Проверка формата
   bash file image.jpg Вывод покажет JPEG image data или PNG image data.

3. Проверка поддержки WebP/AVIF
   В DevTools → Network → фильтр по image/webp и image/avif.
   Если их нет – сервер не отдаёт эти форматы.

4. Проверка lazy loading
   Откройте DevTools → Elements → найдите <img> без атрибута loading="lazy".

5. Проверка адаптивных изображений
   В HTML ищите <img srcset="..."> и <picture>.

Решение

1. Переключить на WebP/AVIF

# Установить libwebp и libavif
sudo apt-get install libwebp-dev libavif-dev

# Пример конвертации
cwebp -q 80 input.jpg -o output.webp
avifenc -q 50 input.jpg -o output.avif

Nginx – отдавать в зависимости от Accept:

location ~* \.(jpe?g|png)$ {
    add_header Vary Accept;
    if ($http_accept ~* "image/webp") {
        rewrite ^/(.*)\.(jpe?g|png)$ /$1.webp break;
    }
    if ($http_accept ~* "image/avif") {
        rewrite ^/(.*)\.(jpe?g|png)$ /$1.avif break;
    }
    try_files $uri $uri/ =404;
}

2. Использовать <picture> и srcset

<picture>
  <source srcset="/images/photo.avif" type="image/avif">
  <source srcset="/images/photo.webp" type="image/webp">
  <img src="/images/photo.jpg" alt="Описание">
</picture>

Небольшие изображения (мобильные) можно задать через srcset:

<img src="/images/photo-400.jpg"
     srcset="/images/photo-400.jpg 400w,
             /images/photo-800.jpg 800w,
             /images/photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     loading="lazy"
     alt="Описание">

3. Включить lazy loading

<img src="..." loading="lazy" alt="...">

Для старых браузеров можно добавить полифилл:

<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js" async></script>

4. Сжать изображения без видимой потери

# Для JPEG
jpegoptim --max=80 --strip-all input.jpg -d output/

# Для PNG
pngquant --quality=65-80 input.png --output output.png

# Для WebP
cwebp -q 80 input.jpg -o output.webp

Параметр -q (0‑100) регулирует качество. Для WebP 80‑85 обычно выглядит как оригинал.

5. Автоматизировать через сборщик

Gulp пример:

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const webp = require('gulp-webp');

gulp.task('images', () =>
  gulp.src('src/images/**/*.{jpg,png}')
    .pipe(imagemin([
      imagemin.mozjpeg({ quality: 80, progressive: true }),
      imagemin.optipng({ optimizationLevel: 5 })
    ]))
    .pipe(gulp.dest('dist/images'))
    .pipe(webp({ quality: 80 }))
    .pipe(gulp.dest('dist/images'))
);

6. Проверить результат

• В Chrome DevTools → Coverage → убедитесь, что размер изображений уменьшился.
• Сравните визуально в Photoshop/Preview.

Связанные

• Lazy loading изображений: как ускорить сайт
• Как использовать srcset и picture для адаптивных картинок