На большинстве сайтов изображения — самое тяжёлое на странице, часто крупнее, чем HTML, CSS и JavaScript вместе взятые. Если страница кажется медленной, картинки — первое место, куда стоит заглянуть, и исправления обычно быстрые.
Почти всю работу делают три приёма: изменить размер картинки до того, в котором она реально показывается, сжать её и отдавать в современном формате. Применённые вместе, они регулярно урезают вес изображений на 70% и больше.
Приведите к размеру, в котором показываете
Это самая частая и самая расточительная ошибка. Фотография прямо с камеры может быть 6000 пикселей в ширину, но в статье вы показываете её в колонке шириной 800 пикселей. Браузер скачивает все шесть тысяч пикселей, а потом выбрасывает большую их часть, ужимая картинку по месту.
Отдавать изображение 6000 пикселей в слот на 800 пикселей может означать загрузку в пять-десять раз большего объёма данных, чем нужно. Решение простое: измените размер файла примерно до той ширины, которую он займёт, плюс небольшой запас под экраны высокой плотности.
Практическое правило:
- Полноширинное геройское изображение: 1600–2000 px в ширину — с запасом.
- Картинка внутри статьи: 1000–1400 px.
- Миниатюра: 300–500 px.
Используйте Изменение размера изображений, чтобы уменьшить каждую картинку ещё до того, как она попадёт на страницу. Соотношение сторон блокируется, так что ничего не растянется.
Сожмите, чтобы убрать лишнее
Когда габариты в порядке, сжатие убирает детали, которые глаз не видит. Для фотографий качество около 75–85% — золотая середина: файл резко уменьшается, а картинка выглядит так же. Для плоской графики и скриншотов, сохранённых как PNG, снижение числа цветов (квантование до 256 цветов) может ужать файл до доли исходного размера.
Сжатие изображений справляется с обоими случаями. Оно переупаковывает JPEG и WebP по качеству, квантует PNG и гарантирует, что никогда не выдаст файл больше того, с которого вы начали. Если у вас целая галерея, прогоните их пакетом и скачайте ZIP.
Перейдите на современный формат
Один только выбор формата может вдвое уменьшить файл. Вот как распространённые варианты сравниваются для фотографий.
| Формат | Типичный размер против JPEG | Лучше для |
|---|---|---|
| JPEG | База | Универсальный запасной вариант; фото |
| WebP | ~25–35% меньше | Фото и графика; широкая поддержка браузеров |
| AVIF | ~50% меньше | Фото, где важен минимальный размер |
| PNG | Гораздо крупнее для фото | Логотипы, иконки, плоская графика, прозрачность |
WebP — безопасный выбор по умолчанию в 2026: его читает каждый современный браузер, и он уверенно обходит JPEG. AVIF идёт ещё меньше, но кодируется дольше и имеет чуть уже поддержку. Конвертер изображений позволяет целиться в AVIF и тихо откатывается к WebP, когда AVIF не подходит, так что вы получаете лучший доступный результат без гаданий.
Одна оговорка: не используйте PNG для фотографий. PNG блистает на логотипах, иконках и всём, что требует прозрачности, но для фото он может быть в несколько раз крупнее WebP того же качества.
Собираем вместе
Надёжный конвейер для любого изображения, идущего в веб:
- Измените размер до ширины показа (плюс запас под ретина-экраны).
- Конвертируйте в WebP, или в AVIF, если хотите максимально маленький файл.
- Сожмите при качестве 75–85%, чтобы срезать остатки лишнего.
Сделайте так — и фото с камеры на 5 МБ может стать WebP на 120 КБ, который в колонке статьи выглядит идентично. Умножьте на всю страницу — и разница во времени загрузки станет разительной.
Всё работает в вашем браузере через Canvas и WebAssembly, так что ничего не загружается, а инструменты продолжают работать офлайн после первого визита. Это значит, что вы можете подготовить папку картинок для сайта, не передавая их никакому серверу.
За пределами файлов
Ещё две привычки помогают и ничего не стоят:
- Ленивая загрузка картинок ниже сгиба через
loading="lazy", чтобы браузер подтягивал их только когда читатель прокручивает ближе. - Задавайте атрибуты width и height, чтобы вёрстка не прыгала, пока картинки грузятся — это заодно помогает вашему показателю Core Web Vitals.
Хотите точно знать, какие изображения тянут страницу вниз? Наше руководство по image SEO разбирает аудит, а проверка скорости страницы перечислит самые тяжёлые ресурсы, чтобы вы знали, куда бить в первую очередь.