Все статьи блога

Зачем и как сжимать картинки на сайте?

Если ваш сайт загружается дольше трех секунд, около половины посетителей нажимают крестик в правом верхнем углу. Скорость загрузки веб-ресурса – один из важнейших параметров, влияющих на позицию в поисковой выдаче и конверсию. Главный «тормоз» – изображения. Неоптимизированные иллюстрации делают интернет-площадку тяжелой и неповоротливой. Рассмотрим, зачем и чем выполнять сжатие картинок для сайта.

Зачем нужна оптимизация картинок?

Исследования, касающиеся скорости загрузки сайта, показывают несколько разные цифры. Но все они говорят об одном – если ресурс не откликается более 4-5 секунд, почти все посетители уходят. При десятисекундной задержке конверсия близка к нулю.

Примерно половина пользователей ожидает, что на отклик понадобится менее 2-х секунд. Проблему видно четче при увеличении финансового масштаба. Компания Amazon выяснила, что если к текущей скорости загрузки ее площадки прибавить всего одну секунду, это будет стоить ей более $ 1,5 млрд ежегодно. Серьезный повод подумать об оптимизации сайта.

Почему оптимизация изображений разгоняет сайт?

Веб-страница обычно состоит из:

  • html-разметки и css-кода;
  • скриптов JavaScript;
  • видео;
  • изображений.

На все эти компоненты можно посмотреть, как на набор байтов, имеющих определенный вес и занимающих физическое место на сервере. По статистике, основная тяжесть сайта приходится как раз на картинки.

Сжатие файлов изображений способно уменьшить вес площадки до 80%.

Что такое оптимизация картинок?

Оптимизация графических файлов – обработка изображений, ведущая к снижению их веса. Почти всегда в результате сжатия файлы значительно теряют в «массе» и совсем немного – в качестве. Обычно сжатие размеров изображений подразумевает потерю веса до 50-90% от исходного значения.

Оптимизации достигают благодаря удалению метаданных и использованию специальных алгоритмов. Помимо визуального содержимого, изображения включают в себя информацию о месте и дате съемки, устройстве и т.п. Рядовому пользователю эта информация ни к чему. Наряду с удалением лишних данных, программы анализируют, какими элементами графики можно пожертвовать без заметного ущерба для восприятия картинок.

Какой вес изображений считать приемлемым? Для нормальной работы сайта рекомендуемый максимальный вес картинок – 500 КБ. Еще лучше, если этот показатель не превышает 100 КБ. Если фото весят более 1 МБ, то они сильно отягощают сайт – такое в Сети сплошь и рядом. По данным HTTP Archive, средний вес страницы в Интернете – 2,4 Мбайт. Из них на графику приходится около 65%. Это значит, что средняя сетевая картинка делает сайт тяжелее на 1,5 МБ.

Проверка скорости загрузки сайта – необходимая мера. Рекомендуем сделать это с помощью сервиса Google PageSpeed Insights. Он не только показывает наличие или отсутствие проблемы, но и дает способы исправления.

Что дает оптимизация:

  • Ускорение сайта.
  • Улучшение поведенческих факторов.
  • Экономия места на сервере.
  • Снижение нагрузки на сервер.
  • Улучшение позиции в поисковой выдаче.
  • Увеличение конверсии.

После приведенных цифр необходимость в оптимизации графики очевидна. Но как это сделать? Первое, что приходит в голову, – фотошоп, сжатие изображений в котором возможно за считанные секунды. Это отличный способ, если программа установлена на вашем ПК, а на сайте всего лишь несколько иллюстраций.

Сложности появляются тогда, когда картинок много, а времени мало. Для решения этой задачи можно воспользоваться помощью сервисов сжатия изображений. О самых популярных и удобных рассказываем ниже.

Обзор сервисов сжатия изображений

Обзор поможет понять, какой сервис лучше подойдет в конкретном случае. Ориентироваться стоит на процент сжатия, форматы файлов, количество обрабатываемых изображений и цену вопроса.

Работает с основными форматами – jpg, png, gif. Поддерживает сжатие картинки без потери качества и с потерями. На выбор пользователей три режима – Lossless, Lossy и Expert. В первом случае структура пикселя не меняется, поэтому добиться существенного облегчения картинок не выйдет. А вот режим Lossy позволяет снизить вес до 80%. Expert – для тех, кто стремится к тонким настройкам и точно знает, что и как оптимизировать.

Kraken

