Зачем проводить оптимизацию фотографий для сайта

Визуальная составляющая сайта – важнейший атрибут его позитивного ранжирования в поисковиках. Причин тому несколько:

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

Визуальная составляющая сайта является важным фактором, поднимающим его ИКС (индекс качества сайта), а это приводит к увеличению трафика и ко всё более дружественному отношению поисковиков. Грамотное размещение фотографий, картинок, графических изображений на web-ресурсе есть часть его SEO оптимизации. Правильнее сказать, что оптимизация фото для сайта является ключевым компонентом общей SEO оптимизации. Оптимизация изображений для сайта состоит из ряда мероприятий, направленных на правильный подбор и обработку картинок.

Главные моменты оптимизации фото для сайта

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

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

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

чем уникальнее изображение, тем лучше, однако абсолютизировать здесь не рекомендуется: бывает, что картинка очень подходящая, но уже была где-то использована. Если источников повторения не так много, вполне допустимо разместить это же изображение и у себя на сайте. Избегать следует только совсем уж растиражированных изображений (сайты с такими картинками поисковики опускают вниз по рейтингу) – определить уникальность изображения поможет on-line сервис TinEye;

это необязательно, но всё же рекомендуется не касаться картинок с авторским правом (хотя бы из соображений этики), а выявить лицензию очень легко – в поиске Google, в разделе «Картинки» нужно кликнуть на «Инструменты», а потом «Права на использование», и выбрать галочкой соответствующую графу;

размер изображения – это «камень преткновения», здесь лучше придерживаться «золотой середины», т.е. большая часть картинок среднего размера, меньшая часть более мелкие, и процентов 20 пусть будут крупные полноразмерные (в плане веса картинок вся проблема в том, что с одной стороны большие изображения высокого качества привлекают клиентов, с другой – увеличивается скорость загрузки страницы, а это посетителям не нравится).

Варианты оптимизации фото для сайта

Теперь стоит рассказать о более конкретных действиях, которые включает в себя оптимизация фото для сайта:

1. Многие изображения изначально имеют совершенно неудобоваримое для поисковых роботов название. Что-то вроде DSC3491.JPG. Название необходимо поменять на актуальное. Тут поможет транслитерация. Например, «shokolad_keks». Дело не только в том, что поисковики часто воспринимают кириллицу как признак СПАМа или просто некорректно «видят» русские буквы. Плюс, ещё и в CMS гораздо удобнее работать транслитерацией. Название картинки должно в точности соответствовать тому, что на ней изображено. В идеале в названии необходимо прописать «ключевик». Наиболее актуально это для интернет-магазинов. При помощи онлайн-сервисов (типа https://a.pr-cy.ru) можно посмотреть аналитику сайта. Касательно интернет-магазина здесь интересны наиболее частые поисковые запросы пользователей. Допустим, люди ищут «брелоки из минералов» – данное словосочетание в разных вариациях. Значит, такое словосочетание по-разному нужно вставлять в названия картинок. Любое изображение несложно доработать в on-lineсервисах вроде Canva или Crello. Например, сделать прозрачную рамку. Фотография, часто используемая на других web-ресурсах, заиграет от этого новыми красками. Для хорошей работы интернет-магазина немаловажно обозначить для контент-менеджера правила переименования изображений.

Оптимизация изображений для сайта неразрывно связана с типами используемых форматов. «Любимчиками» у поисковиков являются форматы JPEG, PNG и GIF. JPEG удобен тем, что дает очень неплохое качество при совсем скромных габаритах (измеряется килобайтами). Что опять-таки актуально для интернет-маркетов. Также данный формат идеален для крупных, полновесных изображений. PNG удобен, когда следует сохранять прозрачность фона. Формат GIF классифицируется как изображение, но по сути это закольцованный кусочек видео. Этот формат незаменим, когда нужно показать какой-то процесс без возможности вставить полноценный видеоролик. Менее известный формат SVG, обычно, применяют к логотипам и иконкам, но также он не менее актуален в работе с Java Script и с CSS (эти языки для формата SVG позволяют ограниченно изменять размер при этом не теряя качество изображения). Формат WebP также отличается тем, что дает хорошее качество при малых размерах изображения. Форматы можно менять, допустим, перевести в WebP. Сделать это можно при помощи сервиса Squoosh.

Оптимизация фото для сайта наверняка потребует определенных манипуляций с его размерами. Конечно, файл можно попросту сжать. В данном случае это не тот тип файла, когда необходимо сжатие без потерь. Изображение способно остаться достаточно большим, четким и насыщенным, а размер уменьшится с мегабайтов до килобайтов. Уменьшить изображение можно многочисленными способами. Самый простой – встроенный редактор Paint. Также существует множество онлайн сервисов: JpegMini (сжатие до 80%), Compressor (до 90%, но один файл не может весить более 10 Мб), Compressorjpeg (удобен, когда нужно обработать большое количество картинок, поскольку способен работать сразу с 20 файлами одновременно), TinyPNG/JPG (работают с указанными форматами, сжатие более 70%, одновременная работа с 20 файлами, а вес каждого файла до 5 Мб). После всех сжатий обязательно рекомендуется проверить скорость загрузки страницы на Google page Speed insights. Она должна заметно увеличиться. Следует помнить, что высокая скорость загрузки есть важнейший фактор ИКС.
Оптимизация фото для сайта подразумевает и создание превью для картинки. Дело в том, что это способ сохранить высокое разрешение, большой вес картинки при сохранении той же скорости загрузки сайта. И соответственно, без ухудшения ранжирования web-ресурса. Превью означает, что при загрузке страницы на экране появляется миниатюрное изображение/ фотография, а при клике открывается полноценное изображение. То есть система не подгружает в кэш всё изображение, а только его превью. Отсюда и сохранение высокой скорости загрузки. Чтобы сделать превью, сначала нужно в любом из редакторов сильно (во много раз) уменьшить картинку. Например, с 2000*2000 до 150*150. И сохранить этот мини-вариант (при сохранении крупного оригинала). Затем с помощью Word создать пустой HTML-file (Файл – Создать – Веб-страница). Обе картинки (маленькая и большая) могут быть сохранены на компьютере, а могут быть в облачном хранилище. Это определяет соответствующие ссылки на них. Затем нужно заполнить пустой файл HTML так, чтобы маленькая картинка стала гиперссылкой на большую.

В HTML с помощью атрибута srcset в теге <img> можно указать несколько вариантов одного изображения в зависимости от размеров. Это нужно для того, чтобы страница сайта с этим изображением имела одинаково хорошую скорость загрузки на любых устройствах: и стационарных компьютерах, и мобильных гаджетах.

Теперь при попадании курсора на конкретное фото будет появляться плавающая надпись «Уникальная кухня тропического острова». Пояснения к фотографиям помогают в оптимизации фото для сайта.

Чтобы поисковики проиндексировали все изображения на web-ресурсе, рекомендуется создать Sitemap-файл. Необходимость обусловлена тем, что без этой карты изображения, которые были загружены, например, с помощью Java Script, невидимы для поисковиков. Для этого в Word нужно: Файл – Создать – XML-документ.

Если же работа с веб ресурсом производится на WordPress, то всё еще проще. Ведь в этой системе управления содержимым уже есть встроенный плагин Google xml sitemap for images, автоматически создающий Sitemap-file абсолютно для всех визуальных элементов. И не следует забывать про микроразметку с помощью schema.org. Оптимизация изображений для сайта будет качественнее с применением микроразметки. Так можно сообщить поисковым системам, что именно за контент присутствует на странице (а почти любые уточнения для поисковиков повышают их дружественность).

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