Картинки на сайт обычно загружают как есть, прямо из папки «Загрузки», под именами вида IMG_4829. При этом изображения приводят собственный трафик, влияют на скорость страницы и помогают поиску понять, о чём материал. Разбираем, что из оптимизации картинок действительно влияет на результат, что из советов устарело и как привести в порядок уже загруженную библиотеку.
Что даёт оптимизация картинок
Три вещи, и только первая очевидна.
Первая — трафик из поиска по картинкам. Он невелик в деньгах, но приходит к материалам, где есть схемы, графики и скриншоты. Вторая — скорость страницы. Изображения почти всегда самая тяжёлая часть страницы, и именно они определяют, как быстро появится первый экран. Третья — понимание содержания. Текст вокруг картинки и её описание помогают поиску связать страницу с темой.
Порядок работ выстраивается по тому же принципу. Сначала вес, потом описания, потом всё остальное.
Что влияет и насколько
| Что делаем | На что влияет | Сколько занимает |
|---|---|---|
| Сжатие и формат WebP | Скорость страницы, поведение посетителей | Разово на библиотеку, потом автоматически |
| Описание alt | Понимание картинки поиском, доступность | Минута на изображение |
| Имя файла | Дополнительный сигнал о содержании | Секунды, до загрузки |
| Свои схемы вместо стоков | Ценность материала, шанс на ссылки | Час на схему |
| Размеры и lazy loading | Скорость и стабильность вёрстки | Настройка шаблона один раз |
| Подпись под картинкой | Понимание смысла читателем | Минута |
Ниже по каждому пункту то, что стоит знать помимо очевидного.
Вес и формат
Фотография с телефона весит несколько мегабайт, а для страницы достаточно нескольких сотен килобайт. Разница в десять раз видна на скорости первого экрана, особенно на мобильном интернете.
Google в руководстве по картинкам перечисляет поддерживаемые форматы. Это BMP, GIF, JPEG, PNG, WebP, SVG и AVIF. Практический выбор простой. Фотографии и схемы в WebP, векторные иллюстрации и иконки в SVG, PNG только там, где нужна прозрачность и важна точность пикселей.
И ещё одно требование оттуда же. Расширение файла должно соответствовать его настоящему типу, а файл с именем .jpg, внутри которого лежит PNG, создаёт лишние проблемы.
Alt: главное поле и главное недоразумение
Alt описывает, что изображено. Его читают программы чтения с экрана и поисковые роботы, а видят посетители, у которых картинка не загрузилась.
В документации Google приводит три варианта одного описания, от плохого к лучшему. Плохой вариант это перечень ключевых слов про корм для щенков, средний это просто «щенок», а хороший звучит как «далматинец играет в мячик». Разница в том, что последний вариант описывает картинку так, как описал бы человек.
Отсюда два практических правила. Ключевую фразу в alt вставлять можно, если она там уместна по смыслу, а перечислять ключи нельзя. И alt не дублирует подпись под картинкой. Подпись добавляет мысль для читателя, alt объясняет изображение тому, кто его не видит.
Имя файла и текст вокруг
Имя файла — слабый сигнал, но он бесплатный. Переименовать файл перед загрузкой занимает пару секунд, а optimizaciya-kartinok-shema.webp читается лучше, чем IMG_4829.png.
Текст вокруг изображения работает сильнее имени. Схема, стоящая рядом с абзацем, который её объясняет, понятнее и человеку, и поиску, чем та же схема в конце статьи отдельным блоком. По этой же причине картинку стоит ставить после того абзаца, к которому она относится, а не перед ним.
Свои изображения против стоковых
Стоковая фотография улыбающихся людей у ноутбука не добавляет материалу ничего. Она стоит на тысяче сайтов и ничего не объясняет.
Работают собственные изображения, которые несут информацию. Схема процесса, скриншот отчёта с подписанными полями, график по своим данным, таблица-картинка для соцсетей. Такие изображения дают ещё один эффект: на них ссылаются и их цитируют, а это уже ссылки на страницу.
Мы в статьях этого блога рисуем схемы сами по той же причине. Абстрактная иллюстрация заняла бы место и ничего не сказала.
Проверка на полезность простая. Закройте подпись и спросите себя, что читатель поймёт из одной картинки. Если ответ «ничего», это украшение, и его можно убрать без потери. Хорошая схема пересказывает абзац текста без слов и запоминается лучше него, а плохая просто увеличивает вес страницы.
Техническая часть на стороне шаблона
- Атрибуты width и height у каждого изображения, чтобы страница не прыгала при загрузке.
- Отложенная загрузка для картинок ниже первого экрана и обычная для того, что видно сразу.
- Разные размеры под разные экраны, чтобы телефон не грузил картинку шириной в две тысячи пикселей.
- Картинки в карте сайта, если изображения важны для трафика.
- Отключение отдельных страниц вложений в WordPress, иначе каждая картинка плодит пустую страницу.
Последний пункт встречается на большинстве сайтов на WordPress и обычно закрывается настройкой SEO-плагина.
Чего ждать от трафика по картинкам
Трезвая оценка экономит разочарование. Поиск по картинкам редко становится основным каналом, и кликабельность там ниже, чем в обычной выдаче, потому что часть людей получает нужное прямо в галерее результатов.
Зато он работает неравномерно, и в этом весь смысл. В нишах, где ищут «как это выглядит», картинки приносят заметную долю посетителей. Интерьеры, ремонт, одежда, оборудование, инструкции со скриншотами, схемы процессов. В консалтинге и услугах эффект будет скромнее.
Проверить свой случай можно за минуту. В Search Console есть переключатель типа поиска, и рядом с обычными результатами лежит отдельная вкладка для картинок. Если показов там сотни, оптимизация окупится. Если единицы, ограничьтесь весом и описаниями, а время потратьте на текст.
Главный эффект всё равно не в этом канале. Он в скорости страницы, которую видят все посетители, независимо от того, откуда они пришли.
Как привести в порядок то, что уже загружено
Разбирать всю библиотеку целиком не нужно. Достаточно пройти по страницам, которые уже получают показы.
- Выберите десять страниц с наибольшим числом показов.
- Проверьте вес изображений на них и пережмите всё тяжелее двухсот килобайт.
- Пропишите alt там, где он пустой или состоит из набора ключей.
- Замените стоковые иллюстрации на свои схемы хотя бы в двух-трёх ключевых материалах.
- Проверьте скорость этих страниц до и после, чтобы понимать эффект.
Дальше правило простое. Всё новое загружается уже в порядке, с именем, alt и подписью.
С чего начать
Откройте любую свою статью и посмотрите на неё глазами человека, у которого не загрузились картинки. Если из alt-описаний непонятно, что было на изображениях, начинать нужно с них. Как эта работа встраивается в остальной порядок работы с контентом, описано в руководстве по контенту для сайта, а про оформление статьи целиком мы писали в материале о картинках в SEO.
Схемы и обложки для статей мы делаем в рамках контент-маркетинга, а техническую часть, от веса картинок до карты сайта, проверяет SEO-аудит.
