Шаг 1. Сначала уменьшите размер, потом сжимайте
Главная экономия обычно даёт не сжатие, а размеры. Фото с телефона 4000 × 3000, показанное в колонке шириной 800 пикселей, несёт намного больше пикселей, чем кто-либо увидит. Правило: ширина картинки — её максимальная ширина на странице, умноженная на 2, если нужна чёткость на экранах высокой плотности (Retina). Для колонки в 800 px это около 1600 px.
Сначала воспользуйтесь изменением размера, затем сжимайте.
Шаг 2. Выберите формат
| Формат | Сжатие | Прозрачность | Для чего |
|---|---|---|---|
| JPEG | С потерями | Нет | Фото; универсальный запасной вариант |
| PNG | Без потерь | Да | Скриншоты, интерфейсы, графика с чёткими краями и малым числом цветов |
| WebP | С потерями или без | Да | Фото и графика; хороший современный вариант по умолчанию |
| AVIF | С потерями или без | Да | Фото, где важен каждый килобайт; кодируется дольше |
| SVG | Вектор | Да | Логотипы, иконки, простые иллюстрации |
WebP поддерживают все актуальные основные браузеры. По собственному сравнению Google, WebP с потерями примерно на 25–34% меньше JPEG сопоставимого качества, а WebP без потерь — примерно на четверть меньше PNG; на ваших картинках результат может отличаться. Частая ошибка — сохранять фотографии в PNG: такой файл легко оказывается в несколько раз больше хорошего JPEG или WebP без видимой пользы.
Шаг 3. Подберите качество
«Качество» в кодировщиках JPEG и WebP — это шкала, а не процент от оригинала. Для фото частая отправная точка — 75–85. Честный способ выбрать — на глаз:
- Откройте компрессор изображений и загрузите картинку.
- Выберите WebP или JPEG и снижайте качество, глядя на сравнение «до/после» при 100% масштабе.
- Остановитесь, когда появятся квадраты, полосы на небе или ореолы вокруг текста, и верните на пару шагов вверх.
На больших однородных областях (небо, градиенты) артефакты видны раньше, а пёстрые детальные фото выдерживают более низкое качество. Хуже всего переносит сжатие текст на картинке — по возможности используйте обычный HTML-текст.
Шаг 4. Уберите лишнее
В фото с камеры есть EXIF-метаданные: модель устройства, дата, иногда GPS-координаты. Они добавляют вес и могут раскрыть личную информацию. Пересохранение в компрессоре обычно их удаляет; проверить можно в просмотрщике EXIF. Для SVG пригодится оптимизатор SVG — он удаляет служебный мусор редакторов и комментарии.
Шаг 5. Правильно подключите картинки в HTML
<picture>
<source type="image/webp" srcset="hero-800.webp 800w, hero-1600.webp 1600w" sizes="(max-width: 800px) 100vw, 800px">
<img src="hero-1600.jpg" srcset="hero-800.jpg 800w, hero-1600.jpg 1600w" sizes="(max-width: 800px) 100vw, 800px"
width="1600" height="900" alt="Команда за работой в офисе" decoding="async">
</picture>
<!-- ниже первого экрана: пусть браузер загрузит позже -->
<img src="chart.webp" width="1200" height="675" alt="График продаж по месяцам" loading="lazy" decoding="async"><picture>с источником WebP позволяет браузерам с поддержкой WebP использовать его, а остальным — JPEG.srcsetиsizesдают телефонам скачать меньшую версию.widthиheightрезервируют место, чтобы вёрстка не прыгала при загрузке (это влияет на Cumulative Layout Shift).loading="lazy"откладывает загрузку картинок за пределами экрана. Главное изображение вверху страницы лениво загружать не стоит — это задерживает Largest Contentful Paint.- Всегда пишите осмысленный
alt: он нужен пользователям экранных дикторов и поиску по картинкам.
Короткий чек-лист
- Размеры ≤ размер на странице × 2.
- Фото → WebP (или AVIF) с запасным JPEG; логотипы → SVG; скриншоты → PNG или WebP без потерь.
- Качество подобрано на глаз, для фото обычно 75–85.
- Метаданные удалены; заданы width, height и alt; ниже первого экрана — ленивая загрузка.
Нужно перевести сразу много JPG или PNG? Конвертер в WebP сделает это в браузере.
Частые вопросы
Какой формат изображений лучше для сайта?
Для фотографий WebP (или AVIF) обычно даёт самый маленький файл при том же визуальном качестве, а JPEG остаётся универсальным запасным вариантом. Для логотипов, иконок и простой графики лучше SVG; PNG или WebP без потерь — для скриншотов и картинок с прозрачностью.
Какое качество JPEG или WebP ставить?
Для фото на сайте частая отправная точка — качество около 75–85. Сравните результат с оригиналом при 100% масштабе и снижайте значение, пока не заметите артефакты, затем немного верните вверх.
Какого размера должны быть картинки на странице?
Не больше, чем они показываются, умноженное на плотность экранов, которую вы хотите поддержать. Картинке шириной 800 CSS-пикселей для чёткости на экранах с плотностью 2× нужно около 1600 пикселей; всё, что больше, — лишний вес.
Помогает ли сжатие картинок SEO?
Косвенно. Лёгкие изображения ускоряют загрузку, что улучшает удобство и показатели Core Web Vitals, например Largest Contentful Paint. Для поиска по картинкам напрямую важны понятные имена файлов и alt-тексты.
Загружаются ли картинки на сервер при сжатии?
Нет. Компрессор и конвертер в WebP работают в браузере, файлы остаются на вашем устройстве.