Обзор сервисов для онлайн сжатия картинок без потери качества
Доброго времени суток, дорогие читатели 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 пикселя сожмется до этих размеров. Поэтому оценивать качество все-таки лучше либо из архива, либо открывать их в новой вкладке.
Фоновая картинка Текстовый логотип Природа
Давайте воспользуемся сервисом 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 КБ. Результат сжатия достаточно хороший, но давайте взглянем на качество.
Примеры картинок после оптимизации:
Фоновая картинка 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.
Но давайте посчитаем сколько сейчас весят наши файлы. Было 1106,788 КБ, а стало 482,652 КБ. В целом результат тоже не плохой, более чем в 2 раза. Посмотрим на качество.
Фоновая картинка 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 байт;
Это сервис тоже хорошо справился со сжатием. Раньше картинки весили 1106,788 КБ, а сейчас 307,446 КБ. По степени сжатия сервис на втором месте, побеждает по-прежнему Tiny PNG, но если у Iloveimg окажется лучше качество, то он станет абсолютным лидером.
Фоновая картинка Iloveimg Логотип Iloveimg Природа Iloveimg
Нет, к сожалению, Iloveimg не плохо справился со сложным градиентом на картинке с фоном, но добавил больше всех артефактов на логотип. Природа получилась лучше, чем у Compressor, но хуже чем у Tiny PNG.
Давайте еще посмотрим на сравнение картинок сразу 3 сервисов при 100% масштабе.
Вот такой тест получился. Сложно даже выбрать 1. С разными задачами каждый сервис справляется по-разному. Я долгое время пользовался Tiny PNG и был уверен, что он лучший, но для четких границ и понятных градиентов о оказался не самым удачным выбором. Думал, что статья окажется хвалебной одой в его честь, но получилось не так. Какого-то явного лидера - тоже нет, так что решать вам. Как и обещал, вот еще несколько сервисов для сжатия:
А какими сервисами для сжатия изображений пользуетесь вы? Или все пользуются каким-нибудь gulp-imagemin и подобными инструментами при верстке?