Google PageSpeed Insights и качество сжатия картинок 2.X

1528
Озаботился я давеча "пузомерками" одного своего сайта на InstantCMS 2 в Google PageSpeed Insights и обнаружил, что Гуглу сильно не нравится размер картинок при сжатии 90%, используемом в Двойке по дефолту. Взял я несколько картинок с этого сайта и начал экспериментировать с их качеством в разных пресетах от 65 до 90 процентов, а потом подставил пересжатые картинки на сайт, чтобы посмотреть реакцию Гугла.
И вот какие выводы сделал.
Google PageSpeed Insights и качество сжатия картинок

Размер картинок с качеством 90% не проходит тест PageSpeed ни для каких пресетов - однозначно. Значит нужно использовать более сильное сжатие. Минимальное качество, которое пропускает Гугл - 85%.
При сжатии ниже 80% становятся заметны артефакты на границах, полосы на градиентах и шум на заливках.

Поэтому я у себя проставил сжатие таким образом:
Для полных картинок, показывающихся во всплывающем окне явой - оставил 90%. На дефолте это пресет big.
Для пресетов с размерами в районе normal поставил 85%. Это сжатие сохраняет более-менее приличное качество и уже успешно проходит тест.
Аналогичное сжатие выставил для картинок в редакторах.
Для аватарки и превьюшки small - 80%. На таких размерах ухудшение качества будет видно только при увеличении рисунка, что обычно никто не делает.
На мелких размерах картинок Гугл требует более сильного сжатия, так что приходится использовать значения меньше 80%. Для аватарки micro я поставил 70%. При этом значении начинают размываться артефакты в заливках и фонах, границы становятся контрастнее. Из-за этого визуально изображения выглядят чётче, чем при 75%, хотя их качество хуже. Но на "микро" никто всматриваться и не будет, тут главное именно визуальная идентификация, а не детали.
На скрине выше как раз эти значения качества.

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

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

P.S. По просьбам трудящихся из другой темы форума добавил архив с примерами сжатых картинок. Их осталось мало, все поудалял после тестов. Несколько штук сжал только что до комплекта.
Изменяем автора материала в ленте активности | Повтор кода подтверждения (хак)
Комментарии (13)
Олег Васильевич я 16 декабря 2017 в 15:25 0
Спасибо, поиграемся!
Sonat 16 декабря 2017 в 15:45 0
Спасибо.
В закладки!


Зы
Не мог понять чего ему надо - аватарка 2 кб, а он грит мол, не оптимизировано и мол влияет на скорость,
сожми и выиграй 500 байт
facepalm
WebMan 16 декабря 2017 в 22:20 +1
Сам ржу. У меня на размере аватарки в 1100 байт требует сжатия ещё в 300. Гугл - он такой... своеобразный... smile
Kreator 16 декабря 2017 в 22:21 +1
А один прозрачный пиксел в качестве 100% он предложит сжать?
WebMan 16 декабря 2017 в 22:26 +2
Скорее он предложит его вообще убрать smile
Kreator 16 декабря 2017 в 22:33 0
Или в полпикселя сделать с качеством 85%
Jestik 16 декабря 2017 в 19:29 +4
Гугл прошлым живет что ли, сейчас уже почти в каждой деревне 3G, никто и не замечает как те картинки грузятся
Николай (asd43) 16 декабря 2017 в 21:27 0
Спасибо за эксперименты и выводы!
WebMan 16 декабря 2017 в 23:15 +2
По просьбам трудящихся из другой темы форума добавил в топик ссылку на архив с примерами сжатых картинок.
Мирослав 17 декабря 2017 в 09:04 0
Помню, тестировал сжатие, пришёл к выводу что оптимально 88%. Здесь визуально картинка не теряет в качестве, но размер ощутимо меньше чем 90%
Александр 24 декабря 2017 в 23:55 0
v класс!
Ris 25 декабря 2017 в 00:14 0
Однажды обнаружил, что на сайте полно картинок размером по несколько метров.
Слил все на комп, шваркнул Irfanview с ограничением максимального размера 300кб и залил обратно.
Размер папки upload уменьшился втрое, а разницы в качестве не заметил никто. Я в том числе...
Sonat 25 декабря 2017 в 03:23 0
Если свой сервер, то можно все прям на нем все сделать.
https://developers.google.com/speed/docs/insights/OptimizeImages - тут гугл рекомендует две утилиты: jpegtran или jpegoptim
Есть под разные ос.