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

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

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

Несколько слов о важности оптимизации изображений на сайте

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

• Ускорение загрузки и работы страниц. Большие по размеру и оптимизированные картинки приводят к проблемам с работоспособностью сайта, в частности – снижению скорости его работы. Поисковые роботы придирчиво относятся к скорости работы веб-ресурса, поэтому оптимизация изображений является действенным способом улучшения работоспособности сайта.
• Пользовательский опыт и взаимодействие с контентом. Качественный контент содержит не только сухой текст, но и визуальное оформление, включая картинки. Изображения на сайте должны соответствовать содержанию статьи, иметь достаточное качество. Это улучшит пользовательский опыт, заставит пользователя дольше задержаться на ресурсе, а в перспективе – вернуться, потому что он уже знает, что сайт предлагает не только полезный, но и интересный контент.
• Влияние оптимизации изображений на SEO. Оптимизация графических материалов поможет не только повысить позицию сайта в поисковой выдаче, а также вероятнее подняться выше в разделе «Изображения» Google Chrome.

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

Выбираем изображение и оптимизируем… Или нет?

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

Картинки для дизайна и наполнения – в чем отличие?

Каждое изображение на сайте выполняет свою роль. Например:

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

Все изображения на сайте должны быть оптимизированы, но каждое – по-своему. Например, добавление атрибутов title и alt для дизайн-материалов в целом не имеет смысла. Но их размер и расширение следует учитывать и при необходимости оптимизировать.

Изображения и их форматы

Глобально форматы всех изображений можно разделить на два типа:

• Векторные – к которым относятся форматы SVG, AI, EPS, PDF и другие. Этот тип изображений создается на базе математических формул и геометрических фигур. Векторные изображения имеют большое преимущество – их качество не зависит от масштаба картинки. То есть даже если использовать сильный «зум», четкость линий не пострадает.
• Растровые – хорошо известные нам форматы JPEG, PNG, GIF, RAW. В отличие от вектора, растровые изображения состоят не из геометрических примитивов, а из пикселей. Такой тип картинки уже зависит от масштабирования, поэтому слишком большой «зум» откроет все «особенности» изображения. Растр не будет выглядеть одинаково четко на маленьком смартфоне и большом мониторе.

Каждый из этих типов изображения используется для конкретных задач сайта. Возвращаясь к разделению картинок по назначению (дизайн и наполнение), можно сделать следующие выводы:

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

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

Оптимизация вектора

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

• Вектор не теряет свои визуальные особенности при масштабировании – то есть начальное разрешение в 1200×600 пикселей можно уменьшить хоть в три раза, а четкость не упадет.
• Компрессия вектора также не влияет на его качество – «сжатие» векторной графики отличается от аналогичного процесса над растром, но результат тот же. Условный SVG-файл можно сжимать с помощью онлайн-сервисов и значительно уменьшить его размер, но качество файла не пострадает.

Оптимизация растровых картинок

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

• Уменьшать расширение надо осторожно – начальное расширение 600х382 будет плохо выглядеть при увеличении масштаба даже в два раза, ведь на поверхность «всплывут» все артефакты. Лучше сразу искать или создавать растр большего расширения.
• Компрессия отличается от вектора – растр компрессируется по другому принципу. Существует два вида компрессии растра, один из которых повлияет на качество изображения, а второй нет. Так, первый вариант компрессии приведет к «сжатию» пикселей, что приведет к потере четкости, но вместе с тем – размера файла. Вариант без потери качества предлагает удалить лишние мета-данные, которые могут иметь достаточно большой «вес».

Размеры, расширения, форматы фото и где их лучше использовать

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

Размер файла изображения

Сегодня Интернет намного быстрее и доступнее чем десять лет назад, но это не значит, что следует злоупотреблять мощностями современных сетей. Размер файла напрямую влияет на скорость загрузки всего сайта, поэтому использовать изображения размером более 3-4 Мб не стоит.

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

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

Главное, чтобы скорость загрузки страницы не превышала показателя 2-3 секунды для desktop и 3-4 для мобильных устройств.

Расширение изображения

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

• «Задник» он же background image – 1920 x 1080 – 16:9
• Размер изображения для блога – 1200 х 630 – 3:2
• Логотип сайта – 100 x 100 – 1:1
• Фавикон – 16 х 16 – 1:1

Впрочем, тот же фавикон иногда рекомендуют создавать в расширении 32 х 32 или даже 64 х 64. Когда речь заходит о «заднике», то на некоторых сайтах соотношение его сторон может отличаться – вместо 16:9 может быть 21:9.

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

Разделим все форматы по вероятным направлениям использования следующим образом:

