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

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

Что происходит, когда страницы загружаются медленно?

• Пользователи уходят с сайта. Никто не любит ждать!
• Поисковые системы могут не проиндексировать весь контент. Это снижает релевантность страницы и ее позицию в поисковой выдаче.
• Данные о пользователях могут не загрузиться в системы аналитики. Это искажает нашу статистику.

Оцениваем количество и необходимость изображений

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

Правила хорошего тона:

• Изображения должны быть уместны и соответствовать контенту страницы.
• Картинки должны отвечать на интент (намерение) пользователей.
• Изображения должны дополнять текст, а не дублировать его.

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

Для некоторых элементов веб-страницы мы можем использовать векторные изображения в формате SVG.

SVG идеально подходит для:

• Иконок.
• Логотипов.
• Других графических элементов, которые делают страницу более интересной (например, преимущества или этапы работы).

Преимущества SVG:

• Адаптивность: SVG-графика остается четкой при любом масштабировании.
• Гибкость: SVG-картинки можно создавать в текстовом редакторе и редактировать с помощью тега <svg>.

Оптимизировать и уменьшить вес svg графики можно с помощью решения SVGO.

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

Растровые изображения — изображения, состоящие из сетки пикселей (цветных точек).

Растровые изображения имеют следующие характеристики:

• Размер в пикселях.
• Количество цветов и оттенков (глубина цвета).
• Цветовое пространство (цветовая модель, например RGB, XYZ и т. д.).
• Разрешение (количество точек в изображении).

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

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

Как рассчитывается вес растровых изображений?

В браузере 256 оттенков на каждый канал цвета. Один канал занимает 8 бит. Пиксель состоит из 4 каналов и весит 32 бита или 4 байта. Таким образом можно легко рассчитать вес файла.

Например, изображение размером 100*100 пикселей состоит из 100 000 пикселей. 1 пиксель весит 4 байта, соответственно изображение из 100 000 пикселей будет весить 400 000 байт или 390 кб (400 000 / 1024).

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

Как снизить вес растрового изображения без потери качества?

Снизить глубину цвета

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

Применить дельта-кодирование пикселей

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

Уменьшить масштаб картинок

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

Как выбрать формат растрового изображения?

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

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

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

WebP — формат изображений, разработанный Google. Такой формат использует алгоритм сжатия изображений, что позволяет снизить размер файла без потери качества.

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

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

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

Оптимальный вес изображения —100-200 кб. Большие изображения в высоком разрешении могут быть весом 500-1 000 кб. В некоторых случаях картинки необходимо размещать в высоком разрешении, например фото товаров, где требуется увеличение изображения. Оптимальный вес таких файлов — до 3 мб.

Изображения весом более 3,5 мб не рекомендуется размещать на сайте. Наличие таких изображений может значительно снизить скорость загрузки страниц.

Как найти тяжелые изображения на сайте? Проверить оптимизацию изображений и найти тяжелые изображения на сайте можно с помощью софта Screaming Frog.

Необходимо спарсить сайт через софт, перейти в навигационном меню справа во вкладку Images — All, отсортировать изображения по уменьшению размера.

Таким образом мы получим список всех изображений с сайта и их вес.

Оптимизируем название файла изображения

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

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

Название необходимо прописать транслитом (можно использовать сервис «Транслит»).

Содержимое атрибута title отображается при наведении курсора на изображение.

Правила заполнения атрибута title у изображений:

• Атрибут Title должен соответствовать изображению. Не следует писать в нем то, что не имеет к картинке никакого отношения.
• Лучше использовать небольшой по длине Title для удобства пользователей — никто не захочет читать километровую подсказку к картинке.
• Желательно наличие ключевых слов. Не стоит употреблять такие слова, как «фото», «картинка» и т. д., ведь и так понятно, что это такое.

Атрибут alt у изображений — это атрибут html-тега <img>, который описывает содержания картинки. Атрибут alt становится отображается на странице сайта в том случае, если картинка не загрузилась.

Пример оформления атрибута в html-коде:

Как заполнить атрибут alt в html-коде Изображения в html-коде размечаются тегом <img>.

После открытого тега указываем ссылку на изображение: src="image.png»

Далее необходимо указать атрибут alt: alt="Описание изображения»

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

Точных параметров по количеству символов в атрибуте alt нет. При этом рекомендуется использовать 3-5 слов, а общая длина атрибута — 75-80 символов. Это оптимальный размер описания изображения.

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

Как атрибут alt отображается на странице Если атрибут alt заполнено, то в случаях, когда изображения не загружаются, содержимое атрибута alt выводится вместо изображения в текстовом виде.

Если атрибут отсутствует, либо поле атрибута пустое, соответственно текстовое описание не выводится.

Как атрибут alt влияет на ранжирование

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

Sitemap.xml — это файл, который сообщает поисковым системам о структуре сайта и о том, какие страницы и ссылки необходимо проиндексировать. Sitemap.xml содержит в себе ссылки на актуальные страницы сайта, которые доступны для индексации и отдают код ответа сервера 200.

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

Рекомендации:

• Автоматическая генерация: настраиваем автоматическое добавление новых изображений в карту сайта.
• Регулярное обновление: обновляем карту сайта раз в неделю, чтобы ускорить индексацию новых картинок.

Более подробно ознакомиться с форматом можно в Документации Google и Яндекс Справке

Пример кода xml-карты сайта для картинок:

Compressor.io →

Сервис позволяет нам уменьшить вес картинки до 90% без потери качества. Инструмент работает со всеми современными форматами, включая WebP.

Imagecompressor →

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

Tinyjpg →

Бесплатный оптимизатор изображений, который позволяет сжимать картинки без потери качества. Сервис преобразовывает PNG изображения из 24-битных в 8-битные. Такой способ позволяет снизить вес картинки без потери качества.

Compressjpeg →

Простой онлайн редактор, который позволяет оптимизировать до 20 файлов за раз. С помощью сервиса можно сжать картинки в формате JPEG и преобразовать PNG документы в JPEG, JPG в PNG и SVG в PNG.

WebP Converter →

С помощью инструмента можно преобразовать картинки в форма WebP. WebP Converter позволяет снизить вес файла до 30% без потери качества.

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

Ссылка на оригинал статьи — Оптимизация изображений для сайта: как оптимизировать картинки