Как правильно оптимизировать изображения под требования Google и других поисковиков

В этой статье на живом примере одного из сайтов, мы с помощью онлайн ресурса Compress Jpeg будем оптимизировать изображения в соответствии с требованиями Google. 

Зачем нужно правильно оптимизировать картинки. Увеличиваем скорость загрузки сайта

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

Наверное все знакомы с сервисом PageSpeed. Данное детище Google, кроме того, что показывает скорость загрузки, дополнительно четко указывает на все проблемы и дает рекомендации по их исправлению. И если Вы используете его, то знаете, что в 99% случаев он ругается на изображения.

Даже не стоит говорить, что когда Вы заливаете на сайт картинки, Вы должны изначально их оптимизировать. Я часто встречаюсь с тем, что на странице присутствуют изображения весом в 4 – 5 Мб с просто огромным разрешением в 5 – 6 тысяч. Зачем это делать, разрешение большинства современных мониторов в среднем становит от 1024 до 2048. Это бесполезно и даже вредно.

Если Вы предварительно обрабатываете картинки в фотошопе, уменьшаете их качество и тем самым вес – честь и хвала Вам. Но даже такой способ не гарантирует, что PageSpeed не будет советовать оптимизировать изображения опять.

Так вот, на живом примере я хочу показать, как правильно оптимизировать изображения, увеличить скорость загрузки и больше никогда не видеть рекомендации PageSpeed по этому поводу. Начнем!

Оптимизация изображений с помощью Compress Jpeg

1. Проверка сайта на скорость загрузки

В качестве опытного образца я взял сайт нашего клиента туроператора «АСТА», который сейчас в разработке. Берем любую страницу с изображениями и проверяем её через PageSpeed. И вот он показывает нам такую картину:

PageSpeed Mobile

PageSpeed PC

Мда, ситуация не просто плохая – она ужасная. На странице присутствует слайдер в котором 15 изображений. Стоит сказать, что предварительно они все были обработаны в фотошопе и подогнаны под один размер 530 х 350. Окончательный вес каждой картинки в среднем от 40 до 80 кб. Но это много, и PageSpeed показывает нам следующее:

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

Он просит сжать картинки на 27% и указывает какие именно, в нашем случае – все! Можно опять вручную обработать все картинки в фотошопе, что займет много времени и приносит мало удовольствия. И в конце мы можем столкнуться с той самой проблемой.

2. Оптимизация изображений

Чтобы избежать лишней головной боли и решить все сразу заходим на compressjpeg.com - онлайн ресурс, который позволяет пакетно обрабатывать картинки и самое главное – значения сжатия показывает в процентах. Дополнительно можно их обрезать, но для нас это не так важно.

compress jpeg

Нажимаем кнопку загрузить файлы. Выбираем нужные картинки (не больше 20 за один раз) и ждем окончания загрузки.

compressjpeg.com

Как видите, он сразу сжимает изображения и показывает процент сжатия. Он делает это автоматически. Таким образом у нас получается оптимизированная картинка с максимально возможным качеством. Делать все вручную в фотошопе - это жертвовать качеством.

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

compress jpeg сжатие изображений

В поле, которое появилось ниже, мы можем с помощью кнопки прокрутки или вручную задать необходимый процент. Слева – оригинал, справа будет отображаться сжатая картинка и сразу можно оценить ее качество, что очень удобно.

compress jpeg сжатие картинок

Но вернемся к нашей главной задаче. Картинки залиты и сразу сжаты. Нажимаем кнопку скачать все, и получаем архив со всеми изображениями. Здесь есть небольшой минус. В названии каждой картинки добавлено «-min». Поэтому его нужно будет удалить, перед тем как залить картинки на сайт, чтобы сохранить правильный путь. Если Вы их заливаете впервые – то это неважно.

Оптимизация изображений через compress jpeg

Результат

И так, картинки перезалиты, снова анализируем страницу через PageSpeed.

Для мобильных устройств

PageSpeed сорость сайта на телефоне

Со значения 57 стало 75. Неплохо, скорость загрузки увеличилась и Google посчитает, что страницы оптимизированы под мобильные устройства. PageSpeed больше не просит сжать изображения.

Для компьютеров

PageSpeed скорость сайта на компьютере

Значения с 44 стало 73 – отличный результат. Но Вы уже видите, что в графе «исправить обязательно» опять висит требование оптимизировать изображения. Но ситуация здесь немного другая. PageSpeed говорит, что нужно в первую очередь изменить размер картинки.

PageSpeed изменения размера

Это вызвано именно особенностью работы сайта. Как я уже говорил, здесь присутствует слайдер изображений.

Сладйер на сайте

Справа картинки отображаются в маленьком размере, и PageSpeed говорит, что нужно подогнать картинки именно к такому значению. Картинку 530 х 350 нужно уменьшить до 150 х 100. Это неприемлемо, поскольку это слайдер и при клике на изображении, оно должно отображаться в большом размере. Если мы его уменьшим, то при нажатии будет показываться ужас в квадратах с пикселей.

Слайдер – это уже ошибки SEO на стадии создании сайта. Не рекомендуется использовать его на сайте. Почему – Вы сами видите. Но иногда без него не обойтись, и приходится постоянно сталкиваться с такими проблемами.

Делаем выводы

Compress Jpeg – отличный ресурс. Он решает проблемы со сжатием картинок относительно требований PageSpeed и делает это вполне успешно. Он простой, быстрый и удобный. Процесс сжатия картинок от загрузки на compress jpeg и обратно на сайт – это дело одной минуты. С его помощью мы увеличили скорость загрузки мобильной версии сайта на 18, а десктопной – на 29.

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

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

Загружая изображения на сайт, предварительно проганяйте их через Compress Jpeg. Картинки сразу будут оптимизированными и проблемы с PageSpeed не должны Вас беспокоить в будущем.

Смело пользуйтесь Compress Jpeg. Веб-студия Sitepark рекомендует!