Оптимизация изображений на сайте: сжатие картинокГаджеты 

Оптимизация изображений на сайте: сжатие картинок

«Оптимизация изображений — это одновременно наука и искусство. Мы можем назвать это искусством, потому что никто не может дать определенный ответ, как лучше всего сжать конкретное изображение.»

Google (Ilya Grigorik)

Если вы ведете свой персональный блог, или занимаетесь оптимизацией веб-ресурсов, то вам наверняка знакомы такие инструменты тестирования скорости загрузки сайтов, как PageSpeed Insights, Webpagetest, GTmetrix. Все они очень критично относятся к неоптимизированным изображениям, так как зачастую доля трафика для них составляет 35-65 % в общем удельном весе страницы.

Чтобы раз и навсегда разобраться в вопросе оптимизации изображений на сайте, и насколько существенно влияет оптимизация на скорость загрузки веб-ресурсов и эстетическое восприятие контента, Notagram.ru провел большое тестирование. С помощью проб и ошибок, мы решили найти ту самую золотую середину, о которой говорит самый известный Гуру компании Google по серверной и клиентской оптимизации.

Оптимизация изображений на сайте: сжатие картинок

Немного теории: позиции сайта/скорость/восприятие

Оптимизация изображений на сайте: сжатие картинок
По мнению многих, поисковые системы, учитывая скорость загрузки контента, отдают предпочтение сайтам, которые быстро загружаются. На самом деле это неправда. Вы легко можете сами в этом убедиться, если в поисковой выдаче прогоните первые результаты с помощью инструментов, оценивающих скорость загрузки ресурсов. Причем вы наверняка обратите внимание, что более релевантные и быстрые ресурсы, находятся почему-то в конце поисковой выдачи. Мы решили провести эксперимент, в ходе которого сравнивали первые 10 строк поисковой выдачи у Google и Яндекса в контексте авторитетности ресурсов и скорости их загрузки.

Оптимизация изображений на сайте: сжатие картинок

Проведя анализ 50 поисковых запросов, ради справедливости отметим, что у Яндекса все-таки наблюдается лояльность к шустрым сайтам, но при условии релевантности контента запросу. Google в своей выдаче на первые позиции ставит сайты только исходя из авторитетности ресурсов. Это прекрасно видно на итоговых графиках. Если у Яндекса кривые зависимости позиции от авторитетности ресурса и скорости загрузки более ровные, то у Google явно имеется перекос в пользу авторитетности ресурса при выдаче.

Оптимизация изображений на сайте: сжатие картинок

Так зачем же тогда заниматься оптимизацией изображений, если по факту, скорость загрузки страницы практически не влияет на место в поисковой выдаче? – спросите вы. Во-первых, оптимально сжав изображения, вы сэкономите от 30 до 70% дискового места на хостинге. Во-вторых, с оптимизированными картинками вам не нужно нагружать свой ресурс посторонними плагинами и скриптами оптимизаторами. Ну, и в-третьих, ваш ресурс будет быстрее загружаться, что большой плюс для ваших посетителей.

Что касается посетителей и визуальной привлекательности вашего медиа-контента, тут нужен некий здоровый баланс между скоростью загрузки и привлекательностью изображения. Ведь картинку можно сжать так, что она будет резать глаз и отталкивать посетителей.

Какая степень сжатия изображения самая оптимальная

Оптимизация изображений на сайте: сжатие картинок

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

Оптимизация изображений на сайте: сжатие картинок

Итак, мы исходя из рекомендаций PageSpeed Insights, Webpagetest, GTmetrix определили, что эти сервисы считают наиболее приемлемую степень сжатия исходного несжатого изображения равной 80%. Но тут есть несколько очень важных «но». Если вы работаете с изображениями, на которых много мелкой цветовой детализации, то степень сжатия лучше установить в 90%. А вот если изображения малоконтрастные и детализация неважна, то степень сжатия может быть установлена в пределах 70-60%. Все зависит от того, какую именно роль играют изображения в вашем материале.

Как и чем оптимизировать изображения для сайта

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

Теория и практика: когда точно нужна оптимизация изображений

Оптимизация изображений на сайте: сжатие картинок

К слову говоря, многие авторитетные ресурсы ограничиваются лишь 90% степенью сжатия, другие же напротив, жмут картинки до значений 60%. Определить для себя, нужна ли вашему ресурсу оптимизация изображений, можно используя следующий алгоритм:

  • Протестируйте 10-20 страниц вашего ресурса с помощью GTmetrix, найдите среднее значение «optimize images», чем оно меньше, тем хуже. Приемлемые значения: 100-90 баллов. Бывает так, что неоптимизированные изображения просто «топят» сайт на графиках Waterfall.
  • Определите, сколько места на хостинге занимает ваш медиаконтент, вычислите соотношение объема изображений к свободному месту на хостинге. Если у вас изображения оптимизированы, то придется докупить место на хостинге, а если же изображения не сжаты, то вы сэкономите на хостинге.
  • Посмотрите на возраст вашего ресурса, если он моложе года, и на GTmetrix значения «optimize images» меньше чем 80, то оптимизировать картинки нужно однозначно. И если поисковики сквозь пальцы смотрят на скорость загрузки страницы, то вашим пользователям будет приятно, когда ваш ресурс будет открываться быстрее. Как правило, после сжатия неоптимизированных изображений до 80% скорость загрузки сайта увеличивается в 2 раза и более.

Оптимизация изображений на сайте: сжатие картинок

Сложив все составляющие этого вопроса, вам будет ясно, нужно ли пережимать изображения на вашем сайте или все-таки оставить все так как есть.

Обсудить

Чуть не забыли, еще интересное

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: