Как правильно оформить изображения на сайте для SEO

Если рассматривать возможность влияния на пользователей, то страница с изображением лучше страницы просто с текстом. Картинки помогают лучше понять смысл, разбивают текстовые полотна на удобные для чтения блоки. Со стороны поисковиков, картинки важны для SEO. Они могут принести дополнительный трафик из Google и Яндекс Картинок. По мнению многих специалистов технического SEO и реверс инжиниринга, с технической точки зрения, картинки и видео у Google оказывают как минимум равное влияние, как любой другой контент. В данной статье рассмотрим как оптимизировать картинки на сайте. А именно: примеры, как правильно оформить изображения для SEO, чтобы делать их полезными. К тому же не тормозили загрузку сайта. А так же давали возможность получать дополнительный трафик.

Как оптимизировать картинки на сайте: требования

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

Как создавать популярные статьи для сайта

Количество

Поэтому, желательно, иметь, как минимум, 12 картинок — точнее 12 вариантов одного изображения. Они показывают одно и то же, но имеют разные форматы и выполняют разные функции:

• оригинал и к ней три привью для мобильных устройств — это четыре;
• дублирование этих четырех изображений с соотношением сторон 16:9 — итого восемь картинок;
• еще одно дублирование этих четырех изображений с соотношением сторон 4:3 — все вместе составляет 12 вариантов картинок.

Проинформировать Google о существовании привью можно двумя способами:

1. оформить микроразметку ImageObject;
2. указать ссылки на эти изображения рядом через атрибут тега link.

После этого поисковик будет индексировать эти привью и использовать их в поисковой выдаче.

Привью, это английское слово preview, в своём буквальном переводе означающее «предварительный просмотр»: view переводится как «вид», а приставка pre-, в данном случае, означает что-то типа «пред-». В русском языке слово «привью» используется, в основном, в среде дизайнеров, фотографов и вебмастеров в значении «уменьшенная картинка», которая служит для получения представления о большой фотографии. Такую картинку даже ласково прозвали «привьюшкой» на русский манер.

Размеры

Если вы ищете какие-то картинки для их размещения в тексте, их разрешение может составлять больше, чем вам нужно. Например, на большинстве сайтов ширина контентной части составляет 600-800 пикселей. Это означает, что нет смысла добавлять картинку 1200×800 пикселей. Конечно, движок сам может ее преобразовать до нужных размеров, но, в некоторых случаях, лучше делать это самому. Ведь с сервера будет грузиться именно оригинал картинки, который будет весить немало, учитывая разрешение.

Многие идут еще дальше – они вставляют в текст совсем небольшие картинки – 200-300 пикселей в ширину, но при этом кликабельные. То есть в тексте отображаются только миниатюры изображений, а при клике они раскрываются в полном размере. Есть много плагинов для того же WordPress, которые позволяют это сделать. Например, Lightbox. Что мы получаем в таком случае? При загрузке страницы подгружаются маленькие картинки, которые, по понятным причинам, весят совсем немного, а уже при клике по любой из них пользователь увидит изображение в полном размере. Таким образом, на первоначальную генерацию страницы затратится меньше времени.

Уникальность

Поскольку немаловажным требованием к изображениям на Вашем сайте является их уникальность. Поэтому следует выбирать фотоматериал на специальных ресурсах с бесплатными изображениями.

Где взять бесплатные картинки для вашего сайта. 70 лучших источников с бесплатными изображениями

Как уменьшить вес фотографии без потери качества

Делайте интернет быстрее, и гугл вам скажет «Спасибо!» Вот несколько облачных сервисов, на которых можно уменьшить размер фото онлайн.

Compressor

Compressor, бесплатный сервис, но есть лимит по размерам загруженного файла в 10MB. Возможны варианты сжатия с потерей и без потерь качества. В последнем случае функция доступна только для JPG и PNG форматов. С помощью этого сервиса возможно сжатие до 90%.

Выбираем цвет сайта профессионально

Kraken

С помощью веб-интерфейса Kraken возможно оптимизировать как один, так и несколько файлов. Доступна функция оптимизации изображений веб-ресурса: достаточно ввести url сайта и на выходе получить архив со сжатыми изображениями. Сервис предлагает ряд полезного функционала по оптимизации графики, такие как изменения размера изображений, API для веб-ресурсов и плагины для платформ Magento и WordPress.

TinyPNG, JPEGMini

Сервисы TinyPNG, JPEGMini позволят сжать размер фото, но в основном используют сжатие с потерями, тем самым снижается качество изображения.

ImageOptim

Есть решение в виде программного обеспечения ImageOptim для Mac, который по умолчанию работает без потерь и снижения качества. ImageOptim может уменьшить размер фотографии онлайн для форматов JPEG, SVG, GIF и PNG. Простой и удобный интерфейс позволяет сжимать сразу несколько файлов. Принцип работы ImageOptim — удаление метаданных, таких как местоположение GPS и серийный номер камеры. Так что вы можете публиковать изображения без предоставления личной информации, которая добавляет веса графике.

Форматы изображений для Google

Google может индексировать типы изображений в форматах BMP, GIF, JPEG, PNG и WebP, а также SVG.

JPEG — используйте этот формат для фото;
PNG — для графики, проще говоря, для всего, что нарисовал дизайнер;
SVG — для векторных изображений.

