Блог по продвижению сайтов Блог по SEO

Сжимаем картинки JPG и PNG онлайн без потери качества

Просмотров: 3486

Сжатие фото - важнейшая задача для любого владельца сайта или сеошника. Мало того, что поисковые системы постоянно продавливают эту тенденцию (читайте как более подробно про Google Page Speed), так это еще и снижает показатель отказов и улучшает отношение посетителей, ведь мало кто хочет долго ждать загрузки страниц, и предпочтения так или иначе отдаются шустрым ресурсам.

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

На момент написания статьи наиболее популярные форматы - это JPG и PNG. Другие форматы (например, Webp) пока не имеют 100% поддержки всех браузеров, операционных систем и CMS, поэтому они может и более прогрессивны, но увы, малораспространены.

Поэтому в большинстве случаев задача перед успешным сайтом стоит в том, чтобы поужимать как только возможно имеющиеся на сайте картинки. И если из немного (ну штук 20-30), то проще всего это сделать вручную, с помощью всевозможных онлайн сервисов по сжатию картинок.

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

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

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

Сжатие фото в JPG

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

Читайте также:  100% правильный редирект в магазине Опенкарт (Opencart / OcStore 2.х и 3.x)

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

Я проанализировал несколько наиболее популярных сервисов по сжатию JPG и вот к каким результатами пришел.

В качестве исходника я использовал стоковое изображение в формате JPG со 100% качеством (то есть без всякого предварительного сжатия) - оно, естественно, смотрится чётко, и я оценил его в 10 баллов из 10.

Затем последовательно сжимал в разных сервисах и оценивал размер и качество картинки (субъективно, конечно). Я не ставил цель провести какой-то глобальный эксперимент, просто поделился конкретными фактами.

сжатие фото онлайн

Оригинальная картинка JPG — 865 Кб
(исходник)

сжатие фотографий jpg

После сжатия в JPG — 92 Кб
(минимальные потери качества)

сжатие фото онлайн

После сжатия в WEBP — 89 Кб
(без потери качества)

Более подробные результаты со сжатию JPG в таблице:

Номер Ссылка на сервис по сжатию фото онлайн Фото Размер, Кб Качество картинки после сжатия от 1 до 10
1 https://imagify.io/ сжатый jpg 64 2
2 https://www.websiteplanet.com/ru/webtools/imagecompressor/ сжатый jpg 89 1
3 https://www.iloveimg.com/ru сжатый jpg 92 7 :yes:
4 https://tinypng.com/ сжатый jpg 105 6
5 https://www.hipdf.com/ru/image-compressor сжатый jpg 128 5
6 https://compressor.io/compress сжатый jpg 133 3
7 https://imagecompressor.com/ru/ сжатый jpg 148 9 :yes:
8 https://compressjpeg.com/ru/ сжатый jpg 171 8
9 https://hnet.com/compress-jpeg/ сжатый jpg 179 8
Исходник в Jpeg исходник jpg 865 10
Если всё же использовать формат Webp через https://www.online-convert.com/ru сжатый webp 89 10

Наилучшее качество при максимальном сжатии JPG — https://www.iloveimg.com/ru
Лидер если нужно сжать фото с небольшими потерями качества.

Читайте также:  100% правильное добавление сайта в каталоги

Наилучшее сжатие JPG без потери качества — https://imagecompressor.com/
Лидер если нужно сжать фото без потери качества.

Я традиционно уже несколько лет пользовался привычным tinypng.com если мне нужно был быстро сжать несколько файлов, но теперь, пожалуй, попробую iloveimg.com, реально качество чуть повыше, а размер при этом поменьше.

А что если сжать картинку из JPG в Webp?

Ну и не мог пройти стороной набирающий популярность формат Webp - он оставил JPG далеко позади, потому что в нем я смог получить отличное фото, практически без всяких потерь качества (я не смог отличить его от оригинала) и при минимальном размере - в 10 (!) раз меньше несжатого JPG.

Сжатие фото в PNG

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

Так и получилось.

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

сжатие фотографий PNG

Оригинальная картинка PNG — 235 Кб
(исходник)

сжатие картинок PNG

После сжатия в PNG — 64 Кб
(минимальные потери качества)

сжатие фото онлайн PNG

После сжатия в WEBP — 27 Кб
(без потери качества)

Более подробные результаты со сжатию PNG в таблице:

Номер Ссылка на сервис по сжатию фото онлайн Фото Размер, Кб Качество картинки после сжатия от 1 до 10
1 https://www.hipdf.com/ru/image-compressor сжатый png 24 1
2 https://www.websiteplanet.com/ru/webtools/imagecompressor/ сжатый png 46 3
3 https://tinypng.com/ сжатый png 64 7 :yes:
4 https://hnet.com/compress-png/ сжатый png 64 6
5 https://compressor.io/compress сжатый png 69 8
6 https://compresspng.com/ru/ сжатый png 69 8
7 https://imagecompressor.com/ru/ сжатый png 69 8
8 https://www.iloveimg.com/ru сжатый png 70 9 :yes:
9 https://imagify.io/ сжатый png 78 8
Исходник в PNG исходник png 235 10
Если всё же использовать формат Webp через https://www.online-convert.com/ru сжатый webp 27 10

А что если сжать картинку из PNG в Webp?

Аналогично как и в случае с JPG, формат Webp влегкую уделал "старичка" PNG я также получил идеальную картинку без потери качества, а уровень сжатия был недостижим ни для одного онлайн конвертера!

Выводы и итоги

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

В некоторых из них остается после обработки всё еще слишком большой размер картинок, а некоторые жмут сильно, но с большими потерями качества.

Поэтому выбор действительно толкового сервиса - актуальная задача.

Лучшие онлайн сервисы для сжатия JPG и PNG на моё усмотрение:

  • Если нужно до предела сжать JPG с почти незаметной потерей качества - https://www.iloveimg.com/ru
  • Если нужно сжать JPG вообще без потери качества - https://imagecompressor.com/ru/
  • Победитель в сжатии PNG - https://tinypng.com/ и я бы отметил https://www.iloveimg.com/ru, который отстал совсем чуть-чуть, при еще более высоком качестве сжатия PNG.

Ну а WEBP при своём идеальном качестве влёгкую уменьшал размер фото более чем в 2 раза после самого крутого конвертера (для формата PNG), и в десять раз, если сравнить с необработанным изображением.

Так что если ваша задача - сжатие фото онлайн без потери качества, то я бы рекомендовал сжимать сразу в Webp, тем более, что в CMS WordPress это можно делать автоматически (интересно как - читайте тут), а также рекомендую почитать все способы как увеличить скорость загрузки в Google Page Speed своими руками.

Полезные цитаты: Сегодня я богат именно благодаря тому, что я сделал в свободное время (Р.Кийосаки)

Блог — Сергея Арсентьева 📈
image
Сергей Арсентьев
Всего материалов на сайте: 239
Активных комментариев: 3 500
Работает онлайн: 10.6 лет
Читателей за это время: 2 465 838
Я в соцсетях —
Фото
Бесплатный видеокурс для начинающих. Что такое фриланс, можно ли на нем зарабатывать и сколько?
Бесплатно Подробнее
Фото
Бесплатная мини книга для тех, кто хочет заказать сайт, но растерялся во множестве CMS и вариантов выбора.
Бесплатно Подробнее
Фото
Пошаговый видеокурс "Как работать в Опенкарт" с уроками по добавлению товаров и статей.
Добавить свой комментарий