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

Если аудит скорости страницы хоть раз рекомендовал вам «задать правильный размер изображений» или «отдавать изображения в форматах нового поколения», это руководство — решение. Изображения обычно самые тяжёлые ресурсы на странице, и их уменьшение даёт максимальную отдачу при минимальных затратах — это куда дешевле, чем переписывать скрипты или покупать более быстрый хостинг. При правильном подходе страницы заметно ускоряются, и никто не заметит, что фото стали меньше.

Здесь вы получаете повторяемый рабочий процесс: экспортируйте под ширину отображения, сжимайте до комфортного качества и конвертируйте фото в WebP. Каждый шаг привязан к актуальному порогу отрисовки крупнейшего элемента, чтобы не гадать. Весь конвейер работает в вашем браузере — исходные фото никогда не загружаются на сервер.

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

Ключевые показатели качества сайтов измеряют реальный опыт посетителей «в поле». Метрика, на которую изображения влияют сильнее всего, — момент завершения отрисовки самого большого видимого элемента страницы. В статьях блога, на страницах магазина и лендингах этим элементом чаще всего выступает баннер в шапке, а не абзац текста. Раздутый баннер весом 4 MB напрямую затягивает этот отсчёт.

Актуальные оценки этого показателя, сверенные с официальной документацией 2026-10-06:

Эти числа получены из реальных полевых данных на 75-м процентиле, измеряемых отдельно на мобильных устройствах и компьютерах. Планка «отлично» в 2026 году по-прежнему составляет 2,5 секунды — её не снизили до 2,0 секунды, несмотря на слухи в отдельных блогах о поисковой оптимизации. Два других ключевых показателя тоже зависят от изображений (незаданные ширина и высота вызывают сдвиг макета), но сжатие в первую очередь влияет именно на скорость отрисовки крупнейшего элемента.

Два рычага: сначала размер в пикселях, потом качество

Большинство открывают компрессор и двигают ползунок качества. Это меньший рычаг. Более сильный — отдавать правильное число пикселей.

Рычаг 1 — отдавайте правильные размеры

Камера телефона выдаёт фото шириной 4000-6000 px. Если это изображение показывается в колонке контента шириной 800 px, вы передаёте в пять раз больше пикселей, чем кто-либо может увидеть. Уменьшение длинной стороны примерно до ширины отображения — не более чем в 2x для экранов с высокой плотностью пикселей — обычно само по себе сокращает вес файла на 60-80% без видимых потерь. Это самый эффективный шаг.

Рычаг 2 — затем снизьте качество (с потерями)

Когда размеры верные, умеренное сжатие с потерями (примерно 75-85% качества) срезает ещё один кусок без заметных изменений. Делайте именно в таком порядке: сжимайте после изменения размера. Давить на качество у оригинала в полном разрешении — пустая трата сил и блочные артефакты на выходе.

Пошагово: сжимаем изображения для веба

1. Экспортируйте под точную ширину отображения. Знайте, где появляется изображение. Для баннера в шапке оправдано ~1600-2400 px шириной; для контентного фото ~1200-1600 px; для миниатюры ~400-600 px. Используйте изменение размера изображения с зафиксированными пропорциями, чтобы ширина и высота масштабировались вместе. Не отдавайте больше чем в 2x от размера отображения для экранов с высокой плотностью пикселей.
2. Сожмите с потерями до ~75-85% качества. Загрузите уменьшенное изображение в браузерный компрессор и настройте качество так, чтобы файл попал в целевой диапазон ниже. На уровне 75-85% большинство людей не отличает результат от оригинала.
3. Конвертируйте фото в WebP. WebP при сопоставимом качестве примерно на 25-35% меньше, чем соответствующий JPG. Запустите JPG в WebP для фотографий и PNG в WebP для графики с прозрачностью. Для небольшой доли старых браузеров оставьте запасной вариант в JPG.
4. Проверьте примерные целевые размеры. Баннеры в шапке — до ~200 KB, контентные изображения — до ~100-150 KB, миниатюры — до ~30-50 KB. Это практичные диапазоны 2026 года, а не правило поисковой системы, — подстраивайте под свой дизайн.

Если исходное изображение действительно мягкое или не в фокусе, исправьте это до сжатия: лёгкое улучшение восстанавливает близкие, но мелкие детали, после чего вы изменяете размер и сжимаете уже более чёткий результат. Если портал также требует точного значения в КБ (а не просто веса для веба), смотрите руководство о сжатии до целевого размера файла — там описан метод бинарного поиска.

«Без потери качества» — что это на самом деле значит

Фраза «без потери качества» на этой странице означает визуально без потерь при обычном размере просмотра, а не побитово идентичный файл. Форматы с потерями отбрасывают информацию, которую глаз почти не замечает (тонкие цветовые детали на гладком небе), и при качестве 75-85% результат выглядит чистым. Действуют два честных ограничения:

• Никаких цепочек повторного сохранения. Каждое повторное сохранение JPEG с потерями накапливает артефакты. Всегда сжимайте один раз из оригинала, а не из уже сжатого экспорта.
• Бесплатного сыра не бывает. Фото 4000 px, выдавленное до 50 KB, будет выглядеть мягким. Способ сохранить воспринимаемое качество — это описанный выше порядок «сначала размер, потом сжатие», а не волшебная настройка.

Шпаргалка по форматам: JPG, PNG, WebP и АВИФ

Выбирайте формат под задачу. Правильный выбор здесь важнее любого ползунка качества.

АВИФ сжимает даже лучше, чем WebP, но PixlReady кодирует и экспортирует только JPG, PNG и WebP и не создаёт АВИФ. Если вам нужен АВИФ, понадобится отдельный инструмент; для большинства сайтов WebP уже забирает основную часть выигрыша. Ещё одно правило: всегда задавайте атрибуты ширины и высоты у тегов изображений, чтобы браузер резервировал место — незаданные размеры вызывают сдвиг макета, третий ключевой показатель качества.

Частые ошибки, из-за которых сайт работает медленно

• Сжатие до изменения размера. Вы тратите силы, выдавливая фото 4000 px, когда решение — отдать 1200 px. Сначала размер, потом сжатие.
• Отправка PNG для фотографии. Фото в PNG весит в 3-10 раз больше, то же фото в JPG или WebP. Используйте PNG только тогда, когда вам действительно нужна прозрачность или чёткая графика.
• Повторное сжатие уже сжатого JPEG. Всегда начинайте с оригинала. Повторное сохранение файла, уже сохранённого при качестве 60, накладывает артефакты на артефакты.
• Забыть задать ширину и высоту. Изображение без указанных размеров сдвигает всю страницу вниз при загрузке, что вредит стабильности макета даже когда отрисовка крупнейшего элемента уже быстрая.
• Использовать инструмент с загрузкой на сервер для чувствительных изображений. Большинство компрессоров отправляют ваш файл на сервер. Для товарных снимков, клиентских фото и всего приватного используйте локальный компрессор без загрузки — и смотрите наш разбор о том, почему важен компрессор без загрузки на сервер.

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

Частые вопросы