В этом году главной стратегией SEO стала оптимизация контента в целом и картинок в частности. Картинки занимают около 90% веса всей страницы и влияют на скорость ее загрузки.

Скорость загрузки страницы

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

Чаще всего сайты тормозят из-за тяжелых картинок. Чтобы проверить общий вес фотографий — воспользуйтесь сервисом Image Size Checker.

Как измерить скорость сайта

Cкорость сайта влияет на page rank и другие бизнес-показатели. Измерить скорость своего сайта можно с помощью инструмента Google Pagespeed.

Если по данным pagespeed сайт получил менее 85 баллов из 100, то его нужно немедленно отправлять на оптимизацию.

Юзабилити

С точки зрения юзабилити все изображения на сайте или его мобильной версии должны быть responsive (отзывчивыми), соответствовать контенту и быть уникальными.

Для отзывчивых картинок:

max-width: 100%

Обязательным условием остаются мета-теги alt и title. Title помогает поисковику понять смысл картинки, а alt делает картинку user-friendly.

Пример правильного alt и title:

<img src = "images/image.png" alt="дом в горах" title = "Дом на горе Говерла, Карпаты">

Социальные мета-теги

Социальные сети все еще в тренде. Социализация сайтов повышает не только конверсию, но и место в выдаче. Для анонсов в соц. сетях используется протокол Open Graph. А именно мета-тег og:image позволяет выбрать картинку для иллюстрации социального поста.

<meta property="og:image" content="http://example.com/link-to-image.jpg" />

Общие рекомендации

Оптимизация изображений

Пора забыть об атрибутах width и height. Больше никаких изображений размером 5000х4000 втиснутых в 500х400. Каждое изображение должно соответствовать своему размеру в html-документе.



Нужно приучить себя сохранять малоцветные изображения в PNG вместо JPG.

Обязательно оптимизировать картинки с помощью инструментов JpegTran, Pagespeed Image Optimizer и других.

Если сайт развернут на сервере apache с поддержкой модуля Google Pagespeed, то в файле .htaccess можно прописать следующий код:

<IfModule pagespeed_module>
       ModPagespeed on
       ModPagespeedEnableFilters rewrite_images
</IfModule>

Этот фильтр включает в себя рекомпрессию картинок, конвертацию из jpg в png, конвертацию из обычного jpg в прогрессивный и изменение размеров. Подробнее об использовании в документации Google.

Облачные хранилища

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

<?php
$file = upload_image_to_cloud($_FILES['image']['tmp_name']);
?>

Sitemap для картинок

Создать отдельную sitemap для картинок или добавить информацию о них в существующую. Тогда поисковики быстрее проиндексируют картинки. Пример генератора sitemap.

Метод спрайтов

Использовать метод спрайтов, чтобы сократить количество http-запросов.

.icon {
  width: 16px;
  height: 16px;
  float: left;
  background: url(icons.gif) no-repeat;
}
.first .icon {
  background-position: 0 0px; /* по умолчанию */
  cursor: pointer;
}
.second.icon {
  background-position: 0 -16px; /* div сдвигается вверх на 16px */
  cursor: pointer;
}

Конспект

1. Картинки занимают 90% веса страницы и влияют на скорость ее загрузки.
2. Чтобы измерить скорость сайта используйте Google Pagespeed
3. Для анонсов в соц. сетях используйте Open Graph.
4. Облачные хранилища для картинок экономят время загрузки.
5. Для картинок нужен отдельный sitemap.