Оптимизация изображения для сайта. Инструкция

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

Зачем нужны изображения на сайте?

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

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

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

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

Формат

Поисковые машины Google индексируют такие форматы изображений, как BMP, GIF, JPEG, PNG, WebP и SVG. При этом важно знать, что для каждого отдельного типа изображений лучше использовать определенный формат. Так, для фотографий больше подходит JPEG, для графики и прочих изображений, созданных дизайнером, выбирайте PNG, а для векторных картинок - SVG. WebP и JPEG-XR - это новые легкие форматы, которые поддерживают пока еще не все браузеры.

Для хорошей индексации в Яндексе выбирайте форматы GIF, JPEG и PNG.

Качество

Оптимизируя картинки для Google и Яндекс, важно найти оптимальный баланс размера изображения и его качества, так как предназначаются они, прежде всего, для пользователей, а не для поисковых машин. Графика должна быть четкой и приятной для визуального восприятия. Некачественное изображение - то, которое не соответствует описанию или окружающему тексту.

Размер и вес

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

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

Уменьшить вес картинок можно в специальных облачных сервисах для сжатия изображений:

• Compressor. Это бесплатный ресурс, который не работает с файлами восем более 10 МБ, но зато предоставляет выбор между сжатием с потерей и без потери качества. Если вы выбираете последний вариант, то работать можно будет только с файлами в форматах JPEG и PNG. Compressor способен сжимать файлы до 90%.
• Kraken, TinyPNG, JPEGMini. Эти сервисы позволяют оптимизировать изображения всего интернет-ресурса - вы только вводите URL сайта и получаете архив с готовыми сжатыми картинками. Также у сервиса Kraken есть много полезных функций по оптимизации графических изображений: изменение размера картинок, API для интернет-ресурсов, плагины для WordPress и Magento.
• ImageOptim. Это программа для Mac, позволяющая оптимизировать изображения без малейших потерь качества. ImageOptim работает с форматами JPEG, SVG, GIF и PNG. Особенность программы в том, что она удаляет метаданные, поэтому файлы публикуются без личной информации и с гораздо меньшим весом. Аналогичные сервисы для Windows: FileOptimizer, Online interface, pngquant.

SEO-оптимизация картинок

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

Второй шаг - нужно обязательно прописать ключевики в тегах title и alt:

• тег Alt - это текст, который пользователи будут видеть на месте картинки в случае, если браузер не загружает изображения. В плане оптимизации изображений на сайте это самый важный момент. Для тега Аlt нужно подобрать максимально короткое и емкое описание конкретного тега. При этом перенасыщать его ключевыми словами не стоит - можете получить обратный эффект. Тег Аlt сильно влияет на ранжирование страницы в целом и картинки в частности (при поиске по изображениям).
• тег Title - это всплывающий текст, который видят пользователи при наведении курсора на изображение. Этот тег не менее важен, чем Alt, при этом прописывается в аналогичной манере.

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

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