Появились и новые форматы, такие, как WebP и JPEG-XR. Их преимущество в том, что они действительно меньше весят, но, к сожалению, пока не все браузеры поддерживают эти форматы. Например, JPEG-XR поддерживает только IE, а WebP — Chrome, Opera, Android. В связи с этим я не рассматриваю их. Но выбор за вами.

Форматы изображений для Яндекса

Для индексирования картинок в Яндексе стоит выбрать такие форматы: JPEG, GIF и PNG. Кроме правильного выбора формата, стоит учесть, что изображения, которые загружаются на странице при помощи скрипта, Яндексом не индексируются.

Влияние размера изображения на скорость загрузки

Размеры картинок влияют на скорость загрузки страницы, а та, в свою очередь, на ранжирование страницы. Если вы используете много изображений на странице, это может значительно замедлить ее загрузку. Существует множество инструментов и способов, как сжать фотографии без потери качества (о них я расскажу чуть позже). Используя их, будьте осторожны — сверяйте оригинальную картинку и сжатую.

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

Браузеру будет легче сканировать контент страниц, если в CSS прописать ширину и высоту изображения. Для дисплеев с ретиной добавляйте изображения в размере 2x и настройте отображение разных размеров одного и того же изображения для разных экранов. Иначе для пользователей, которые откроют изображение на дисплее с ретиной, все картинки будут отображены с визуальной потерей качества.

Инструменты для проверки размера и веса изображения

Проверить размер и вес картинок можно с помощью следующих инструментов:

• «Аудит сайта» Serpstat. Сервис покажет список ошибок, которые сгруппированы по приоритету важности. Чтобы посмотреть все страницы, которые лучше сжать, перейдите в блок «Мультимедиа», в нем собраны страницы с битыми и слишком большими изображениями.
• Для быстрого анализа изображений на одной странице можно воспользоваться расширением Serpstat Website SEO Checker.

Размер или качество

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

Это изображение попало в результаты поиска по запросу «белые собаки», что не соответствует реальному содержимому из-за неправильного описания и содержания текста статьи.

Размещение картинок

Для корректной привязки изображений к вашему сайту храните их на своем домене или одном из поддоменов. Иначе пользователи, использующие поиск по изображениям, не смогут попасть на ваш сайт: они будут видеть адрес того ресурса, на котором хранится найденная картинка, даже если она находится на странице вашего сайта. Чтобы найти неполадки со скоростью загрузки и оптимизацией изображений для мобильных, используйте модуль «Аудит сайта» Serpstat. Помимо самих проблем вы найдете подсказки для их исправления.

Сжатие картинок

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

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

Пример сжатия изображения

На pixabay можно взять картинку бесплатно. Выберем любую и посмотрим, в каких разрешениях она скачается.

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

Есть несколько вариантов сжатия изображения:

1. Открыть картинку в фотошопе. Нажать Файл – Сохранить для Web и задать нужные настройки.
2. Воспользоваться одним из онлайн-сервисов для этой цели, найти вы их сможете самостоятельно, просто вбив в поиск что-то вроде “сжать фото онлайн”.

Фотошоп

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

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

Для каждого изображения нужно смотреть индивидуально, как оно будет выглядеть при сжатии, и выставлять тот или иной уровень качества. Например, для скриншотов, где очень важно что-то разглядеть, лучше не выставлять качество на столь низкий уровень, как 40. Лучше установить 60-80. Также не забудьте указать правильный формат изображения – jpeg.

Сжатие png изображений

Вот тут фотошоп справляется не так хорошо, как хотелось бы. В любом случае, есть такой сервис, как optimizilla. В него вы можете залить картинку, в том числе и png, и с помощью ползунка отрегулировать количество цветов. Наподобие, как в фотошопе. Таким образом, удавалось добиться снижения веса png-изображений в 2-3 раза без существенных изменений в качестве.

Спрайты или как оптимизировать запросы к серверу

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

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

Подписи к изображениям: как оптимизировать картинки на сайте

Под этим важно понимать не только подписи, которые вы реально видите под картинками. Хотя у них тоже есть своя мизерная роль в оптимизации. Но в основном такие подписи необходимы для удобства пользователя и заменяют собой атрибут title.

Кроме title у изображений также есть атрибут alt, который вызывает еще больше споров, чем первый атрибут. Для начала необходимо разобраться, для чего они нужны. Title – это всплывающая подсказка, которая появляется при наведении на изображение. Alt – альтернативный текст, который будет показан только в том случае, если у пользователя будет отключен показ графики. В целом, alt можно уже считать старомодным, это раньше, когда на месяц ты получал 30 мегабайт трафика, многие отключали картинки, чтобы резко сокращать вес веб-страниц. Сегодня же количество людей, которые сидят с отключенными картинками, приближается к нулю.

Какая польза

Как оптимизировать картинки на сайте? Для этого выясним, есть ли польза от заполнения alt и title? Можно сказать, что она определенно есть, но не большая. Если кратко обобщить, то самое главное – не спамить ключевыми словами. Текст должен быть длиной не более 150 символов и максимально конкретно описывать изображение. Оптимальным можно считать одинаковый title и alt. То есть просто заполняете один атрибут, копируете текст и вставляете в другой. Самым важным является то, какие вы преследуете цели. Поскольку, если вы не нацелены на трафик из поиска по картинкам, то особого смысла в заполнении атрибутов нет. Они не помогут вам подняться в Яндексе. Единственное, что можно сказать, это то, что поисковик Google, использует наличие нормальных alt и title как один из факторов ранжирования. Но наверняка этот фактор играет небольшую роль.

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