Твои изображения, вероятно, слишком большие (вот как это исправить)
Большинство сайтов загружаются медленно из-за неоптимизированных изображений. Несколько минут сжатия могут сократить время загрузки вдвое.
Я провел аудит сайта на прошлой неделе для портфолио фотографа моего друга. Красивые изображения. Великолепная работа.
Главная страница загружалась 12 секунд.
Виновник? Одно главное изображение весом 8MB. При мобильном соединении посетители уходили ещё до того, как что-то увидели.
Это происходит чаще, чем ты думаешь. Так что давай поговорим о том, как это исправить.
Проблема, которую никто не замечает
Когда ты экспортируешь изображение из Photoshop или со своего телефона, оно обычно намного больше, чем нужно. Фото 4000x3000 прямо с камеры может весить 15MB.
Для сайта тебе редко нужно что-то больше 200KB — иногда меньше.
Разница имеет значение:
| Размер изображения | Время загрузки (3G) | Время загрузки (4G) | |------------|----------------|----------------| | 5MB | 40+ секунд | 8 секунд | | 500KB | 4 секунды | менее 1 секунды | | 100KB | менее 1 секунды | мгновенно |
Это изображение в 5MB не просто медленное — оно также съедает тарифы твоих посетителей.
Шаг 1: Сначала измени размер
Перед тем как что-то сжимать, проверь размеры.
Если твой сайт отображает изображение шириной 800 пикселей, нет смысла загружать оригинал в 4000 пикселей. Ты отправляешь в 5 раз больше данных, чем нужно.
Определи наибольший размер, в котором будет отображаться твоё изображение (проверь на десктопе — обычно это самый большой), затем измени размер до этой ширины. Добавь, может быть, 20% запаса для retina-дисплеев, если хочешь.
Шаг 2: Сожми его
Теперь, когда твоё изображение нужного размера, сожми его.
Современные алгоритмы сжатия удивительно хороши. Ты часто можешь уменьшить размер файла на 60-80% без видимой потери качества. Серьёзно — поставь до и после рядом и попробуй найти разницу.
Несколько вещей, которые нужно знать:
Качество JPEG 80-85 обычно золотая середина. Ниже 70 начинают появляться артефакты. Выше 90 — ты тратишь байты на невидимые улучшения.
PNG без потерь, поэтому сжимается меньше. Но всё равно стоит прогнать через компрессор, чтобы убрать метаданные и оптимизировать кодирование.
WebP даёт тебе лучшее из двух миров — файлы меньше, чем JPEG, с поддержкой прозрачности, как PNG. Большинство браузеров теперь поддерживают его.
Шаг 3: Выбери правильный формат
Это важнее, чем думают люди.
Используй JPEG для:
- Фотографий
- Изображений с множеством цветов и градиентов
- Фонов
Используй PNG для:
- Логотипов
- Иконок
- Скриншотов
- Всего, что требует прозрачности
Используй WebP для:
- Всего, если твоя аудитория использует современные браузеры
- Fallback на JPEG/PNG для старых браузеров
Используй SVG для:
- Простой графики
- Иконок
- Логотипов (если у тебя есть векторный файл)
- Всего, что должно масштабироваться бесконечно
Реальные цифры
Вот что произошло, когда я оптимизировал портфолио моего друга:
| До | После | |--------|-------| | Главное изображение: 8MB | Главное изображение: 180KB | | Сетка миниатюр: 12MB всего | Сетка миниатюр: 400KB всего | | Загрузка страницы: 12 секунд | Загрузка страницы: 1.8 секунды |
Те же изображения. То же визуальное качество. Просто правильно оптимизированы.
Ленивый способ
Если ты загружаешь в WordPress, Squarespace или подобные платформы, они часто сжимают изображения автоматически. Но "часто" это не "всегда", и их сжатие не всегда достаточно агрессивное.
Лучший подход: оптимизируй перед загрузкой. Ты контролируешь качество и не зависишь от того, что решит делать платформа.
Занимает 2 минуты на изображение. Твои посетители будут благодарны — даже если никогда не узнают, почему твой сайт кажется быстрым.
Быстрый чеклист
Перед загрузкой любого изображения:
- Правильный размер? Не загружай 4000px, когда тебе нужно 800px
- Сжато? Прогони через компрессор
- Правильный формат? JPEG для фото, PNG для графики, WebP если возможно
- Протестировано? Посмотри на финальную версию. Если выглядит плохо, уменьши сжатие
Скорость сайта в основном зависит от изображений. Исправь свои изображения, и ты решил половину проблем производительности. Всё остальное — оптимизация по мелочам.
Начни с самых больших изображений первыми. Обычно это баннеры и полноразмерные фото. Они дают наибольшую отдачу при наименьших усилиях.