В бесплатной версии количество файлов для обработки не ограничено. Но размер каждого – не более 1 МБ. Платный аккаунт дает возможность работать с файлами весом до 16 МБ. Независимо от версии, необязательно ждать финала обработки. Вы можете «закинуть» картинки и пойти по своим делам. А оптимизированные изображения скачать позже.

Бесплатный онлайн-сервис поддерживает 4 формата – кроме упомянутых прежде, работает и с файлами svg. Максимальное сжатие изображений – 90%. Потери качества при этом минимальны. Вес исходной картинки ограничен: не более 10 МБ.

Compressor

Минус: отсутствие возможности массовой загрузки файлов.

На этих сайтах вы можете быстро и бесплатно обработать изображения в форматах, присутствующих в названиях сервисов. Без пополнения счета доступна одновременная обработка 20 изображений весом до 5 МБ. Разница в весе между исходным и конечным файлами достигает 70%.

TinyPNG

Платный аккаунт увеличивает количество загруженных картинок и размер каждой до 25 МБ. Появляются и другие опции, не имеющие прямого отношения к сжатию размера картинок.
Кроме того, сервис предлагает приобрести плагин для Фотошопа. Инструмент облегчает оптимизацию изображений и стоит $ 50.

Программа для сжатия картинок без потери качества и с потерями. Работает с двумя форматами – jpg и png. Разницу между «сырым» и обработанным изображениями невооруженному глазу заметить трудно. Одновременно можно загрузить до 20 файлов.

Optimizilla

Особенность сервиса – в возможности предпросмотра и тонкой настройке качества изображений. Это экономит время – результат виден заранее. Недостаток в том, что готовые файлы можно скачать только в течение часа.

Онлайн-версия отличается минималистичным интерфейсом. Здесь вы не найдете массу настроек. Зато быстро получите оптимизированные изображения, сжатые до 80%. Предельный размер исходника – 10 МБ. Без регистрации невозможно массовое сжатие изображений. Название сервиса явно намекает на то, что инструмент подходит для обработки картинок только в одном формате.

JPEGmini

Есть и платная десктопная версия. Заплатив $ 99, вы получаете:

  • возможность обрабатывать тяжеловесные изображения разрешением до 128 Мп;
  • высокую скорость сжатия;
  • возможность работать с любым количеством файлов одновременно (в рамках потенциала ПК).

Сервис Imagify предлагает 3 варианта (метода) сжатия изображений – Normal, Agressive и Ultra. В нормальном режиме исходная картинка теряет в весе незначительно. Агрессивное сжатие заставляет изображение значительно «похудеть» без заметной потери качества. А режим «ультра» для тех, кто не боится увидеть разницу между исходным и готовым файлами. Зато и сжатие в  аком случае максимальное.

Imagify

Обработанные картинки хранятся на сервере сутки. Если используете пакетную обработку, не придется ждать трансформации у монитора – зайдете, когда удобно, и скачаете результат.

Этот бесплатный инструмент ничем особенным не выделяется. Выполняет сжатие размера изображений в формате jpg, png и gif. Удобный ползунок позволяет задать уровень компрессии от 0 до 100. Возможна пакетная обработка.

Compress Now

А вот этот сервис стоит особняком. У всех перечисленных выше вариантов есть несомненное преимущество перед фотошопом – возможность быстро и без заморочек облегчить изображения. Не нужно разбираться в программе – загрузил и выгрузил. Но им присущ и общий недостаток – необходимость скачивать файлы с сервера, а затем закачивать их обратно, уже оптимизированные. Если картинок 10-20, особой проблемы нет. А когда счет идет на сотни, уже неудобно.

OptiPic

OptiPic не только поддерживает сжатие изображений без потерь, но и полностью автоматизирует обработку веб-картинок. После подключения сайта к системе, скрипт самостоятельно сканирует ваш ресурс и оптимизирует все изображения. В будущем работа с новыми картинками тоже не потребует вашего участия – программа мониторит сайт и сжимает новые файлы без «подсказок».

Сервис платный. Есть возможность протестировать систему бесплатно.

Заключение

Этими сервисами выбор не ограничивается. Однако для оптимизации картинок с лихвой хватит одного-двух. Попробуйте разные варианты. Вряд ли среди них не отыщется тот, который придется вам по вкусу.

Оставайтесь с нами:  

Спасибо, что вы делитесь со своими друзьями в социальных сетях.

Оставьте Ваш комментарий!
Подписка оформлена!
Заявка на продвижение сайта
Меня интересует:
Закрыть окно
Заявка отправлена!