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

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

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

Для чего нужна оптимизация изображений на сайте

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

Низкая скорость загрузки страниц приводит к отказам (уходам пользователей с сайта). А поисковые системы при низкой скорости загрузки страниц могут не проиндексировать часть контента, что снижает релевантность страницы и, соответственно, её положение в поисковой выдаче.

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

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

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

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

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

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

Используйте векторные изображения

Для некоторых элементов веб-страницы можно использовать векторные изображения в формате 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 отображается при наведении курсора на изображение.


Заполните атрибут Alt

Содержимое атрибута alt отобразится на странице, если изображение не загрузится. Это позволит пользователям распознать содержимое картинки.


Содержание атрибутов alt и title может совпадать.

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

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

Подробнее про атрибут alt читайте в статье.
Пример заполнения атрибутов alt и title для изображений в html-коде
<img src="image.png" alt="Описание изображения" title="Описание картинки">

Создайте карту sitemap.xml для изображений

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

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

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

При создании xml-карты для картинок рекомендуем настроить автоматическую генерацию карты сайта (чтобы при добавлении на сайт новых изображений они добавлялись в карту сайта). Также рекомендуем автоматически обновлять карту сайта раз в неделю, что позволит ускорить индексацию новых картинок.

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

Пример кода xml-карты сайта для картинок
<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
        <url>
            <loc>https://site.ru/page/kartinka.png</loc>
            <lastmod>2022-08-01</lastmod>
        </url>
    </urlset>

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

Compressor.io →

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


Imagecompressor →

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


Tinyjpg →

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


Compressjpeg →

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


WebP Converter →

С помощью инструмента можно преобразовать картинки в форма WebP.
WebP Converter позволяет снизить вес файла до 30% без потери качества.
Пожалуйста, оцените статью
Читайте далее
Автор статьи
Дмитрий Лашманов
SEO-специалист
Опыт работы в SEO 4 года
60+ реализованных проектов

Дополнительные курсы:

SEO в СНГ - Rush Academy
SEO на запад - Rush Academy
UX/UI-дизайн - Skillbox
Школа экспертов Нетологии