Большие картинки — причина номер один, по которой страницы грузятся медленно. Решение почти всегда в два шага: сделать картинку правильных размеров, затем сжать оставшееся. Сделайте оба — и фото на 4 МБ станет фото на 150 КБ, выглядящим на экране идентично.
Давайте подставим реальные числа.
Целевые размеры, к которым стремиться
Гадать не нужно. Вот практические бюджеты веса, держащие страницы быстрыми:
- Геройский / полноширинный баннер: меньше 200 КБ, идеально ~100–150 КБ.
- Фото внутри статьи: 80–150 КБ каждое.
- Миниатюра / аватар: 10–30 КБ.
- Логотип или иконка (PNG/SVG): меньше 30 КБ; часто куда меньше.
И размеры:
- Полноширинное геройское: 1600–2000 px в ширину — с запасом для большинства раскладок (удваивайте только если целитесь в Retina и можете позволить байты).
- Фото в колонке: под ширину вашего контента — часто 800–1200 px.
- Миниатюра: размер, в котором реально показывается, например 300–400 px.
Если любая отдельная картинка на странице больше ~300 КБ, это обычно ошибка, которую стоит исправить.
Шаг 1: приведите к реальной ширине показа
Это шаг, который люди пропускают, и это самый большой рычаг. Фото прямо с телефона часто 4000+ пикселей в ширину. Если оно показывается в колонке 800 пикселей, вы отгружаете в 25 раз больше пикселей, чем показывает экран — а число пикселей влияет на размер файла больше всего.
Используйте Изменение размера изображений, чтобы уменьшить картинку до ширины, в которой она реально появляется. Меняйте размер пикселями или процентами, держите соотношение заблокированным и позвольте качественному уменьшителю сохранить края чистыми.
Правильный размер сам по себе часто режет размер файла на 80–90% ещё до того, как вы сжали хоть байт.
Шаг 2: сожмите оставшееся
Теперь ужмите данные внутри этих правильных размеров.
- Фото (JPG/WebP): задайте ползунок качества на 75–85. Это визуально без потерь для большинства картинок, сильно режа размер.
- PNG (скриншоты, графика): Сжатие изображений сводит их к палитре в 256 цветов, обычно экономя 60–80% без видимого изменения и сохраняя прозрачность.
Инструмент сжатия также ограничивает вывод исходным размером — он никогда не отдаёт что-то больше — и у него есть опциональное ограничение ширины, так что оба шага можно сделать за один проход: задайте ограничение на целевую ширину и сжимайте разом. Прогоните целую папку пакетом и скачайте её ZIP-архивом.
Заодно выберите правильный формат
Если ваши картинки будут отдаваться современным браузерам, конвертация фото в WebP обычно бьёт JPEG ещё на 25–35% при том же качестве. Плоская графика остаётся PNG (или WebP). Не сохраняйте фотографии как PNG — это классическая ошибка раздутия, легко штраф в 5–10×.
Реалистичный рабочий процесс
Для поста в блоге с пятью фото:
- Измените размер каждого под ширину вашей колонки (скажем, 1200 px).
- Сожмите при качестве 80 или конвертируйте в WebP.
- Убедитесь, что каждое укладывается в ~150 КБ.
- Проверьте кадрирование одного изображения на 100%, чтобы убедиться, что качество удержалось.
Пять фото, начавшие с суммарных 20 МБ, приземлятся около 600 КБ — страница, которая грузится в мгновение вместо затыка.
Приватно и офлайн
Всё вышеперечисленное работает целиком в вашем браузере через Canvas и WebAssembly. Ни одна картинка не загружается на сервер, а после первого визита инструменты закешированы и работают офлайн. Можно оптимизировать картинки на целый пост без соединения и без того, чтобы что-то покидало вашу машину.