Как вы тратите деньги при загрузке изображений на сайт?
При передаче сайта клиенту и последующем администрировании с его стороны, я замечаю одну и ту же ошибку: бездумная загрузка изображений на сайт, вес которых является слишком большим и как следствие вызывает множество проблем: от трат ресурсов хостинга до худшей позиции в поиске. Сегодня разберемся, как бездумная загрузка изображений тратит ваши деньги и как буквально в пару кликов избежать этого. ⤵
Что может быть не так в загрузке изображений?
Изображения — достаточно ресурсоемкие элементы, вес которых занимает основную часть общего размера страницы сайта.
Для быстрой загрузки сайта общий вес страницы должен занимать максимум 4-5 МБ. Хотя само собой, в зависимости от специфики сайта, это значение может несколько превышаться.
Один из моих клиентов на днях загрузил на сайт картинку, вес которой составляет 7 МБ, а ведь это всего одна из картинок на странице.
Проверить вес своего сайта можно на сервисе Pingdom Test.
Просто вставьте ссылку и запустите тест. Размер страницы при загрузке будет отображаться в поле «Page size».
На что влияет вес изображений и как тратятся ваши деньги?
► Долгая загрузка сайта
Этот пункт можно назвать самым важным, так как он вызывает целый ряд проблем:
- Уход пользователей с сайта — никто не будет ждать долгую загрузку, как следствие теряем потенциального клиента.
- Низкие позиции в поисковой выдаче (SEO) — поисковые системы, такие как Google, учитывают скорость загрузки страниц как один из факторов ранжирования.
- Повышенная нагрузка на сервер — медленная загрузка может быть связана с высокими затратами ресурсов на сервере. Это приводит к перегрузке серверов.
► Трата ресурсов хостинга
Мы арендуем у провайдера хостинг в рамках определенного тарифа, предусматривающего выделенные ресурсы в установленном объеме.
Да-да, хостинг не резиновый) 🤫
Соответственно, чем большего размера мы загружаем изображения, тем быстрее исчерпываем ресурс памяти хостинга. Как следствие, это вызывает потребность покупать более дорогой тариф. Да, этого можно не бояться на мелких сайтах, но, условный интернет магазин может занимать в разы больше.
► Проблемы с пользовательским опытом
Мобильный трафик — на мобильных устройствах пользователи особенно чувствительны к медленным сайтам. Ожидание загрузки страниц на мобильных устройствах может вызвать негативный опыт и отказы. Мобильные пользователи могут быть особенно склонны покидать сайт при долгой загрузке.
👉 Дополнение: Google в своих исследованиях отмечает, что 53% пользователей покидают сайт, если он не загружается за 3 секунды. Это особенно важно для бизнеса, где мобильная аудитория составляет до 60-70% трафика.
Читать полностью
Как оптимизировать изображения и избежать проблем?
Проанализировать вес и размер изображений можно следующими способами:
- Просмотр элементов через DevTools, если разбираетесь в этом
- Просмотр информации о изображениях через медиатеку вашей CMS
Для этого можно использовать различные сервисы, могу порекомендовать сервис I Love IMG. Для работы с ним, в основном понадобятся 2 инструмента:
При сжатии просто выбираем набор нужных изображений и скачиваем уже сжатые. Сжатие происходит без потери качества.
При изменении размера выбираем также процентное соотношение сжатия. После чего можно также дополнительно сжать картинку.
Результат: 26.99 КБ ➡ 3.42 КБ!
⚠ Предупреждение: будьте осторожны с изменением размера, так-как нужно понимать на какие элементы вы будете добавлять эти картинки. Если на большие и сожмете изображение в маленький размер, оно будет расстягиваться и отображаться с ужасным качеством.
► Формат WEBP — Google одобряет
WebP — это формат файла, разработанный компанией Google в 2010 году. Его особенностью является продвинутый алгоритм сжатия, позволяющий сократить размер картинки без видимых потерь в качестве.
Конвертировать в WebP можно практически все изображения, кроме маленьких по размеру или иконок. После чего полноценно использовать на сайте.
Для конвертации можно использовать популярный сервис cloudconvert.
Конвертируем одну из картинок из формата jpg и получаем 1.1 МБ вместо 1.5 МБ без видимой потери качества!
Итоги
Оптимизация изображений на сайте — это не просто рекомендация, а необходимость, которая помогает избежать потерь денег и улучшить пользовательский опыт. Важно помнить:
► Вес изображений влияет на скорость загрузки — чем тяжелее файлы, тем дольше грузится сайт, что приводит к потере клиентов и ухудшению позиций в поисковой выдаче.
► Неправильная загрузка изображений увеличивает затраты — лишний вес расходует ресурсы хостинга, заставляя платить за более дорогие тарифы.
► Плохая оптимизация портит пользовательский опыт — особенно на мобильных устройствах, где скорость загрузки критически важна.
Подписывайтесь на мой Telegram-канал. Там я простыми словами рассказываю о разработке, делюсь полезными фишками и лайфхаками для коллег. Присоединяйтесь!