Почему изображения вашего сайта нуждаются в сжатии | Bulk Image Compressor
Если ваш сайт загружается дольше нескольких секунд, люди уходят. Это не мнение. Собственное исследование Google показывает, что процент отказов увеличивается на 32%, когда загрузка страницы увеличивается с одной секунды до трех. И изображения почти всегда являются главной причиной медленной загрузки страниц.
Большинство сайтов обслуживают изображения, которые намного больше, чем нужно. Одно hero-изображение прямо с камеры или со стокового фотосайта может легко весить 5 МБ или более. На приличном широкополосном соединении этот файл загружается пару секунд. На мобильном 3G-соединении вы смотрите на около 15 секунд только для одного изображения. Теперь представьте страницу с пятью или шестью такими изображениями.
Насколько велики ваши изображения на самом деле?
Вот быстрая проверка реальности. Откройте инструменты разработчика вашего браузера (F12), перейдите на вкладку Network, перезагрузите страницу и отфильтруйте по «Img». Посмотрите на размеры. Вы, вероятно, найдете по крайней мере несколько изображений более 1 МБ.
Для справки, вот как выглядят типичные несжатые изображения:
- DSLR-фото, используемое как hero-баннер: 4-8 МБ
- Фото товара со смартфона: 2-5 МБ
- Стоковое фото, скачанное в полном разрешении: 3-10 МБ
- Инфографика или иллюстрация, сохраненная как PNG: 1-4 МБ
После правильного сжатия те же изображения могут весить 100-300 КБ без видимой потери качества. Это уменьшение размера файла на 90% или более.
Скорость страницы и Core Web Vitals
Google использует Core Web Vitals как сигнал ранжирования, и изображения напрямую влияют на две из трех метрик.
Largest Contentful Paint (LCP) измеряет, сколько времени требуется для загрузки самого большого видимого элемента. На большинстве страниц этот самый большой элемент — изображение. Если ваше hero-изображение весит 5 МБ, ваш LCP будет ужасным. Google считает всё, что превышает 2,5 секунды, плохим показателем LCP. Сжатые изображения регулярно удерживают LCP ниже этого порога.
Cumulative Layout Shift (CLS) измеряет визуальную стабильность. Изображения без определенных размеров вызывают сдвиги макета по мере загрузки. Это больше связано с HTML-атрибутами, чем со сжатием, но изображения большого размера, которые загружаются медленно, усугубляют проблему, потому что страница отображает контент вокруг зарезервированного места, которое может не соответствовать конечному размеру изображения.
Вы можете проверить свои текущие показатели с помощью Google PageSpeed Insights. Проверьте вашу домашнюю страницу и несколько внутренних страниц. Если ваш показатель производительности ниже 90, изображения, вероятно, являются большой частью проблемы.
Связь с SEO
Скорость страницы — подтвержденный фактор ранжирования Google. Это было с 2010 года для десктопа и с 2018 года для мобильных. Введение Core Web Vitals в 2021 году сделало это еще более прямым.
Но влияние выходит за рамки сигнала скорости. Медленные страницы реже сканируются Googlebot. Google выделяет «бюджет сканирования» каждому сайту, и если ваши страницы медленные, бот тратит свой бюджет на ожидание ответов вместо индексирования большего количества вашего контента. Для крупных сайтов с сотнями или тысячами страниц это очень важно.
Есть также косвенный эффект через поведение пользователей. Когда люди уходят с медленных страниц, Google это замечает. Высокий процент отказов и низкое время на странице отправляют негативные сигналы вовлеченности, которые со временем могут повлиять на ваши позиции.
Пользовательский опыт и процент отказов
Люди нетерпеливы в интернете. Исследование Portent показало, что коэффициент конверсии падает в среднем на 4,42% за каждую дополнительную секунду времени загрузки. Если ваш сайт электронной коммерции загружается пять секунд вместо двух, вы можете терять значительный процент продаж.
Мобильные пользователи еще менее терпеливы. Более половины всего веб-трафика поступает с мобильных устройств, а мобильные соединения обычно медленнее десктопных. Ваши изображения должны быть достаточно малы, чтобы быстро загружаться на телефоне, использующем сотовую сеть.
Есть также фактор восприятия. Быстрый сайт кажется более профессиональным и заслуживающим доверия. Медленный сайт кажется сломанным, даже если в итоге всё загружается. Первые впечатления происходят за миллисекунды.
Затраты на пропускную способность накапливаются
Если вы на общем хостинге или базовом тарифе, пропускная способность может быть не тем, о чем вы думаете. Но для сайтов с реальным трафиком пропускная способность стоит денег.
Давайте посчитаем. Скажем, ваша средняя страница имеет 3 МБ изображений, и вы получаете 100 000 просмотров страниц в месяц. Это 300 ГБ данных изображений, передаваемых ежемесячно. После сжатия те же страницы могут иметь 400 КБ изображений, снижая передачу до 40 ГБ. Это значительное снижение расходов на хостинг и счетов за CDN.
Для высокотрафиковых сайтов, медиакомпаний или магазинов электронной коммерции с большими каталогами товаров эта разница может экономить сотни или тысячи долларов в месяц.
Как пакетно сжать изображения вашего сайта
Вы могли бы сжимать изображения по одному в Photoshop или GIMP, но если у вас десятки или сотни изображений, это непрактично. Пакетное сжатие — это то, что нужно.
С помощью Bulk Image Compressor вы можете перетащить все изображения вашего сайта сразу и сжать их вместе. Вот практический рабочий процесс:
-
Экспортируйте текущие изображения. Если они уже на вашем сайте, скачайте их. Если вы создаете новый сайт, соберите все изображения, которые планируете использовать.
-
Выберите формат. Для фотографий лучше всего подходят JPEG или WebP. Для графики с прозрачностью используйте PNG или WebP. Если вы не уверены, какой формат выбрать, ознакомьтесь с нашим руководством по форматам изображений для веб-производительности.
-
Установите уровень качества. Для большинства изображений сайта настройка качества 75-85% дает хороший баланс между размером файла и визуальным качеством. Вы можете снизить для миниатюр или фоновых изображений. Для более подробной информации об этом компромиссе смотрите нашу статью уменьшение размера файла без потери качества.
-
Сожмите и скачайте. Инструмент обрабатывает всё в вашем браузере, поэтому ваши изображения никогда не покидают ваш компьютер. Замените оригиналы на вашем сервере сжатыми версиями.
-
Также установите размеры. Не отдавайте изображение шириной 4000px в контейнере шириной всего 800px. Изменяйте размер изображений в соответствии с их размером отображения до или во время сжатия. Одно это может кардинально уменьшить размеры файлов.
Быстрый пример «до и после»
Вот как сжатие выглядит на практике для типичного сайта:
| Изображение | До | После | Экономия |
|---|---|---|---|
| Hero-баннер (JPEG) | 4,2 МБ | 210 КБ | 95% |
| Фото команды (JPEG) | 3,1 МБ | 185 КБ | 94% |
| Логотип (PNG) | 890 КБ | 95 КБ | 89% |
| Миниатюра блога (JPEG) | 1,8 МБ | 120 КБ | 93% |
| Всего | 10 МБ | 610 КБ | 94% |
Это разница между страницей, которая загружается за одну секунду, и страницей, которая загружается за восемь.
Не забывайте о новом контенте
Сжатие существующих изображений — это разовое исправление, но вам также нужен процесс для текущего контента. Каждый раз, когда вы или ваша команда добавляете новый пост в блоге, страницу товара или лендинг, эти изображения должны быть сжаты перед публикацией.
Сделайте сжатие изображений частью вашего рабочего процесса публикации контента. Это занимает пару минут, а влияние на скорость вашего сайта и SEO реально и измеримо.
Изображения вашего сайта — вероятно, самое большое улучшение производительности, которое вы можете сделать. Инструменты бесплатны, процесс быстр, а результаты сразу видны в ваших показателях скорости страницы.
Ready to compress your images?
Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.
Try Bulk Image Compressor