Если ваш сайт загружается дольше трех секунд, около половины посетителей нажимают крестик в правом верхнем углу. Скорость загрузки веб-ресурса – один из важнейших параметров, влияющих на позицию в поисковой выдаче и конверсию. Главный «тормоз» – изображения. Неоптимизированные иллюстрации делают интернет-площадку тяжелой и неповоротливой. Рассмотрим, зачем и чем выполнять сжатие картинок для сайта.
Зачем нужна оптимизация картинок?
Исследования, касающиеся скорости загрузки сайта, показывают несколько разные цифры. Но все они говорят об одном – если ресурс не откликается более 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. Он не только показывает наличие или отсутствие проблемы, но и дает способы исправления.
Что дает оптимизация.
- Ускорение сайта.
- Улучшение поведенческих факторов.
- Экономия места на сервере.
- Снижение нагрузки на сервер.
- Улучшение позиции в поисковой выдаче.
- Увеличение конверсии.
После приведенных цифр необходимость в оптимизации графики очевидна. Но как это сделать? Первое, что приходит в голову, – фотошоп, сжатие изображений в котором возможно за считанные секунды. Это отличный способ, если программа установлена на вашем ПК, а на сайте всего лишь несколько иллюстраций.
Сложности появляются тогда, когда картинок много, а времени мало. Для решения этой задачи можно воспользоваться помощью сервисов сжатия изображений. О самых популярных и удобных рассказываем ниже.
Сервисы сжатия веб-графики
Обзор поможет понять, какой сервис лучше подойдет в конкретном случае. Ориентироваться стоит на процент сжатия, форматы файлов, количество обрабатываемых изображений и цену вопроса.
Kraken
Работает с основными форматами – jpg, png, gif. Поддерживает сжатие картинки без потери качества и с потерями. На выбор пользователей три режима – Lossless, Lossy и Expert. В первом случае структура пикселя не меняется, поэтому добиться существенного облегчения картинок не выйдет. А вот режим Lossy позволяет снизить вес до 80 %. Expert – для тех, кто стремится к тонким настройкам и точно знает, что и как оптимизировать .
В бесплатной версии количество файлов для обработки не ограничено. Но размер каждого – не более 1 МБ. Платный аккаунт дает возможность работать с файлами весом до 16 МБ. Независимо от версии, необязательно ждать финала обработки. Вы можете «закинуть» картинки и пойти по своим делам. А оптимизированные изображения скачать позже.
Compressor
Бесплатный онлайн-сервис поддерживает 4 формата – кроме упомянутых прежде, работает и с файлами svg. Максимальное сжатие изображений – 90 %. Потери качества при этом минимальны. Вес исходной картинки ограничен: не более 10 МБ.
Минус: отсутствие возможности массовой загрузки файлов.
TinyPNG и TinyJPEG
На этих сайтах вы можете быстро и бесплатно обработать изображения в форматах, присутствующих в названиях сервисов. Без пополнения счета доступна одновременная обработка 20 изображений весом до 5 МБ. Разница в весе между исходным и конечным файлами достигает 70 %.
Платный аккаунт увеличивает количество загруженных картинок и размер каждой до 25 МБ. Появляются и другие опции, не имеющие прямого отношения к сжатию размера картинок.
Кроме того, сервис предлагает приобрести плагин для Фотошопа. Инструмент облегчает оптимизацию изображений и стоит $ 50.
Optimizilla
Программа для сжатия картинок без потери качества и с потерями. Работает с двумя форматами – jpg и png. Разницу между «сырым» и обработанным изображениями невооруженному глазу заметить трудно. Одновременно можно загрузить до 20 файлов.
Особенность сервиса – в возможности предпросмотра и тонкой настройке качества изображений. Это экономит время – результат виден заранее. Недостаток в том, что готовые файлы можно скачать только в течение часа.
JPEGmini
Онлайн-версия отличается минималистичным интерфейсом. Здесь вы не найдете массу настроек. Зато быстро получите оптимизированные изображения, сжатые до 80 %. Предельный размер исходника – 10 МБ. Без регистрации невозможно массовое сжатие изображений. Название сервиса явно намекает на то, что инструмент подходит для обработки картинок только в одном формате.
Есть и платная десктопная версия. Заплатив $ 99, вы получаете:
- возможность обрабатывать тяжеловесные изображения разрешением до 128 Мп;
- высокую скорость сжатия;
- возможность работать с любым количеством файлов одновременно (в рамках потенциала ПК).
Imagify
Сервис Imagify предлагает 3 варианта (метода) сжатия изображений – Normal, Agressive и Ultra. В нормальном режиме исходная картинка теряет в весе незначительно. Агрессивное сжатие заставляет изображение значительно «похудеть» без заметной потери качества. А режим «ультра» для тех, кто не боится увидеть разницу между исходным и готовым файлами. Зато и сжатие в таком случае максимальное.
Обработанные картинки хранятся на сервере сутки. Если используете пакетную обработку, не придется ждать трансформации у монитора – зайдете, когда удобно, и скачаете результат.
Compress Now
Этот бесплатный инструмент ничем особенным не выделяется. Выполняет сжатие размера изображений в формате jpg, png и gif. Удобный ползунок позволяет задать уровень компрессии от 0 до 100. Возможна пакетная обработка.
OptiPic
А вот этот сервис, стоит особняком. У всех перечисленных выше вариантов есть несомненное преимущество перед фотошопом – возможность быстро и без заморочек облегчить изображения. Не нужно разбираться в программе – загрузил и выгрузил. Но им присущ и общий недостаток – необходимость скачивать файлы с сервера, а затем закачивать их обратно, уже оптимизированные. Если картинок 10-20, особой проблемы нет. А когда счет идет на сотни, уже неудобно.
OptiPic не только поддерживает сжатие изображений без потерь, но и полностью автоматизирует обработку веб-картинок. После подключения сайта к системе, скрипт самостоятельно сканирует ваш ресурс и оптимизирует все изображения. В будущем работа с новыми картинками тоже не потребует вашего участия – программа мониторит сайт и сжимает новые файлы без «подсказок».
Сервис платный. Есть возможность протестировать систему бесплатно.
Заключение
Этими сервисами выбор не ограничивается. Однако для оптимизации картинок с лихвой хватит одного-двух. Попробуйте разные варианты. Вряд ли среди них не отыщется тот, который придется вам по вкусу.
