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

Автор: | 30.08.2017

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

Содержание
Баланс размера и качества
1. Изменяем размер
2. Сжимает фотографии
JPEG, PNG или GIF: как сделать правильный выбор?
Будьте осторожны! Декоративные элементы дизайна
Seo оптимизация картинок для сайта
Первый шаг. Заполняем альт теги
Правила заполнения тега альт
Второй шаг. Title и ЧПУ
Третий шаг. Подписи под изображением
Где лучше размещать картинку?

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

Баланс размера и качества

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

Соответственно, для быстрой передачи графики по сети, необходимо добиться уменьшения её веса. Есть два способа:

  • уменьшение размера;
  • сжатие фотографии с незначительной потерей либо вовсе без потери качества.

1. Изменяем размер

Ширина основной колонки большинства блогов не превышает 600-900 пикселей. Поэтому, не имеет смысла вставлять картинки большего размера. Чаще всего ваш движок способен сам автоматически уменьшать слишком большое графическое поле до приемлемой ширины. WordPress так и сделает. Однако лучше самому вручную провести масштабирование. Это связано с тем, что с сервера для пользователей будет выгружаться оригинал высокого разрешения, а он весит немало.

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

optimizaciya izobrazheniy wordpress

Пример визуального представления миниатюр. Для показа восьми товаров потребовался маленький блок высотой всего 300 пикселей и шириной 650 пикселей.


Этот способ особенно хорош для владельцев интернет-магазинов с большим ассортиментом. Миниатюры быстро загружаются, занимают минимум места на странице, а при необходимости позволяют покупателю разглядеть предмет во всех подробностях.

2. Сжимаем фотографии

Рисунки с одинаковой шириной и высотой могут существенно отличаться по объёму. Одни весят пару десятков килобайт, другие – в сотни раз больше. На помощь приходит изменение разрешения.

Для уменьшения размера графического файла используйте программу Photoshop. Если его у вас нет, не расстраивайтесь. Неплохим аналогом станет бесплатный Gimp. Также к вашим услугам различные онлайн сервисы. У каждого из них есть свои полезные фишки. В некоторых программах доступна пакетная (массовая) оптимизация картинок. Потоковая обработка заметно ускоряет подготовку фото к загрузке на web-сайт.

Сколько в идеале должен весить обработанный файл? Стремитесь сжимать графику до 50-70 килобайт. Конечно, это не всегда легко. Особенно в тех случаях, когда хочется разместить крупные красочные фото. На итоговый результат влияет не только выбор программы для оптимизации изображений, но и формат, в котором будет сохранён файл-рисунок. Остановимся на этом моменте подробнее.

JPEG, PNG или GIF: как сделать правильный выбор?

Для сравнения откроем одно и то же изображение в Photoshop и сохраним его с параллельным сжатием во всех трёх форматах.

JPEG

Широко распространённый формат, применяемый для графических объектов. Файлы легко сжимаются до минимальных размеров практически без потери качества.

optimizaciya kartinok dlya sayta v formate jpeg

PNG

Преимуществом png-формата является обеспечение прекрасного качества изображения после многократных сохранений. Однако обратите внимание на размер. Он существенно выше, чем у картинки в jpg-формате.

optimizaciya foto dlya sayta v formate png

GIF

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

programma dlya szhatiya izobrazheniy v formate gif

По соотношению качество/размер, на мой взгляд, лидирует JPEG.

Будьте осторожны! Декоративные элементы дизайна

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

При работе с декоративными элементами:

  • Проверяйте их размер. Неоправданно тяжёлые блоки без сожаления убирайте;
  • Применяйте каскадные таблицы стилей во всех случаях, когда можете это сделать;
  • Тестируйте свой ресурс на скорость загрузки.

Seo оптимизация картинок для сайта


Зачем нужно оптимизировать графический контент? Затем, чтобы привлечь чуть больше посетителей. Глобальных изменений ждать не стоит (если, конечно, вы не продаёте товар, который люди ищут, в том числе, и по фото). Но некоторый прирост трафика отметить можно.

Первый шаг. Заполняем альт теги


Alt lags – это текстовое представление картинки, демонстрируемое пользователю до тех пор, пока не подгрузилось само фото. Данный атрибут также способен приносить пользу при сео-оптимизации вебресурса. Так, в качестве альт-тегов можно использовать продвигаемые ключевые запросы. Важно, чтобы они были релевантны подобранному изображению.

Правила заполнения тега альт

  • используйте поисковые запросы;
  • пишите тег латиницей;
  • не перестарайтесь с длиной. К примеру, альт тег «купить квартиру в подмосковье скидки рассрочка акции взнос материнским капиталом продажа в ипотеку» не слишком удачный. Постарайтесь уложиться в 55-60 символов;
  • не стоит спамить. Одного ключа вполне достаточно;
  • тег должен соответствовать картинке. Если на фото изображена Скарлетт Йоханссон, не пишите в Альт размытую фразу «модные причёски 2017». Более удачным окажется прицельный вариант «причёска Скарлетт Йоханссон на премии MTV»;
  • для декоративных элементов заполнять теги не нужно. Поисковые системы расценивают такой ход как переоптимизацию и снижают позиции ресурса в выдаче.

Второй шаг. Title и ЧПУ

Заголовок должен отличаться от тега Alt, но также писаться латиницей. Title предоставляет дополнительную информацию поисковикам о размещённом изображении.

По возможности прописывайте человекопонятный урл. К примеру, если нарисована моторная лодка, то и пишите в названии motornaya-lodka.jpeg либо motorboat.jpeg. Такие url несут в себе больше полезной информации и для человека, и для поисковика. Ведь, например, 14789.png совершенно не информативен и не способствует ускорению поиска.

Третий шаг. Подписи под изображением

Применяются для предоставления дополнительных сведений пользователю. Наибольший эффект оказывают на страницах с большим объёмом графики и малым процентом текстовой информации, например, в каталогах интернет магазина.

Подпись также может содержать продвигаемый ключ.

Где лучше размещать картинку?

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

Поисковики становятся умнее с каждым днём. Они уже могут выделять отдельные объекты на изображении. Но для лучшего анализа рисунка требуется текстовый контекст. Поэтому релевантное сочетание графики и текстового блока встречает положительный отклик у поисковых ботов. Дополнительным плюсом станет близкое расположение к рисунку заголовков h2-h5.

Подведём итоги

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

Желаю вам больше удачных публикаций и качественных рисунков.