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

19 декабря 2017 - Feodor
Озаботился я давеча "пузомерками" одного своего сайта на 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. По просьбам трудящихся из другой темы форума добавил архив с примерами сжатых картинок. Их осталось мало, все поудалял после тестов. Несколько штук сжал только что до комплекта.
Понравилась запись? Поделитесь ею в соцсетях!


Instantcms.ru


Похожие статьи:

Новости разработчиковКомпонент Сервис Ёлок ver.1.1

Новости разработчиковЗаменяем название компонента, url и т.д. на примере FAQ

Новости разработчиковЗагрузка расширений через админку

Новости разработчиковАнонс модуля "Поощрение пользователей"

Новости разработчиковМодуль аккардион статей

Рейтинг: 0 Голосов: 0 59 просмотров
Комментарии (0)

Нет комментариев. Ваш будет первым!