Содержание
- Почему так важно оптимизировать картинки
- Ключевые параметры оптимизации
- Формат картинок
- Качество иллюстраций
- Размер изображений
- Атрибут alt
- Атрибут title
- Размещение картинок
- Как сжать изображение без потери качества
Изображения на сайтах полезны не только для пользователей, но и для SEO. При правильном подходе к оптимизации изображений вы можете получать качественный трафик из Яндекс.Картинок или Google Images.
Рассказываем, как это сделать.
Почему так важно оптимизировать картинки
Человек избирательно воспринимает информацию, размещенную на странице. Он не всегда смотрит на текст и внимательно вчитывается в него - обычно он просто пробегает глазами по странице, то есть осуществляет быстрое визуальное сканирование. Особое внимание человек уделяет графическим элементам - они выделяют информацию, подчеркивают важные сведения и просто привлекают внимание. Учитывая такую особенность поведения посетителей, поисковые системы разработали ряд критериев для анализа изображений.
Они сводятся к улучшению качества контента в результатах поиска и удовлетворению запросов пользователя. Поэтому кроме наличия изображений на сайте, важно, чтобы картинки быстро загружались, были привлекательными, информативными и качественными.
Иными словами, картинка может стать для сайта счастливым билетом на первую страницу выдачи результатов поиска достаточно просто правильно ее оптимизировать.
Ключевые параметры оптимизации
Вам потребуется работать с тремя основными параметрами картинок:
- форматом,
- качеством,
- размером.
Формат картинок
Google индексирует изображения форматов BMP, GIF, JPEG, PNG, WebP, SVG. При выборе ориентируйтесь на такие рекомендации:
- JPEG - оптимальный вариант для загрузки фото.
- PNG - способ оформления графиков (то есть сделанных дизайнером отрисовок).
- SVG - векторный формат.
- WebP, JPEG-XR - сравнительно новые варианты. Они легкие, но поддерживают форматы не все браузеры. Так JPEG-XR корректно грузится только в IE, WebP - в Опере, Хром и устройствах на ОС Android. Выбирая такие форматы, обязательно нужно учитывать факт корректности загрузки и останавливаться на тех вариантах, которые будут доступны вашей целевой аудитории.
В поисковой системе Яндекс лучше всего индексируются картинки JPEG, GIF, PNG. Дополнительно учтите такой момент - картинки, загружаемые на странице сайта через скрипт, поисковиком Яндекс не индексируются вообще.
Качество иллюстраций
Графические материалы, которые вы разместили на сайте, должны обладать адекватным качеством. Посредственная цветопередача, лесенки из пикселей, отсутствие фокуса снижают привлекательность изображений для пользователя.
Некачественной считается картинка, не соответствующая своему описанию или несвязанная по смыслу с текстом страницы.
Размер изображений
Разрешение изображений и их размер оказывают существенное влияние на скорость загрузки страниц. Этот параметр учитывается поисковыми машинами при ранжировании. Обилие графического контента может существенно снизить скорость работы отдельных страниц или всего сайта.
Изображения лучше создавать в том размере, в котором они будут представлены на сайте.
Браузеру будет легче сканировать контент страниц, если в CSS прописать ширину и высоту изображения. Retina-дисплеи Apple, предъявляют повышенные требования к качеству картинок. Изображения стандартного разрешения могут выглядеть размытыми на MacBook и iMac последних поколений. Для дисплеев с ретиной добавляйте изображения в размере 2x и настройте отображение разных размеров одного и того же изображения для разных экранов.
Атрибут alt
Оптимизаторы знают, насколько важен alt для корректной индексации сайта. Иногда этот атрибут используется неверно. Стремление указать в нем максимальное количество ключей приводит к игнорированию страницы роботами Yandex и Google. Обилие слов из семантического ядра сайта воспринимается поисковыми системами как спам.
Обратите внимание, атрибут alt формирует описание изображения, которое отображается на странице, если фотография по каким-то причинам не загружается. Оптимальное описание умещается в 125 символов. Ключи следует вписывать максимально естественно. Не стоит использовать больше одного запроса, по которому будет продвигаться страница. Например, для страницы конкретной модели смартфона используйте альт - «Samsung Galaxy J3 (черный)», а не «купить самсунг гелакси j3 в Челябинске недорого оригинальный с гарантией»
Представьте реакцию посетителя сайта, который увидит вторую надпись вместо фото, которое не загрузилось из-за нестабильного соединения с интернетом.
Атрибут title
У многих начинающих оптимизаторов возникает вопрос: зачем нужно заполнять тайтл при наличии альта? Разница между этими атрибутами существенна, текст, размещенный в тайтле, появляется на странице сайта при наведении курсора мыши на картинку. С пользовательской точки зрения это повышает юзабилити каждой страницы. Сейчас поисковики не учитывают title при ранжировании, однако, когда в дело вступает юзабилити можно сказать наверняка, что в скором будущем они будут обращать внимание на этот атрибут. Поэтому не стоит игнорировать его.
Размещение картинок
Для корректной привязки изображений к вашему сайту храните их на своем домене или одном из поддоменов. Иначе пользователи не смогут перейти на целевой сайт из результатов поисковой выдачи. Ссылка будет вести их на тот ресурс, где хранятся изображения. Эта ошибка распространена среди начинающих контент-менеджеров и SEO-оптимизаторов.
Как сжать изображение без потери качества
Существует целый набор инструментов для сжатия изображений без потери их качества. Популярные облачные сервисы:
- Compressor - бесплатная площадка, которая позволяет выполнять операции с картинками с учетом лимитов по размерам загруженных файлов (ограничение установлено в 10 МВ). Есть способы для сжатия изображений без потери качества или с ухудшением четкости. Без потери качества изменить размеры и массу можно только в форматах JPG, PNG. Сжатие выполняется до 90%.
- Kraken - веб-интерфейс для работы с одним файлом или несколькими одновременно. Доступна опция оптимизации изображений - нужно ввести код url сайта, после вам станет доступен архив со сжатыми картинками. Также в сервисе предусмотрен полезный инструментарий для оптимизации графики вроде корректировки размеров картинок, настроек API для интернет-ресурсов и плагинов платформ WordPress, Magento.
- TinyPNG и JPEGMini - сервисы, в целом аналогичные по функционалу предыдущим, но сжатие они осуществляют с потерями. То есть новые картинки будут иметь измененное качество.
- Существует решение ImageOptim для ОС Mac. Программа настроена на сжатие изображений без потерь в качестве по умолчанию. ImageOptim работает со всеми популярными форматами - это JPEG, SVG , GIF, PNG. Интерфейс простой и удобный, сжатие доступно для набора файлов одновременно. ImageOptim удаляет метаданные в наборе - речь о серийном номере карты и местоположении GPS. Публикуйте картинки без использования лишней информации, которая добавляет графике дополнительный вес. Дополнительный плагин GIMP «Save for Web» позволяет сохранить обрабатываемое изображение с минимальными размерами и приемлемым качеством.
Доступная опция сжатия на сервере:
- Gzip: Настройте веб-сервер для сжатия JPEG-файлов в формат Gzip.
- PageSpeed: Для Nginx и Apache доступен модуль PageSpeed для сжатия данных на уровне сервера. Если возникают вопросы, сложности с установкой, поищите мануалы в сети.
Чтобы отслеживать, анализировать размеры картинок, используйте инструменты Pingdom либо PageSpeed Insights, доступные онлайн. Можете использовать сразу обе программы. Если нужно выбрать одну из них, рекомендуем именно Google Pagespeed Insights. Софт не вызывает сложностей в применении, даже новые пользователи быстро разбираются с его функционалом.
Вместо заключения
Оптимизация фото перед публикацией на сайте - обязательный аспект эффективного SEO. Начните с определения оптимального размера картинок, не загружайте слишком большие изображения. Для сжатия без потери качества используйте онлайн-сервисы. Большинство их них бесплатны, а их освоение не потребует больного количества времени.
Помните о том, что фото должны оставаться уникальными. Заимствование изображений из открытых источников будет препятствовать продвижению.
Корректно заполняйте атрибуты alt и title. Окружайте фотографии качественным и полезным текстом. Не забывайте про семантическую разметку. Оптимизация каждой фотографии отнимет у вас несколько минут. Представьте, сколько времени вы потратите, чтобы оптимизировать тысячи изображений. Если хотите решить эту задачу быстро, уделяйте время каждой фотографии во время публикации.
