Как уменьшить размер изображения без видимой потери качества
Ваш сайт загружается шесть секунд. Письмо возвращается, потому что вложение слишком большое. Публикация в соцсетях выглядит отлично, но загружалась целую вечность. Почти во всех случаях виновник один: изображения, которые значительно больше, чем нужно.
Хорошая новость в том, что размер файлов изображений можно радикально уменьшить — часто на 70% и более — без какой-либо видимой разницы в качестве. Ключ — понимание того, что делает изображения большими.
Разрешение и размер файла: ключевое различие
Многие путают разрешение изображения с размером файла. Они связаны, но это разные вещи.
Разрешение — это количество пикселей в изображении, измеряемое как ширина x высота. Изображение 4000 x 3000 пикселей содержит 12 миллионов пикселей (12 мегапикселей). Разрешение определяет, насколько большим может быть отображение изображения при сохранении чёткости.
Размер файла — это сколько байтов изображение занимает на диске. Он зависит от разрешения, но также от формата, уровня сжатия и содержимого изображения.
Вот почему это различие важно: изображение 4000 x 3000, отображаемое на сайте в размере 800 x 600, тратит впустую более 90% своих пикселей. Браузеру приходится загружать все 12 миллионов пикселей, а потом отбрасывать большинство из них для отображения изображения в меньшем размере. Изменение размера изображения до фактических размеров отображения перед загрузкой может уменьшить размер файла на 80% и более, без видимой разницы.
Знаете ли вы? Типичная фотография со смартфона имеет разрешение 4000 x 3000 пикселей или больше. Изображение на всю ширину сайта редко нуждается в разрешении более 1920 x 1080 пикселей. Для миниатюры блога обычно достаточно 600 x 400 пикселей.
Форматы изображений
Выбранный формат оказывает огромное влияние на размер файла.
JPG (JPEG)
Универсальный стандарт для фотографий. JPG использует сжатие с потерями, то есть отбрасывает часть данных изображения, которые человеческий глаз вряд ли заметит. При качестве 80-85% изображения JPG выглядят идентично оригиналу, но занимают лишь малую часть от его размера.
Лучше всего подходит для: Фотографий, изображений с градиентами, реалистичных изображений.
PNG
PNG использует сжатие без потерь: данные не отбрасываются. Это делает его идеальным для изображений, требующих точного попиксельного воспроизведения, — логотипов, скриншотов и графики с текстом. Однако файлы PNG значительно больше JPG для фотографического контента.
Лучше всего подходит для: Логотипов, скриншотов, графики с текстом, изображений, требующих прозрачности.
WebP
Разработанный Google, WebP предлагает как сжатие с потерями, так и без потерь. Он создаёт файлы на 25-35% меньше, чем JPG при эквивалентном качестве, и поддерживает прозрачность (в отличие от JPG). Все современные браузеры поддерживают WebP.
Лучше всего подходит для: Веб-изображений любого типа. Лучший универсальный формат для веба на сегодня.
| Формат | Сжатие | Прозрачность | Типичный размер фото |
|---|---|---|---|
| JPG | С потерями | Нет | 200-500 КБ |
| PNG | Без потерь | Да | 1-5 МБ |
| WebP | Оба варианта | Да | 150-350 КБ |
Совет Если у вас есть изображения WebP, которые нужно конвертировать для совместимости, ознакомьтесь с нашим руководством: Как конвертировать WebP в JPG.
Как работает сжатие изображений
Все алгоритмы сжатия изображений используют один и тот же базовый принцип: человеческий глаз не способен воспринять каждую деталь, которую запечатлела камера. Алгоритмы сжатия выявляют и удаляют информацию, отсутствие которой вы никогда не заметите.
В частности, сжатие с потерями использует:
- Чувствительность к цвету. Человеческие глаза более чувствительны к изменениям яркости, чем цвета. Сжатие агрессивнее снижает точность цветопередачи.
- Высокочастотные детали. Мелкие текстуры и тонкие градиенты можно упростить без заметного эффекта.
- Избыточность. Области похожего цвета (голубое небо, белая стена) можно представить более эффективно.
Хитрость в том, чтобы найти правильный уровень сжатия. Слишком слабое сжатие тратит пропускную способность. Слишком сильное — создаёт видимые артефакты: размытие, полосы и блочность.
Практические правила для разных сценариев
Для веб-сайтов
- Максимальная ширина: 1920 пикселей для полноширинных баннеров, 800-1200 пикселей для контентных изображений
- Формат: WebP с запасным вариантом JPG
- Качество: 75-85%
- Целевой размер: Менее 200 КБ на изображение, менее 100 КБ для миниатюр
Для вложений электронной почты
- Максимальная ширина: 1200-1600 пикселей
- Формат: JPG (универсальная совместимость)
- Качество: 80-85%
- Целевой размер: Менее 500 КБ на изображение, общий размер вложений менее 10 МБ
Для социальных сетей
У каждой платформы свои оптимальные размеры, но в целом:
- Instagram: 1080 x 1080 (квадрат), 1080 x 1350 (портрет)
- Facebook: 1200 x 630 для превью ссылок
- LinkedIn: 1200 x 627
- Формат: JPG или PNG
- Качество: 85-90% (платформы пережимают ваши изображения, поэтому разумно начинать с чуть более высокого качества)
Предупреждение Платформы социальных сетей повторно сжимают ваши изображения после загрузки. Если вы загрузите уже сильно сжатое изображение, двойное сжатие может создать видимые артефакты. Начинайте с умеренно сжатых изображений (качество 85% и выше) и позвольте платформе выполнить собственную оптимизацию.
Главные ошибки
1. Загрузка файлов прямо с камеры
Стандартная фотография с современного смартфона занимает 3-8 МБ. RAW-файл с зеркальной камеры — 25-50 МБ. Загрузка их напрямую на сайт — самая частая причина медленной загрузки страниц.
2. Использование PNG для фотографий
PNG — неподходящий формат для фотографий. Фотография, сохранённая как PNG, может быть в 5-10 раз больше, чем та же фотография в JPG с качеством 85%, без видимой разницы.
3. Отсутствие изменения размера перед сжатием
Сжатие изображения шириной 4000 пикселей до 200 КБ гораздо менее эффективно, чем предварительное уменьшение до 1200 пикселей и последующее сжатие. Сначала измените размер, потом сжимайте.
4. Многократное сжатие
Каждый раз, когда вы открываете JPG, редактируете и сохраняете его, происходит повторное сжатие. За несколько циклов редактирования-сохранения качество заметно снижается. Всегда работайте с оригиналом и сжимайте только финальную версию.
Совет Сжимайте изображения бесплатно, прямо в браузере: Как сжать изображение. Настраивайте качество, изменяйте размеры и наблюдайте за экономией в реальном времени.
Влияние оптимизации изображений
Оптимизация изображений — это не только вопрос удобства. Для веб-сайтов она напрямую влияет на:
- Скорость загрузки страниц. Быстрые страницы занимают более высокие позиции в результатах поиска Google.
- Пользовательский опыт. 53% мобильных пользователей покидают страницы, которые загружаются дольше 3 секунд.
- Расходы на трафик. Для сайтов с высокой посещаемостью оптимизация изображений может существенно сэкономить на хостинге.
- Доступность. Пользователи с медленным соединением или ограниченным трафиком получают огромную пользу.
Готовы оптимизировать изображения? Следуйте нашему пошаговому руководству: Как сжать изображение. Это бесплатно, работает в браузере и позволяет увидеть разницу в качестве перед скачиванием.