• Иллюстрированные материалы (фото, изображения к статьям) – JPG (JPEG), PNG или WebP. С точки зрения быстродействия, оптимальным вариантом будет компрессированный JPG. Если требуется четкость изображения со средним размером файла, то обратите внимание на современный WebP. PNG имеет наибольшую четкость, но вместе с тем – размер. Если не требуются особые для PNG возможности (прозрачные картинки, тени и т.д.), то от использования некомпрессированного PNG стоит воздержаться.
• Дизайн-составляющая (логотипы, кнопки, функциональные изображения) – SVG, AI, EPS иногда оптимизированный PNG. Современный стандарт – SVG. AI и EPS могут иметь проблемы с визуализацией на некоторых системах или браузерах. Часто фавиконы и технические изображения для сайтов создаются из PNG картинок, несмотря на то, что этот формат растровый.

Сервисы для компрессии изображений

Вот некоторые сервисы, с помощью которых можно уменьшить размер изображений:

• Compressjpeg.com – поддерживает JPEG, PNG, GIF и PDF. Также поддерживает пакетную обработку большого количества файлов одновременно.
• JPEGMini – сервис для компрессии JPEG. Также поддерживает пакетную обработку.
• TinyPNG – поддерживает форматы WebP, PNG и JPEG.
• Compressor.io – может обрабатывать изображения в формате JPEG, PNG, GIF и SVG.

Операционная система MacOS имеет встроенную функцию компрессии фотографий и картинок. Для этого необходимо открыть изображение через встроенное приложение «Просмотр», открыть «Файл» и найти пункт «Экспортировать». После этого появится окно, в котором можно выбрать место сохранения новой версии изображения, его формат и определить качество. Чуть ниже будет приведен будущий размер файла.

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

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

Мета-теги и особенности оптимизации картинок

Мы уже выяснили, что для дизайн-элементов сайта по типу логотипов, размытых «задников» и элементов, которые несут только визуальный смысл, можно не прописывать Alt и Title. Другая ситуация с основными изображениями, которые интегрированы в «тело» контента. Вот некоторые советы.

Тег Alt

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

Более того, тег Alt отвечает за ранжирование изображений в Google Image. Когда пользователь предоставил запрос поисковику и перешел в раздел «Изображения», то Google «подтягивает» соответствующие по теме картинки на основе Alt-описания. Советы для создания работающего Alt:

• Длина составляет 100-150 символов. Описание изображения может быть и больше, но Google будет сканировать первые 150 символов, поэтому важно использовать их с пользой.
• Alt должен отражать смысл и тематику изображения. Нужно простыми словами описать смысл картинки. Например: «Кадры теста парусной яхты Fountaine Pajot New 44».
• Не дублируйте текст из заголовка H1 или Title самой страницы. Использование этих предложений или слов могут плохо сказаться на ранжировании картинки в Google Image, ведь поисковик не поймет содержание картинки.
• Каждый Alt должен быть уникальным. Если на странице несколько разных изображений с одинаковым Alt-описанием, то это может запутать поисковых роботов.
• Откажитесь от спама ключами. Главные ключи статьи, в которой расположено фото, не стоит повторять или намеренно дублировать в Alt-описании, тем более несколько раз.

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

Тег Title и название файла

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

example_name_bg.jpg или bg_example_name.jpeg

Такой подход позволит быстрее находить файлы по поиску на сервере или CMS.

Например, часто «сырые» фотографии имеют названия вроде «IMG_2089.jpeg», который не дает никаких подсказок по поводу того, что изображено внутри. Измените название на что-то более понятное: «photo-yabluka-na-stoli.jpg».

Что такое IPTC и как с его помощью оптимизировать изображения?

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

• заголовок;
• описание;
• ключи;
• автор;
• право собственности;
• дата создания;
• место создания изображения.

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

Почему следует осторожно использовать Lazy Load?

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

Lazy Loading полезен на страницах сайта, содержащих большое количество графических объектов. Для активации такого режима загрузки контента следует добавить параметр loading=”lazy” в строку инициализации элемента в HTML-коде. Пример:

<img src=”epiphone.jpg” alt=”Шестиструнная электрогитара и усилитель” loading=”lazy”>

Обратить внимание на «ленивую загрузку» стоит в случаях:

• если изображения загружаются через JS-скрипты;
• если src или srcset прописаны в HTML, а не через data-src или другие нестандартные атрибуты.
• Структура DOM отображает изображения без дополнительных условий.

Во всех остальных случаях нормальное сканирование поисковиками страниц и изображений гарантировано почти на 99%.

В двух словах об уникальности картинок, Google Image и как не наткнуться на проблемы

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

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

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

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

Итоги

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

• Разделяйте изображения на дизайновые и содержательные.
• Выбирайте подходящий к стилю сайта и его дизайну размеры изображений.
• Следите за размерами файлов изображений и скоростью работы сайта.
• Давайте картинкам понятные имена, простые, но содержательные Alt-описания, человекочитаемые title и явные URL.
• Удаляйте ненужные мета-данные, которые не содержат полезной информации для поисковиков – файл станет меньше по объему.
• Разделите все изображения на категории и систематизируйте их для облегчения поиска.
• По возможности используйте уникальные изображения – создавайте самостоятельно или используйте сток. Существует несколько бесплатных стоков, но злоупотреблять использованием фото, в бесплатности которых вы не уверены, не стоит.

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

Александр Шмидько

SEO-специалист

Страница автора