От большого до малого: 5 инструментов сжатия изображений

Хотите улучшить время загрузки страницы? Оптимизация изображения - отличное место для начала! Columnist Tom Demers рассматривает пять бесплатных инструментов сжатия изображений и отмечает их влияние на скорость страницы.В последнее время я все больше фокусировался на оптимизации времени загрузки страниц. Улучшение скорости страницы - это то, что в целом довольно легко понимается клиентами, и это положительно влияет на опыт пользователя и конверсию, а также на SEO. Часто возникает проблема, заключающаяся в том, что некоторые элементы улучшения скорости страницы могут потребовать значительного вклада от ресурсов разработки (например, приоритет видимого контента, устранение блокировки визуализации JavaScript или CSS). Но есть один элемент оптимизации скорости страницы, который даже нетехнические маркетологи и создатели контента могут способствовать: оптимизации изображений. Как отмечает Кристин Шэчингер в своей превосходной статье по оптимизации изображений, изменение размеров и сжатие изображений часто может быть самым простым и самым сильным действием для ускорения страниц на вашем сайте. Schachinger отлично справляется с описанием сжатия изображений и изменением размера лучших практик, но как только вы узнаете, какие образы нуждаются в работе (или если у вас есть только несколько новых изображений для добавления на ваш сайт), что лучший инструмент для сжимания изображений? Поскольку сжатие изображений может быть такой легкой победой, я хотел протестировать возможности пяти различных бесплатных автономных средств сжатия изображений, которые могут использовать авторы, дизайнеры или маркетологи, чтобы гарантировать, что они сохраняют размер файла изображения. Для этого сообщения я выполнил три изображения с сайта, который я владею через каждый из инструментов:

Логотип

Изображение большого слайдера, которое не было сжато

Созданная нами инфографика, которая не была сжата

Два изображения были PNG, а один был JPG, и каждый из них был сгенерирован без какой-либо фокусировки на оптимизации размера или, в конечном счете, для сжатия (как это часто бывает «в дикой природе»). Существует множество различных инструментов оптимизации бесплатного изображения. Хотя я уверен, что не знаю всех из них, я проверил от 15 до 20 различных инструментов и нашел, что эти пять лучше всего подходят для большинства целей. Я думаю, что, вероятно, большинство людей, читающих эту статью, найдут, что одна из этих пяти подходит для удовлетворения потребностей в сжатии изображений. Давайте рассмотрим различные инструменты, которые я использовал для сжатия изображений.

1. Optimizilla

У Optimizilla очень простой интерфейс: Самые большие «плюсы» в пользу Optimizilla заключаются в том, что этот инструмент позволяет вам запускать до 20 изображений для сжатия за один раз (также есть пара других в этом списке) и что у него отличная функция предварительного просмотра изображения, которая позволяет вы набираете или понижаете «качество» фотографии. Эта функция слайдера качества позволяет вам настроить сжатие изображения на основе того, будет ли результирующее изображение выглядеть приемлемым. При наборе номера качество уменьшает размер изображения, поэтому, если вы не можете увидеть большую часть разницы в 60% по сравнению с 90-процентным качеством изображения, вы можете набрать вещи до 60 процентов, чтобы максимально уменьшить размер изображения ,

2. TinyPNG

Как и Optimizilla, TinyPNG имеет приятный, простой интерфейс и позволяет одновременно запускать до 20 изображений. Он также имеет удобный вариант «экспорт в Dropbox»:

3. Compressor.io

Compressor.io также предлагает сжатие. К сожалению, здесь нет функции массовой загрузки, поэтому вам нужно загрузить одно изображение за раз:

4. Kraken

Kraken позволяет загружать несколько файлов. Он также имеет несколько приятных функций, например, позволяет легко экспортировать файлы в Dropbox или импортировать файлы из Box, Dropbox или Google Drive. Кроме того, Kraken позволяет «продвинутую» настройку, такую ​​как изменение качества и ориентации и сохранение метаданных для ваших фотографий. Главным недостатком Kraken является то, что он был единственным инструментом в списке, который не выполнил бы сжатие для всех файлов в бесплатной версии инструмента. Наш большой инфографик (который был очень большим файлом на 1,7 МБ) попал в их свободную кепку. Их профи в настоящее время варьируется от 5 до 79 долларов в месяц.

5. Подарок скорости

Gift of Speed ​​предлагает отдельные компрессоры PNG и JPG. Он содержит массовую загрузку для PNG, но не для их JPG-компрессора.

Как насчет результатов?

Как вы можете видеть ниже, все инструменты существенно повлияли на размер изображения. Стоит отметить, что в каждом случае я взял стандартную версию сжатого изображения из каждого инструмента - я, вероятно, мог бы получить еще больший выигрыш, изменив дополнительные настройки в таких инструментах, как Kraken и Optimizilla. Как вы можете видеть, при производительности по умолчанию, у TinyPNG был наименьший размер файла для двух больших изображений, а у Compressor.io был самый маленький размер для логотипа. Если вам интересно до и после качества изображения, я загрузил все файлы в общедоступную папку Dropbox здесь. Если вы ищете инструмент для своей команды, который очень прост в использовании и выводит гораздо меньшее изображение по умолчанию, я бы, вероятно, рекомендовал TinyPNG. Лично я часто использую Optimizilla, поскольку я считаю, что это лучшая комбинация простого интерфейса с некоторой простой в использовании настройкой (где я могу просматривать и набирать качество, чтобы помочь сжать файл, если это необходимо).

Как это на самом деле влияет на вещи?

Возможно, вы думаете: «Хорошо, отлично, поэтому вы делали эти файлы с изображениями намного меньше, но насколько сильно это влияет на то, как быстро загружается моя страница?» Чтобы продемонстрировать, насколько серьезным может быть воздействие, я создал страницу на сайте WordPress и сначала добавил исходные изображения (и ничего больше) в тело страницы и зарегистрировал общее время загрузки страницы, затем удалил их и заменил их с наименьшей версией каждого файла. Загрузка страницы со всеми исходными изображениями, добавленными на страницу: 5,882 секунды Загрузка страницы с оптимизированной версией каждого изображения, добавленного на страницу: 2,369 секунды Таким образом, время загрузки страницы уменьшилось более чем наполовину после оптимизации трех изображений. Теперь это явно особенно заметно при наличии большого инфографического файла, но ваш логотип (и похожие файлы) присутствует на каждой странице вашего сайта, и есть хорошие шансы, что между сообщениями в блогах, изображениями продуктов и другими областями вашего сайта, у вас есть несколько неоптимизированных изображений. Сколько из совокупной нагрузки на страницу влияет (и в конечном счете, сколько трафика и дохода) вы теряете, используя эти неоптимизированные изображения? Мнения, выраженные в этой статье, принадлежат авторам гостевых изданий, а не обязательно поисковым системам. Здесь перечислены авторы работ.