Сайт без картинок – это пустой текст, скучная информация и низкие показатели просмотров, поэтому мы разбавляем тексты картинками, добавляем много фотографий товаров, украшаем все это красочными баннерами с крупными лозунгами “КУПИ”! Поэтому количество фотографий на сайте может быть очень большим, особенно в случае с интернет-магазинами и постоянно пополняемыми блогами.

Показатели SEO

Большое количество картинок увеличивает время загрузки сайта, что в свою очередь негативно влияет на показатели SEO.

Как же правильно подготовить картинки для выгрузки на сайт, чтобы ваши показатели SEO и загрузки сайта росли, а не наоборот!?

Размер и вес

Размер и вес картинки

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

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

Что нужно учитывать?

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

Занимаемый размер картинки на сайте.
Если на сайте картинка занимает всего 500px позаботьтесь, чтобы реальный ее размер не был 5000px и даже 1000px. Если это фиксированная картинка, которая не меняет размер в зависимости от размера экрана, то лучше всего, чтоб картинка была того же размера, что и занимаемая область. То есть в данном случае 500px.

Сохранить для web.
Все изображения перед экспортом сохраняйте в оптимизированном формате для web. Например, в Photoshop есть такая функция – “сохранить для web”. Это позволит автоматически оптимизировать изображения и там же можно поиграть с настройками. Кроме этого есть куча онлайн редакторов способных сжать вашу картинку почти без потерь в качестве.

После того, как вы уже оптимизировали свои картинки, можно переходить к добавлению изображения на сайт. Для того, чтобы ваше изображение было дружелюбно к SEO, воспользуемся атрибутами HTML.

Атрибуты изображения HTMLАтрибуты изображения HTML

Поговорим о том, как правильно заполнять HTML код, чтобы наше изображение было не только оптимизированным, но и SEO дружелюбным.

Итак, как выглядит пустой тег изображения в HTML коде:

<img src="image.jpg">

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

Разберем какие атрибуты нужно заполнять и как.

1. Называйте свои картинки правильно.

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

Если ваш сайт на русском, то используйте русские слова, но только латинскими буквами, через тире. Например, podgotovka-kartinok.jpg. Для этого лучше всего использовать какой-нибудь транслит онлайн переводчик.

<img src="podgotovka-kartinok.jpg">
2. Заполняйте атрибут alt.

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

Альтернативный текст поможет пользователю понять что именно было изображено на картинке даже если он ее не увидит. Так же помните, что Google учитывает описания в атрибутах alt при показе вашего сайта в поисковике.

<img src="podgotovka-kartinok.jpg" alt="Подготовка картинок для web">
3. Заполните title.

Title – текст, который появится при наведении курсором на картинку. Особенно важно, если картинки остаются без текстовых описаний и при этом несут информационный характер.⠀

<img src="podgotovka-kartinok.jpg" alt="Подготовка картинок для web" title="Как заполнять title">

Сделав эти простые шаги, вы повысите показатели SEO вашей страницы и скорость загрузки вашего сайта.

Автор

Оставляйте комментарии на @_pro_web