Зачем нужно оптимизировать изображения
- "Тяжелые" изображения увеличивают скорость загрузки страницы. Поисковые роботы этого не любят и могут пессимизировать страницу в выдаче.
- Из-за долгой загрузки страницы ухудшается поведенческий фактор - пользователь просто уходит со страницы, не дождавшись появления на ней информации. Соответственно растет процент отказа, что тоже сказывается на результатах поиска.
- Низкокачественные изображения, а то и вовсе их отсутствие, не вызывают доверия к сайту, что тоже влияет на поведенческий фактор.
Требования поисковых систем к изображениям
Расширения
Гугл индексирует изображения с расширениями BMP, GIF, JPEG, PNG и WebP, SVG. Яндекс более избирателен. Для него больше подходят PNG, JPEG, GIF и WebP.
Помимо выбора формата нужно знать, что Yandex не воспринимает динамически загруженный контент (Flash).
Качество
Чтобы оптимизировать графику для поисковиков, нужно придерживаться оптимального соотношения веса и разрешения. Фото на сайтах предназначены в первую очередь для пользователей, а не для поисковых роботов. Поэтому они должны быстро загружаться и быть качественными. Желательно, чтобы графический контент был тематическим, соответствовал контексту. В противном случае изображение считается некачественным. Это негативно сказывается на ранжировании.
Разрешение и вес
Из нескольких одинаковых картинок в поисковой выдаче первые позиции занимают те, что имеют максимальный размер и разрешение. Это не значит, что на сайте стоит использовать фото большого размера. Лучше прибегнуть к использованию миниатюры, а оригинал открывать при клике на превьюшку. Файлы с разрешением менее 100 пикселей могут восприниматься как часть дизайна, поэтому они не будут видны в результатах поиска. Для того чтобы узнать количество px, воспользуйтесь любым графическим редактором. Например, PhotoShop, Sketch, Illustrator. Также для этого есть специальные онлайн-сервисы.
Не применяйте каскадные таблицы стилей (CSS) для изменения размера фотографий. Используя стили, вы не изменяете фактический размер изображения. Картинка сохранит свой вес и будет загружена полностью. Если таких файлов много, HTML-страница загружается медленно и пользователь может закрыть её, не дождавшись полной загрузки. Google и Яндекс учитывают способ сжатия, и считают использование для этого CSS недопустимым.
При таком подходе длительное время загрузки сайта (должно быть ниже 5 секунд) свидетельствует о низком качестве страницы. Посетители просто уходят, не дождавшись появления на ней информации. Это особенно критично для лендингов - графика играет решающую роль на посадочной странице и должна быть приятной для пользователя, цеплять его взгляд. В ином случае, вы проиграете конкурентам в выдаче.
Следите за качеством фото, скоростью их загрузки. Показатели должны быть максимально близки к идеалу. Это прямым образом влияет на лидогенерацию, конверсию в клиента. А значит, и на доход.
Выбор формата
Для разных целей на странице нужно подбирать свой тип изображений. Каждый имеет разную степень оптимизации.
Не ошибитесь с выбором:
- PNG - элементы дизайна.
- JPEG - растровая графика.
- GIF - для анимации.
- SVG - векторная графика.
Самые популярные сервисы и программы по оптимизации изображений
Рекомендуем использовать в работе следующие программы и сервисы. С ними оптимизация не отнимет много времени.
Программы: преимущества и недостатки
Photoshop
- "+" Помимо известных возможностей редактирования, контент-менеджеру в работе пригодится команда Save for Web (вызывается комбинацией клавиш Alt + Ctrl + Shift + S). Вкладка «4-Up» покажет три варианта преобразования фото для сайта.
- "+" Довольно просто изменить формат, ширину и высоту изображения.
- "+" Можно посмотреть, как будет выглядеть фото на сайте.
- "-" Сжатие и оптимизация картинки для Web существенно ухудшает ее качество.
- "-" Нет пакетной обработки.
Но главное здесь заключается в том, что PhotoShop - профессиональная программа и оптимизация ее главной задачей не является.
FastStone Image Viewer
- "+" Не только сжимает фото по выставленным параметрам, но и меняет на заданное имя названия файлов. Функционал также дает возможность изменить размер, добавить водяной знак, обрезать и отредактировать картинки.
- "+" Есть пакетная обработка.
Как работает пакетный режим. Открываем в программе папку с изображениями, требующими оптимизации, и жмем F3. В открывшемся окне выбираем нужные и кликаем «Добавить».
Ставим галочку напротив пункта «Изменить настройки» и нажимаем кнопку «Дополнительно». Далее можно:
- задать параметры только для ширины или высоты и программа автоматически уменьшит все снимки, сохраняя их пропорции;
- выставить вручную ширину и высоту «В пикселах». При необходимости можно снять галочку сохранения пропорций.
Едва ли не главный минус Fast Stone - вероятность ухудшения качества снимков. Поэтому перед тем как что-либо изменять, нажмите на кнопку предварительного просмотра. Так вы сможете увидеть, что получится на выходе, и при необходимости скорректировать настройки.
Как пакетно поменять названия изображений.
Ставим флажок напротив «Менять имя». (Кнопка со знаком вопроса подскажет расшифровку символов, которые нужно применить).
На практике можно обойтись всего двумя - *, #:
Пишем общее название для всех картинок и для их автоматической нумерации ставим решетку (#). Например, name# или name_#. Соответственно всем фото будут присвоены названия вида: name1.jpg (name_1.jpg), name 2.jpg (name_2.jpg), name 3.jpg (name_3.jpg).
Когда нужно создать уменьшенное изображение с сохранением исходного файла (сделать превью) в поле замены имени введите: *_sm или *_thumb. Где звездочка – название исходного файла.
Перед тем, как нажать кнопку «Старт», не забудьте выбрать формат и папку для оптимизированных файлов («Выходной формат» и «Выходная папка»).
Screaming Frog Seo Spider
Эта программа будет полезна для определения веса уже размещенных на сайте картинок. Его можно посмотреть во вкладке «Images», столбце «Size».
Screaming Frog поможет за несколько простых шагов найти и конкретную страницу сайта, где находится картинка, чтобы без труда заменить ее после оптимизации.
- В таблице «Address» кликните на нужную ссылку.
- Ниже выберите вкладку «Inlinks». В поле «From» и будет ссылка на ту страницу, где размещено изображение.
- Открыть страницу можно, кликнув «Open From in Browser».
Сервисы: плюсы и минусы
tinypng.com - (бесплатный)
- "+" Пакетное сжатие изображений без потери качества. Осуществляется за считанные секунды.
- "+" Удобный и интуитивно понятный интерфейс. Достаточно перетащить файлы из любой папки или «рабочего стола» прямо на страницу.
- "+" Картинки можно сохранять по отдельности или все сразу, кликнув «Download All». На компьютер скачается архив со сжатыми файлами.
"-" За один раз получится оптимизировать не больше 20 фото. Для обработки последующих изображений придется покупать подписку или каждый раз обновлять страницу Tinypng.
imagecompressor.com/ru/ - optimizilla.com (бесплатный)
- "+" Аналог предыдущего сервиса по функционалу и возможностям с сохранением высокого качества исходных данных.
- "-" Также имеет ограничения по количеству в 20 штук.
- "-" После сжатия файлы переименовываются.
iloveimg.com/ru - (бесплатная)
- "+" Многофункциональный сервис, позволяющий:
- пакетно сжимать;
- массово преобразовывать в нужный формат;
- менять размер в пикселях или процентах;
- обрезать;
- ставить водяной знак;
- править в фоторедакторе.
- "-" После сжатия сохраняется качество и пропорции изображений.
- "-" Ограничение в 60 изображений для пакетной обработки, что одновременно является и плюсом по сравнению с предыдущими сервисами.
Итоги
Обязательно сжимайте картинки и следите за их размером. Ведь фото - один из аспектов успешного продвижения сайта.
При оптимизации помните о следующем:
- Специализированные программы или сервисы существенно сэкономят ваше время.
- Выбирайте корректные форматы файлов.
- Лучше, если фото сделаны вами. Или куплены в стоках.
- Избавляйтесь «лишнего веса» изображений.
- Включите программное сжатие на сервере.
- Не забывайте прописывать теги alt.