Приемы оптимизации изображений: как выйти в топ поиска по картинкам
Иллюстрации и фотографии, если они используются разумно, приносят пользу не только пользователям, но и для SEO. Правильная оптимизация изображений может привести к получению качественного трафика из «Яндекс.Картинок» или «Google Картинок».
Ключевым аспектом является не только размещение изображений, но и обеспечение того, чтобы поисковые системы могли интерпретировать содержимое картинок и отображать их в ответ на соответствующие запросы.
Другой важной составляющей процесса оптимизации является тщательный выбор изображений, а также оптимизация их размеров и веса файлов. Изображения должны быть высококачественными, одинаково хорошо отображаться на различных устройствах и не замедлять загрузку страницы. Все эти факторы имеют значение для поведенческих характеристик, которые учитываются поисковыми системами.
Качественные и релевантные изображения
Релевантность изображений является одним из ключевых аспектов для поисковых систем. Следует удостовериться, что иллюстрации соответствуют теме статьи.
Рекомендуется размещать изображения рядом с тем текстом, который они иллюстрируют.
Качество изображения также имеет большое значение: размытие, нечеткость или плохая обрезка картинок создают негативное впечатление о сайте и продукте.
В то же время яркие и качественные изображения положительно влияют на поведенческие и социальные факторы. Они привлекают внимание пользователей, делают материалы более кликабельными и виральными. Репост с привлекательной картинкой получит больше откликов в социальных сетях.
Иллюстрации должны поддерживать рассказ, облегчая восприятие информации: к примеру, наглядно объясняя идею или демонстрируя предмет или процесс.
Если вы представляете пользователю свой продукт (товар или услугу), целесообразно разместить качественное изображение товара или фотографию, демонстрирующую предоставление услуги (например, итоговый результат).
Полезно также использовать мини-инфографику, которая наглядно иллюстрирует полезные статистические данные, или скриншоты, помогающие пользователю разобраться с настройками интерфейса сервиса.
Создание иллюстраций на абстрактные темы (такие как SEO или личностный рост) может быть сложным с точки зрения релевантности. Тем не менее, следует по возможности избегать использования распространенных стоковых изображений и применять другие доступные методы оптимизации.
Используйте по возможности оригинальные изображения
Для SEO критически важно, чтобы изображения были оригинальными и не заимствованными с других ресурсов. Поисковые системы высоко оценивают уникальный контент, и изображения здесь не являются исключением.
Поисковые алгоритмы способны выявлять дубликаты изображений и отслеживать их источники. Поэтому, прежде чем разместить на своем сайте очередное стоковое фото, стоит тщательно обдумать это решение.
Необходимо избегать использования изображений, защищенных авторским правом. В рунете часто пренебрегают авторскими правами на фотографии, и некоторые могут найти оправдание для такого поведения, закрывая глаза на свою совесть. Однако стоит помнить, что правообладатель может обнаружить вашу копию и создать вам серьезные проблемы. Более того, важно уважать и соблюдать авторские права.
Если вы планируете использовать графический контент в коммерческих целях, рекомендуется использовать либо собственные изображения, либо те, которые обладают открытой лицензией.
Найти изображения, разрешенные для коммерческого использования, достаточно просто с помощью расширенного поиска Google.
В разделе «Google Картинки» введите нужный запрос, затем выберите «Инструменты», «Право на использование» и укажите «С лицензией на использование» (или «С лицензией на использование и изменение»). Также ознакомиться с возможностями поиска бесплатных изображений можно в справке Google.
Существует множество фотостоков, предлагающих качественные и уникальные фотографии, доступные как для коммерческого, так и для некоммерческого использования, которые можно сделать более интересными и привлекательными с помощью несложной обработки и оформления.
Проверить картинку на оригинальность можно при помощи:
- сервиса TinyEye. Здесь имеется возможность загрузить изображение или указать ссылку на него. Сервис проведет проверку и выдаст ноль результатов, если изображение окажется уникальным. В противном случае, если изображение уже используется на других ресурсах, TinyEye предоставит перечень этих сайтов.
- при помощи индекса поисковых систем. Загрузите фотографию в «Яндекс.Картинках». Если в индексе поисковика ее нет, то будет указано, что это исходное изображение.
Названия файлов важно менять на понятные
Для того чтобы поисковые системы могли предоставить пользователю подходящее изображение в ответ на его запрос, они используют все доступные текстовые элементы.
В дополнение к универсальным атрибутам title и alt, о которых будет упомянуто позже, поисковые роботы «Яндекса» и Google также обращают внимание на название загруженного файла. Оно должно соответствовать содержимому изображения. Например, если на фотографии изображен шоколадный торт, рекомендуется заменить автоматически сгенерированное камерой название на более информативное:
Правильно: shokoladnyj_tort_s_kremom.jpg.
Неправильно: DSC4980.jpg.
Перед загрузкой файлов на сайт рекомендуется переименовать их. Если возможно, в названии файла следует использовать одно из целевых ключевых слов, относящихся к данной странице.
Название изображения должно быть коротким и простым, содержать хотя бы одно ключевое слово, точно описывающее суть картинки.
«Яндекс» учитывает транслитерацию, поэтому можно свободно использовать транслит в именах файлов. Не стоит использовать кириллицу в названиях, так как поисковые роботы Google могут не распознать такие названия. Кроме того, не все системы управления контентом (CMS) работают корректно с кириллицей в названиях файлов и URL.
Название файла не окажет никакого влияния на ваших посетителей, так как они его не увидят (за исключением случаев, когда они решат скачать вашу инфографику). Однако правильное и соответствующее название может служить дополнительной информацией для поисковых систем о содержимом страницы.
Если у вас есть интернет-магазин с большим количеством фотографий товаров, можно сделать шаг вперед.
Предположим, вы реализуете мужские кроссовки Nike. Вместо обычного автоматически сгенерированного названия файла, стоит использовать более информативное название с ключевым словом.
Подумайте о том, как пользователи ищут товары на вашем сайте. Какие формулировки они используют в своих запросах? Люди, интересующиеся «эйр максами», могут вводить свои поисковые запросы по-разному:
«кроссовки Nike air max мужские»;
«мужские кроссовки air max Nike»;
«мужские Nike air max»;
«найки эйр макс»;
и так далее.
Изучите, какие шаблоны наиболее распространены (проверьте это через аналитику). Выберите тот вариант, который встречается чаще всего, и используйте его при формировании названий для изображений. Если же вы не хотите углубляться в детали, просто убедитесь, что название точно отражает содержание картинки и включает соответствующее ключевое слово.
Выбирайте правильный формат изображений
При выборе формата для изображений, как и в процессе работы с ними в целом, необходимо находить баланс между качеством и размером файла. Низкокачественное «легкое» изображение может создать негативное впечатление и привести к отказу от покупки либо к уходу пользователей с сайта. В то же время, высококачественные изображения с высоким разрешением могут замедлить загрузку страницы, что также увеличивает процент отказов. Поэтому важно достичь гармонии.
Не существует единственно правильного или идеального формата для изображений; все зависит от типа картинки и способа её использования. Наиболее распространёнными форматами являются JPEG, PNG и GIF, которые поддерживаются всеми браузерами и поисковыми системами. Реже используются форматы SVG и WebP.
Рекомендации:
Для интернет-магазинов наиболее подходящим вариантом является формат JPEG, так как он обеспечивает наилучшее качество при минимальном размере файла. JPEG также рекомендуется для больших фотографий и иллюстраций. Формат PNG следует использовать, когда необходимо сохранить прозрачность фона, поскольку другие форматы не поддерживают эту функцию. В некоторых случаях PNG может быть даже легче по сравнению с JPEG.
Для логотипов и иконок рекомендуется применять векторный формат SVG. С помощью CSS или JavaScript можно управлять изображениями в формате SVG, например, изменять их размер без потери качества. Вместо JPEG и PNG можно рассмотреть менее известный формат WebP. Он сохраняет высокое качество при меньших размерах файла. Конвертировать изображения в формат WebP можно с помощью инструмента Squoosh. Однако стоит учесть, что браузер Safari не поддерживает этот формат.
Сжимайте изображения, но в меру, чтобы не потерять в качестве
Важно отметить, что Google учитывает время загрузки страницы как один из ключевых факторов для определения ее ранжирования.
Существуют два основных подхода:
- Уменьшение размера файлов изображений на сайте.
- Оптимизация отображения изображений — использование превью.
Каков оптимальный размер файлов изображений?
Для интернет-магазинов, где на одной странице может находиться множество изображений товаров, рекомендуемый размер файла составляет до 70 КБ. Иллюстрации в статьях или других разделах сайта (не в каталоге) могут быть более тяжелыми, однако следует избегать загрузки картинок с весом в десятки мегабайт.
Как уменьшить размер изображений?
Изображение следует сжать до максимально возможного уровня без заметной потери качества, обеспечивая четкость и ясность картинки.
Размер изображения можно уменьшить при экспорте в «Фотошопе» через меню «Файл» — «Экспортировать» — «Сохранить для Web», просто уменьшив качество.
В этом процессе можно сделать следующее:
- Выбрать формат JPEG.
- Немного снизить качество (до 60-80%).
- Изменить размеры изображения.
Используйте уменьшенный вариант изображения (превью) для отображения по умолчанию. Просмотр изображения в полном размере — по клику на картинке.
Рекомендуемые сервисы для сжатия картонок:
JpegMini позволяет сократить размер изображений до 80%.
ImageOptim — это десктопная программа для Mac, которая оптимизирует изображения без потери качества. Она удаляет метаданные из файлов, такие как GPS-координаты, серийный номер камеры и данные о снимке, и поддерживает форматы JPEG, SVG, GIF и PNG.
Compressor — бесплатный онлайн-сервис, который может сжимать изображения до 90%, но максимальный размер загружаемых файлов не должен превышать 10 МБ.
TinyPNG и TinyJPG — это онлайн-сервисы для сжатия изображений в форматах PNG и JPEG. В бесплатной версии можно одновременно загрузить до 20 файлов, каждый из которых не должен превышать 5 МБ. Степень сжатия составляет более 70%.
Compressjpeg — это сервис, позволяющий загружать и оптимизировать изображения в пакетном режиме (до 20 файлов одновременно).
ImageOptimizer — онлайн-инструмент, который позволяет уменьшать размер файлов через сжатие, а также изменять размеры изображений, задав ограничения по максимальной ширине и высоте.
После оптимизации изображений рекомендуется проверить скорость загрузки страницы с помощью Google PageSpeed Insights.
Загружайте на сайт изображения точно по размеру
Например, если вы загрузили изображение размером 2500 х 1500 пикселей, но на странице оно должно отображаться в размере 250 х 150 пикселей, то, несмотря на то, что на экране показывается уменьшенная версия, для ее отображения полное изображение все равно загружается. Если на странице находится несколько таких изображений, это может значительно замедлить скорость загрузки.
Что с этим можно сделать?
Создавайте изображения в тех размерах, которые необходимы для отображения на сайте. Размер можно изменить в программе «Фотошоп». Для этого выберите пункт «Изображение» и затем «Размер изображения». Укажите требуемое значение в пикселях. Можно изменять только одно из значений (например, ширину), а высота автоматически адаптируется, сохраняя пропорции. Если «Фотошоп» недоступен, вы можете воспользоваться онлайн-редакторами, такими как PIXLR, или сервисами для обработки изображений. Например, инструмент ресайза от Slide.ly позволяет адаптировать иллюстрации под форматы для соцсетей или любой другой размер.
Адаптивность не роскошь, а необходимость
Крайне важно, чтобы изображения корректно отображались на различных устройствах, начиная от смартфонов и заканчивая retina-дисплеями с высоким разрешением. Для достижения этого необходимо, чтобы размеры изображений соответствовали размерам экранов тех устройств, с которых пользователи их просматривают.
Например, если вы загрузили фотографию с разрешением 800 х 400 пикселей:
Один пользователь может зайти на сайт с помощью смартфона, и изображение будет выглядеть приемлемо. Однако другой пользователь, использующий iMac с retina-дисплеем, столкнется с заметной потерей качества отображения картинки.
Решение данной проблемы заключается в загрузке нескольких версий исходного изображения в разных размерах, что позволит показывать соответствующие изображения для экранов с различным разрешением.
Для этих целей рекомендуется использовать атрибут srcset. С его помощью в элементе <img> можно указать различные версии одного и того же изображения, адаптированные для экранов разных размеров.
Атрибуты title и alt - обязательны для заполнения
Поисковые системы настоятельно советуют всегда заполнять атрибуты title и alt, особенно для страниц, где преобладают изображения.
Атрибут title предоставляет дополнительную информацию о картинке и отображается при наведении курсора на изображение. Атрибут alt, в свою очередь, служит текстовой альтернативой для изображений, описывая их содержание или основную идею.
Если браузер не может загрузить или отобразить изображение, он покажет текст, указанный в этом атрибуте. Важно обязательно добавлять альтернативное описание для изображений, поскольку это позволяет пользователю понять, что должно было быть отображено. Также это положительно влияет на поисковое ранжирование. Использование ключевых слов в атрибутах помогает поисковым системам определить, что изображено на картинке, и, следовательно, предлагать её в ответ на соответствующие запросы пользователей по изображениям. Альтернативное описание может также служить анкором для внутренней ссылки, если изображение ссылается на другую страницу сайта.
Вот несколько ключевых рекомендаций по заполнению атрибутов alt:
Обязательно заполняйте атрибуты alt для каждого изображения, особенно для фотографий товаров. Описание должно быть лаконичным и написанным простым языком. Если вы продаете товары, указывайте номера моделей или серийные номера в атрибутах alt. В атрибуте alt размещайте только те ключевые слова, которые непосредственно относятся к изображению.
Создайте Sitemap-файл для изображений
Для обеспечения индексации всех изображений на страницах сайта следует включить их в файл Sitemap.
Это позволит поисковым роботам обнаружить те изображения, которые в противном случае могли бы остаться незамеченными (например, если они загружаются с использованием JavaScript).
Можно создать отдельный XML-файл для изображений или внести изменения в уже существующую карту сайта.
Для сайтов на WordPress есть специальный плагин Google XML Sitemap for Images, который автоматически создает Sitemap-файл для всех изображений, которые вы загружаете на сайт.
Проставьте подписи к изображениям
Подпись представляет собой текст, который сопровождает изображение на странице. При быстром просмотре информации пользователи обращают на них внимание.
В подписи можно:
- Описать, что изображено на картинке или фотографии, особенно если это не очевидно или пояснение критично для понимания статьи в целом.
- Предоставить дополнительную полезную информацию.
- Включить ключевое слово.
Подписи к изображениям также позитивно влияют на поисковую оптимизацию (SEO). Поисковые роботы учитывают контекст, в котором размещено изображение, чтобы понять его содержание. Таким образом, текст, расположенный рядом с картинкой, играет важную роль, поскольку используется для поиска изображений.
Тем не менее, главное, о чем следует помнить, — это полезность подписи для пользователя. Включайте в подпись значимую информацию, относящуюся к изображению. Подписи особенно важны для скриншотов интерфейсов или изображений, которые могут быть трудными для понимания.
Используйте микроразметку Open Graph и Twitter Card
Микроразметки Open Graph и Twitter Cards предназначены для настройки отображения постов в социальных сетях при репосте статей с вашего сайта.
Если вы публикуете на своем ресурсе интересный и полезный контент, внедрение микроразметки является обязательным шагом.
Когда пользователи решат поделиться вашей статьей в своих социальных сетях:
- пост будет выглядеть привлекательно;
- загрузится изображение нужного размера;
- ссылка будет содержать корректный заголовок и описание.
Это крайне важно. Чем более эстетично оформлен пост со ссылкой на ваш сайт, тем выше вероятность того, что другие пользователи кликнут на него и перейдут на ваш ресурс.
Для сайтов на WordPress добавление микроразметки можно автоматизировать с помощью плагинов, таких как Yoast SEO или All In One SEO Pack.
Существуют также плагины для других систем управления контентом:
- Open Graph Meta — для OpenCart;
- Open Graph и Twitter Cards для Битрикс.
Это способствует оптимизации, так как более привлекательные репосты в социальных сетях могут привести к более качественному трафику на ваш сайт.
Для лучшего отображения в поиске использовать Schema.org
Еще один тип микроразметки, который рекомендуется применять, — это Schema.org. С помощью этой разметки вы можете четко обозначить поисковым системам, какой тип контента содержится на вашей странице.
Основное влияние Schema.org проявляется в изменении внешнего вида сниппетов в результатах поиска, однако она также может быть учтена при поиске изображений.
Помещайте изображения на своем хостинге
Иногда изображения размещаются на внешних ресурсах, таких как Imgur или FactPic, для экономии пространства на собственном хостинге.
Однако такой подход несет в себе определенные риски: в случае перегрузки фотохостинга трафиком или изменения правил хранения и отображения изображений, иллюстрации на вашем сайте могут не загружаться или отображаться частично.
Оптимальным решением является размещение всех изображений на вашем собственном веб-сайте. Рекомендуется использовать методы оптимизации размеров файлов изображений, чтобы обеспечить их быструю загрузку и не замедлять работу веб-страниц.
Рекомендации:
Для крупных платформ с обширным медиаконтентом и миллионами пользователей рекомендуется использовать CDN, чтобы избежать потерь трафика из-за медленной загрузки страниц. Сайты, которые ежедневно привлекают несколько тысяч посетителей, обычно могут обойтись без использования CDN.