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

Как правильно оптимизировать картинки? Что использовать? Что делать, если нет значимых ресурсов на выполнение работ?

Разберемся с всеми вопросами далее.

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


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

В 2021 в поисковой системе будут учитываться такие метрики как:

  • Largest Contentful Paint;
  • First Input Delay;
  • Cumulative Layout Shift.

Подробнее — Web Vitals — От каких метрик зависит новый фактор ранжирования Google, который заработает в 2021 году. Как оптимизировать?

Метрика Largest Contentful Paint учитывает скорость отрисовки контента на первом экране. Скорость отрисовки зависит от размера изображений.

Ориентироваться надо на такие значения:

  • 2.5 сек — хорошо;
  • 4.0 сек — плохо.

Поисковая оптимизация метрики Largest Contentful Paint

Если изображения не оптимизированы, то значение Largest Contentful Paint будет высоким.

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

Итак, картинки есть на любом сайте.

Как оптимизировать изображения эффективно и бесплатно?

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


Полноценная стратегия оптимизации изображений состоит из таких этапов:

  • Ленивая загрузка
  • Выбор размер картинки в соответствии с размером экрана;
  • Сжатие графики.

Ленивая загрузка включается через атрибут loading=lazy. Метод является прогрессивным, следовательно, никаких проблем не создает. Ленивая загрузка не влияет на индексацию изображений.

Подробнее в блоге MegaIndex по ссылке далее — Ускорение сайта за счет ленивой загрузки изображений. Пример реализации Image Lazy Loading.

Часто на маленьких экранах загружаются изображения с избыточным размером и без использования сжатия.

Сначала разберемся с темой сжатия изображений.

У Google есть специальный сервис для сжатия изображений, о котором мало кто знает.

Инструмент называется Squoosh. Сервис появился в 2018 году. На днях был обновлен до версии v2.

Презентация — Google Squoosh.

Google Squoosh — сервис оптимизации изображений


Squoosh от Google является сервисом для сжатия изображений.

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

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

Проект разработан в Google Chrome Labs, является открытым и экспериментальным.

Код системы опубликован в интернете — https://github.com/GoogleChromeLabs/squoosh/blob/dev/README.md.

Технология сложная, но для пользователя создан простой интерфейс.

Как работать:

  • Откройте Squoosh. Загрузите изображение;
  • Система оптимизирует файл в автоматическом режиме. В левой части экрана размещается исходное изображение. В правой части экрана размещается изображений после оптимизации;
  • Скачайте файл.

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

Пример:

Squoosh редактор

Размер изображения уменьшен более чем на 91%.

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

Реализация подобного сервиса стоят очень дорого, но в данном случае все предоставляется бесплатно и без ограничений.

Какие форматы изображений лучше использовать? Достаточно использовать обычный формат изображений JPG.

В идеале на сайте следует использовать улучшенные форматы. Передовыми являются:


Конвертация из jpg в webp

Использование webp на сайте предполагает выполнение дополнительных работ по внедрению. На страницах надо добавить тег picture.

Пример:

<picture>
	<source src="image.webp" type="image/webp">
	<source src="image.avif" type="image/avif">
	<img src="image.jpg" alt="description">
</picture>

Какие изображения следует оптимизировать? Главными кандидатами на оптимизацию являются большие изображения, но правильно оптимизировать все.

Что появилось в Squoosh v2?

Squoosh v2


Squoosh v2 анонсирован неделю назад.

В сервис внесены такие изменения:

  • Добавлены поддержка новых кодеков;
  • Внедрена поддержка командной строки для сжатия изображений из терминала;
  • Улучшен дизайн.

Теперь сервис поддерживает такие кодеки:

  • OxiPNG;
  • WebP;
  • AVIF.

Есть вариант массовой оптимизации изображений. Код системы сжатия открыт. В системе предусмотрен интерфейс командной строки.

Массовая оптимизация картинок сайта

Инструмент позволяет сжимать создавать сразу множество форматов изображений.

Пример оптимизации с использованием командной строки — Squoosh оптимизация с использованием командной строки.



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

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

Визуальная точность изображения оцениваться с использованием специальной метрики. О метрике — Butteraugli.

Imagemagick — альтернативный инструмент для сжатия изображений


До появления Squoosh я использовал imagemagick.

Порядок выполнения:

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

Изображения только часть работы. Выявить различные проблемы с сайтом позволяет аудит от MegaIndex.

Ссылка на сервис — MegaIndex Аудит.

Сервис бесплатный.

Анализ title:

Аудит сайта на предмет тега title

Анализ h1:

Аудит сайта на предмет тега h1

Выводы


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

Squoosh от Google позволяет сжать изображения прямо в браузере с использованием различных кодеков.

Сжатие изображений

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

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

Оптимизация частично решает проблему с размером. Аналитические данные показывают, что средний размер страницы составляет до 4 мегабайт.

Представители Яндекса заявили, что 40% пользователей уходят со страницы, если время загрузки составляет более 10 секунд. Исследования показывают, что 74% пользователей закрывают сайт, если страницы не загрузится в течение 5 секунд.

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

Выше написано как ускорить загрузку страницы.

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

  • Улучшить ранжирование в поисковой выдаче;
  • Увеличить конверсию.

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

Squoosh полностью бесплатен, так почему бы не попробовать?

Знали ли вы о сервисе Squoosh раньше? Планируете ли провести оптимизацию изображений на сайте? Есть ли вопросы? Напишите в комментариях.