Smartlanding

Обзор сервисов для онлайн сжатия картинок без потери качества

Сервисы для сжатия изображений

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

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

Начнем с небольшой предыстории. Первый вариант статьи вышел еще в 2014 году и уже тогда было ясно, что создать привлекательный дизайн лендинг пейдж достаточно сложно без использования изображений в высоком разрешении, что неизбежно увеличивает вес страницы и соответственно скорость ее загрузки.

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

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

Почему я начал использовать сервис для онлайн сжатия картинок

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

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

В 2014 году, это были не те инструменты, которыми я пользуюсь сейчас, поэтому решил переписать статью, провести тест, и актуализировать ее к 2018/2019 году.

Выбираем претендентов:

Почему я остановился на этих сервисах. В первую очередь, потому, что они поддерживают основные форматы “jpeg” и “png”, Tiny PNG я пользуюсь сам, и все они заявляют, что будет наилучшая компрессия при том, что ухудшения качества минимальны. Проверим это!

Все же мы понимаем, что сжать картинку на 40% и не потерять в качестве невозможно? Но возможно добиться того, что эта потеря в качестве будет минимальной и практически незаметной в сравнении с оригиналом.

Мне кажется это честной позицией, они смело говорят, что будет оптимальный результат, а не предлагают нам выставить качество самостоятельно согласившись на какие-то визуальные потери.

В конце концов мы ищем инструмент, который сделает нужную работу с минимальными потерями, а не гонимся за сжатием в 90%.

В конце статьи я выложу еще несколько инструментов, в которых можно играться с процентом сжатия, а вы сами решите стоят они внимания или нет.

Ну что же, давайте перейдем к делу. Для теста я выбрал 3 картинки:

  • фоновое изображение размером 2732х2732 пикселей в формате JPEG. Вес — 622 453 байт;
  • текстовый логотип размером 640х400 пикселей в формате PNG. Вес — 132 977 байт;
  • изображение природы размером 1280х720 в формате JPEG. Вес — 351 358 байт;

Оригиналы и сжатые файлы можете найти в архиве и оценить детальнее. Архив в конце статьи. Размер файла брал из свойств документа в пункте «Раздел»

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

Оригиналы:

Оригинальный фон
Фоновая картинка
Логотип diwebstudio
Текстовый логотип
Флора
Природа

Давайте воспользуемся сервисом Tiny PNG и посмотрим, как изменится качество и размер:

  • фоновое изображение размером 2732х2732 пикселей в формате JPEG. Сжатый вес — 89 486 байт / оригинальный — 622 453 байт;
  • текстовый логотип размером 640х400 пикселей в формате PNG. Сжатый вес — 50 179 байт / оригинальный — 132 977 байт;
  • изображение природы размером 1280х720 в формате JPEG. Сжатый вес — 164 088 байт / оригинальный — 351 358 байт;

Наши файлы весили 1106,788 КБ, а теперь всего 258,653 КБ. Результат сжатия достаточно хороший, но давайте взглянем на качество.

Сервис для онлайн сжатия картинок tinypng

Примеры картинок после оптимизации:

Фоновая картинка tinypng
Фоновая картинка Tiny PNG

Текстовый логотип Tiny PNG

Природа Tiny PNG

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

Давайте перейдем к сервису Сompressor и посмотрим на что способен он.

  • фоновое изображение размером 2732х2732 пикселей в формате JPEG. Сжатый вес — 116 957 байт / оригинальный — 622 453 байт;
  • текстовый логотип размером 640х400 пикселей в формате PNG. Сжатый вес- 123 573 байт / оригинальный — 132 977 байт;
  • изображение природы размером 1280х720 в формате JPEG. Сжатый вес — 242 122 байт / оригинальный — 351 358 байт;

Как видим, показатели сжатия не такие хорошие как у Tiny PNG.

Сжатие сервисом Compressor

Но давайте посчитаем сколько сейчас весят наши файлы. Было 1106,788 КБ, а стало 482,652 КБ. В целом результат тоже не плохой, более чем в 2 раза. Посмотрим на качество.

Фоновая картинка Compressor
Фоновая картинка Compressor
Логотип Compressor
Логотип Compressor
Природа Compressor
Природа Compressor

Тут, конечно, качество градиента получше и артефактов меньше чем у TinyPng. Качество изображений с логотипом и градиентом — явно лучше, чем у предыдущего сервиса, но природа качественнее у Tiny PNG. Есть небольшое неудобство в самом сервисе. Оно заключается в том, что загружать можно только по 1 файлу, а так, все на приличном уровне.

Посмотрим, что нам выдаст Iloveimg.

  • фоновое изображение размером 2732х2732 пикселей в формате JPEG. Сжатый вес — 90 283 байт / оригинальный — 622 453 байт;
  • текстовый логотип размером 640х400 пикселей в формате PNG. Сжатый вес- 35 599 байт / оригинальный — 132 977 байт;
  • изображение природы размером 1280х720 в формате JPEG. Сжатый вес — 181 564 байт / оригинальный — 351 358 байт;

Сжатие сервисом Iloveimg

Это сервис тоже хорошо справился со сжатием. Раньше картинки весили 1106,788 КБ, а сейчас 307,446 КБ. По степени сжатия сервис на втором месте, побеждает по-прежнему Tiny PNG, но если у Iloveimg окажется лучше качество, то он станет абсолютным лидером.

Фоновая картинка Iloveimg
Фоновая картинка Iloveimg
Логотип Iloveimg
Логотип Iloveimg
Природа Iloveimg
Природа Iloveimg

Нет, к сожалению, Iloveimg не плохо справился со сложным градиентом на картинке с фоном, но добавил больше всех артефактов на логотип. Природа получилась лучше, чем у Compressor, но хуже чем у Tiny PNG.

Давайте еще посмотрим на сравнение картинок сразу 3 сервисов при 100% масштабе.

Сравнение фона

Сравнение природы

Вот такой тест получился. Сложно даже выбрать 1. С разными задачами каждый сервис справляется по-разному. Я долгое время пользовался Tiny PNG и был уверен, что он лучший, но для четких границ и понятных градиентов о оказался не самым удачным выбором. Думал, что статья окажется хвалебной одой в его честь, но получилось не так. Какого-то явного лидера — тоже нет, так что решать вам. Как и обещал, вот еще несколько сервисов для сжатия:

А какими сервисами для сжатия изображений пользуетесь вы? Или все пользуются каким-нибудь gulp-imagemin и подобными инструментами при верстке?

Поделитесь статьей в социальных сетях, чтобы не потерять

5 комментариев

  • Никита

    Спасибо большое за статью.) Как раз то что искал!

    Ответить
  • dimadv7

    Нашел еще один сервис для оптимизации изображений в формате png. Как по мне, так наиболее удобный. Простым перетягиванием можно очень быстро оптимизировать по 20 картинок сразу: tinypng.com

    Ответить
  • Mad_Doc

    вообще-то библиотека GD рулит. не нужно никаких сторонних сервисов

    Ответить
  • Семён

    Вопрос: В фотошопе функция «сохранить для web» сжимает хуже онлайновых сервисов? Спаисибо)

    Ответить
  • dimadv7

    Привет. Да, пользуйся в комплексе. Сначала сохраняй для веб, а потом в онлайн сервис) Я сейчас пользуюсь только tinypng.com

    Ответить

Добавить комментарий