Озаботился я давеча "пузомерками" одного своего сайта на 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. По просьбам трудящихся из другой темы форума добавил архив с примерами сжатых картинок. Их осталось мало, все поудалял после тестов. Несколько штук сжал только что до комплекта.
И вот какие выводы сделал.
Размер картинок с качеством 90% не проходит тест PageSpeed ни для каких пресетов — однозначно. Значит нужно использовать более сильное сжатие. Минимальное качество, которое пропускает Гугл — 85%.
При сжатии ниже 80% становятся заметны артефакты на границах, полосы на градиентах и шум на заливках.
Поэтому я у себя проставил сжатие таким образом:
Для полных картинок, показывающихся во всплывающем окне явой — оставил 90%. На дефолте это пресет big.
Для пресетов с размерами в районе normal поставил 85%. Это сжатие сохраняет более-менее приличное качество и уже успешно проходит тест.
Аналогичное сжатие выставил для картинок в редакторах.
Для аватарки и превьюшки small — 80%. На таких размерах ухудшение качества будет видно только при увеличении рисунка, что обычно никто не делает.
На мелких размерах картинок Гугл требует более сильного сжатия, так что приходится использовать значения меньше 80%. Для аватарки micro я поставил 70%. При этом значении начинают размываться артефакты в заливках и фонах, границы становятся контрастнее. Из-за этого визуально изображения выглядят чётче, чем при 75%, хотя их качество хуже. Но на "микро" никто всматриваться и не будет, тут главное именно визуальная идентификация, а не детали.
На скрине выше как раз эти значения качества.
Пересжатие большей части картинок на главной странице сразу дало дополнительные пару "попугаев" в тесте Гугла. Остальные картинки — это дефолтные иконки, которые я позже заменю на FontAwessome или что-то подобное, чтобы полностью выполнить пункт про сжатые картинки и добавить "попугаев".
Поскольку скорость работы сайта — один из важных критериев выдачи в поисковиках, то даже несколько баллов иногда могут сыграть роль, особенно, если как раз именно их не хватает до следующего уровня. Потратить минуту и изменить цифры в настройках сайта — на мой взгляд, стоит этого выигрыша.
Может быть кому-то эта инфа будет полезной. Или, если у вас есть поправки и дополнения — с интересом выслушаю.
P.S. По просьбам трудящихся из другой темы форума добавил архив с примерами сжатых картинок. Их осталось мало, все поудалял после тестов. Несколько штук сжал только что до комплекта.
Реклама #
Олег Васильевич я 7 лет назад #
Sonat 7 лет назад #
В закладки!
Зы
Не мог понять чего ему надо - аватарка 2 кб, а он грит мол, не оптимизировано и мол влияет на скорость,
сожми и выиграй 500 байт
WebMan 7 лет назад #
Kreator 7 лет назад #
WebMan 7 лет назад #
Kreator 7 лет назад #
Jestik 7 лет назад #
Николай (asd43) 7 лет назад #
WebMan 7 лет назад #
Мирослав 7 лет назад #
Александр 6 лет назад #
Ris 6 лет назад #
Слил все на комп, шваркнул Irfanview с ограничением максимального размера 300кб и залил обратно.
Размер папки upload уменьшился втрое, а разницы в качестве не заметил никто. Я в том числе...
Sonat 6 лет назад #
https://developers.google.com/speed/docs/insights/OptimizeImages - тут гугл рекомендует две утилиты: jpegtran или jpegoptim
Есть под разные ос.