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

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

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

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

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

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

P.S. По просьбам трудящихся из другой темы форума добавил архив с примерами сжатых картинок. Их осталось мало, все поудалял после тестов. Несколько штук сжал только что до комплекта.
0
Олег Васильевич я Олег Васильевич я 4 года назад #
Спасибо, поиграемся!
0
Sonat Sonat 4 года назад #
Спасибо.
В закладки!


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

Еще от автора

Хуки-хухуки: Исключаем неактивных пользователей из списков
Как иногда начинают свой монолог неопытные стендаперы: «У всех в жизни было такое …
«Расширенная отладка» для InstantCMS 2.14.1 (v.14.1.2) – большое обновление для разработчиков
Новые возможности и удобства, облегчающие разработчикам отладку компонентов и шаблонов.
Использование расширенной отладки. Часть 11. Анализ ошибок 403/404 и редиректов
Одной из неудобных задач при отладке для меня является поиск причины ошибки 403/404.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.