Как оптимизировать изображения для сайта? Squoosh от Google — бесплатный онлайн инструмент, о котором мало кто знает
16 декабря 2020

Как оптимизировать изображения для сайта? Squoosh от Google — бесплатный онлайн инструмент, о котором мало кто знает

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

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

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

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 раньше? Планируете ли провести оптимизацию изображений на сайте? Есть ли вопросы? Напишите в комментариях.

Обсуждение

klinova.67
15:57 17 декабря 2020
Давно пользуюсь этим сервисом. Заметила, что недавно дизайн изменился, просто отличный вид. Качество картинок после сжатия очень нравится. Только не научилась в современные форматы картинки переводить. Продолжаю сжимать в jpg.
Куда вставлять этот код
В header.php ?
Дмитрий Угниченко
16:50 17 декабря 2020
Спасибо за отклик! Вставлять тега надо в зону, где подключается изображение на страницу.
albertzzz2000
16:05 17 декабря 2020
1. Про это сервис вы уже писали в статье про WEBP.
2. Многие движки все равно не поддерживают WEBP.
909021
16:32 17 декабря 2020
лол, какие такие "движки" ? если речь о CMS, то заточить под любую nginx конфиг не составит большого труда...
Дмитрий Угниченко
16:53 17 декабря 2020
1. Сервис обновился, внесены крайне полезные изменения, как то массовая конвертация изображений
2. Все популярные браузеры поддерживают webp. В материале написано как встроить множество вариантов. При таком подходе если не поддерживается, загрузится jpg.
servir007
17:47 17 декабря 2020
Интересная статья, почему раньше об этом не написали? В продолжении статьи сервисы оптимизации изображении https://myborder.ru/poleznye-staty/servisy-optimizatsii/ и для вордпрессоманов: https://myborder.ru/plaginy-wordpress/plaginy-optimizatsii/ - плагины оптимизации.
mityashepelev
04:57 18 декабря 2020
Давно использую формат webp, результаты всегда отличные. Загрузка страниц один из главных факторов продвижения в поисковых системах!
vwt6
15:09 18 декабря 2020
kraken.io тоже хорош
demimurych
03:56 19 декабря 2020
>Поисковые алгоритмы начали учитывать скорость загрузки страницы сайта при ранжировании.
Не учитывали и никогда учитывать не будут.
Все кто думают и наче вот вам ссылки на два примера:
1) Пример 1
содержит одно изображение размером в 14 мегабайт, без оптимизации.
Количество балов в тесте 99 - 100
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fmdtr.org%2Flh%2Findex2.html
2) Пример 2
содержит два изображения по 6 Мб без оптимзации
Количество балов в тесте 99 - 100
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fmdtr.org%2Flh%2Findex3.html
=================================================
Почему?
Потому что никто не измеряет скорость загрузки.
Потому что всем справедливо плевать какого размера ваша страница и сколько на ней изображений.
Потому что измеряют не то, что нафантазировал наш автор.
А что же учитывает гугл?
Поисковые системы учитывают скорость рендера первой области отображения, на результат которой, в обьеме 5%, может повлиять временная метка получения первого байта, которая скоро вообще будет убрана из теста.
mailbox
18:12 14 января 2021
Как быстро отдать гуглу первую области отображения?
unknown.user.good
17:12 28 декабря 2020
бесплатно в хорошем качестве
Для добавления комментария, пожалуйста, авторизуйтесь