Как оптимизировать изображения для SEO и быстрой загрузки

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

Загрузили фотографию прямо с телефона — 5 МБ. Потом ещё одну. Потом красивую обложку. А через некоторое время страница открывается так задумчиво, будто сначала решила выпить кофе.

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

Разберёмся без сложных терминов и без идеи «сжать всё до состояния пиксельной каши».

Зачем вообще оптимизировать изображения

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

Особенно это заметно на смартфоне или при не самом быстром интернете.

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

Но оптимизация — это не только уменьшение веса файла.

Хорошо подготовленное изображение:

• имеет подходящий размер;
• сохранено в разумном формате;
• не весит больше, чем необходимо;
• получает понятное имя файла и ALT;
• правильно отображается на компьютере и смартфоне;
• не заставляет посетителя ждать полвечера.

А теперь разберём всё это по-человечески.

Начинаем с размера: сайту не нужна фотография размером со стену

Одна из самых распространённых ошибок выглядит примерно так.

Вы сделали фотографию размером 5000 × 3500 пикселей, загрузили её в WordPress, а на странице она показывается шириной всего 800 пикселей.

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

Что делать обычному владельцу сайта

Перед загрузкой подумайте, какого максимального размера эта картинка будет на странице.

Если область статьи имеет ширину около 800–1000 пикселей, фотография шириной 5000 пикселей обычно там ни к чему.

Для обложек, карточек и миниатюр размеры могут быть ещё меньше.

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

Главный принцип простой:

не загружайте огромный оригинал туда, где он никогда не будет показан огромным.

JPEG, PNG, WebP, AVIF или SVG — что выбрать

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

На самом деле всё проще.

JPEG

Старый добрый формат для фотографий.

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

JPEG по-прежнему совершенно нормален. Не надо срочно устраивать похороны всех .jpg на сайте.

PNG

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

Но большие фотографии в PNG могут весить очень много.

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

WebP

Очень удобный современный вариант для сайтов.

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

Для обычного WordPress-сайта WebP сегодня часто оказывается отличным выбором.

AVIF

Ещё один современный формат с эффективным сжатием.

Google Search поддерживает AVIF наряду с JPEG, PNG, WebP, SVG и рядом других распространённых форматов.

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

SVG

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

SVG можно масштабировать практически без потери качества.

Если совсем коротко: фотографии — чаще JPEG, WebP или AVIF; прозрачная растровая графика — иногда PNG; логотипы и векторные элементы — SVG.

И никакой религии вокруг форматов нам не требуется.

Сколько должна весить картинка

А вот волшебного числа здесь нет.

Совет «каждая картинка должна весить не больше 100 КБ» звучит красиво, но слишком примитивен.

Маленькой иконке и огромной фотографии на весь экран нельзя назначить одинаковый лимит.

Наша задача другая:

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

Если обложку удалось уменьшить с 2,5 МБ до 180 КБ и визуально она почти не изменилась — прекрасно.

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

Сжатие изображений: не обязательно делать всё вручную

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

Плагины оптимизации умеют, например:

• сжимать загружаемые изображения;
• создавать WebP или AVIF;
• оптимизировать уже существующие файлы;
• создавать версии разных размеров;
• иногда настраивать lazy loading.

Но здесь действует наше любимое правило:

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

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

Сначала посмотрите, что уже умеют ваша тема, WordPress, хостинг и установленные плагины.

Что такое lazy loading

Представьте длинную статью с десятью картинками.

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

Зачем браузеру немедленно загружать все десять?

Для таких изображений и существует lazy loading — отложенная загрузка.

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

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

Но здесь есть важное исключение.

Главную картинку первого экрана лениво грузить не надо

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

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

Получается простое правило:

картинки далеко внизу — хорошие кандидаты для lazy loading; главная картинка первого экрана — обычно нет.

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

А что такое responsive images

Человек открыл сайт на огромном мониторе — ему может понадобиться большая версия фотографии.

Другой человек открыл ту же страницу на смартфоне — зачем ему загружать такой же огромный файл?

Для этого существуют адаптивные изображения.

В HTML используются механизмы srcset, sizes и при необходимости <picture>, позволяющие браузеру выбрать подходящий вариант изображения.

Звучит страшнее, чем работает.

В WordPress значительная часть этой кухни обычно происходит автоматически: система создаёт несколько размеров загруженного изображения и может отдавать браузеру подходящие варианты.

Поэтому обычному владельцу сайта необязательно вручную писать srcset.

Но знать, зачем WordPress создаёт несколько копий одной картинки, всё-таки полезно. Он не сошёл с ума.

ALT изображения: что туда писать

Вот мы и добрались до любимого места SEO-магических ритуалов.

ALT — альтернативный текст изображения.

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

Яндекс прямо рекомендует заполнять атрибут ALT и сообщает, что эта информация помогает роботу Яндекс Картинок понять изображение.

Хороший ALT описывает картинку

Допустим, в статье об оптимизации изображений находится скриншот WordPress с настройками WebP.

Нормальный вариант:

ALT: Настройка WebP в WordPress

А вот так делать не надо:

ALT: оптимизация изображений SEO изображения WordPress WebP продвижение сайта купить недорого Москва

Это уже не ALT. Это крик SEO-шника о помощи.

Если ключевая фраза естественно описывает картинку — прекрасно. Если нет — не надо заталкивать её туда силой.

Нужно ли заполнять ALT у каждой картинки

Не всегда одинаково.

Если изображение несёт смысл — фотография товара, схема, график, скриншот инструкции, иллюстрация — содержательный ALT полезен.

А если картинка исключительно декоративная и ничего не добавляет к содержанию, правила доступности допускают пустой alt="", чтобы вспомогательные технологии могли её пропустить.

Поэтому задача не в том, чтобы заполнить поле любой ценой.

Задача — правильно передать назначение изображения.

Имя файла тоже лучше сделать понятным

Перед загрузкой фотографии можно заменить:

IMG_847362.jpg

на что-нибудь вроде:

optimizatsiya-izobrazheniy.webp

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

Но здесь тоже без фанатизма.

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

Для новых картинок просто заведите хорошую привычку давать понятные имена до загрузки.

Картинка должна находиться рядом с подходящим текстом

Поисковая система смотрит не только на сам файл.

Имеет значение контекст страницы.

Если фотография иллюстрирует определённый фрагмент статьи, логично разместить её рядом именно с этим фрагментом.

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

И это удобно не только роботу.

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

Не прячьте важный текст только внутри картинки

Допустим, вы сделали красивую инфографику:

«7 способов ускорить сайт»

и все семь способов написаны только на ней.

Для человека всё понятно. Но важную информацию всё равно лучше продублировать обычным текстом страницы.

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

Есть и ещё одна причина: текст можно увеличить, скопировать, перевести, прочитать с помощью специальных технологий — с картинкой всё сложнее.

А Title изображения нужен?

В WordPress рядом с ALT есть ещё поле «Заголовок».

Из-за этого иногда возникает желание заполнить все поля одинаковой SEO-фразой.

Не надо.

ALT и Title — не два тайных места для двойной порции ключей.

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

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

Подпись и описание — заполнять или нет

Подпись имеет смысл, если она действительно помогает читателю.

Например:

Сравнение размера JPEG и WebP после сжатия.

Отличная подпись.

А писать под каждой декоративной картинкой:

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

не надо. Мы всё-таки сайт делаем, а не вызываем поискового джинна.

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

Как изображения связаны с SEO

Вот здесь особенно важно не обещать лишнего.

Нет кнопки:

«Оптимизировать картинки → подняться на пять позиций».

Работает совокупность факторов.

Оптимизированные изображения помогают:

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

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

Но оптимизация изображений сама по себе не гарантирует высоких позиций. И это нормально: SEO вообще редко работает одной волшебной кнопкой.

Что делать с картинками в WordPress: простой порядок

Вот теперь самое полезное.

Вы собираетесь добавить новую картинку в статью.

Шаг 1. Посмотрите на её размеры.
Если фотография 6000 пикселей шириной, а на сайте она никогда не будет такой большой, уменьшите её.

Шаг 2. Выберите подходящий формат.
Для фотографии обычно рассматриваем JPEG, WebP или AVIF. Для векторного логотипа — SVG. PNG используем там, где он действительно нужен.

Шаг 3. Сожмите изображение.
Добейтесь разумного веса без заметного ухудшения качества.

Шаг 4. Дайте файлу понятное имя.
Лучше optimizatsiya-izobrazheniy.webp, чем IMG_9837-final-final2.webp.

Шаг 5. Загрузите в WordPress.

Шаг 6. Напишите нормальный ALT.
Опишите то, что действительно изображено.

Шаг 7. При необходимости добавьте подпись.
Только если она полезна читателю.

Шаг 8. Проверьте страницу на телефоне.
Иногда идеальная картинка на компьютере внезапно превращается на смартфоне в обрезанное ухо дизайнера.

Вот и вся базовая оптимизация.

Нужно ли срочно переделывать все старые изображения

Если сайту десять лет и на нём тысячи файлов — нет, не надо бросать всё и три месяца переименовывать картинки.

Сначала ищем реальные проблемы.

Например:

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

Начинайте с самых посещаемых и самых тяжёлых страниц.

А для новых публикаций просто используйте правильный порядок сразу.

Как проверить, не тормозят ли картинки сайт

Для начала необязательно становиться специалистом по производительности.

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

Полезно также проверить сайт с телефона — причём не только через домашний быстрый Wi-Fi.

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

Главное — не оптимизировать сайт вслепую. Сначала найдите проблему, потом исправляйте именно её.

Короткий чек-лист оптимизации изображений

Перед публикацией задайте себе несколько вопросов:

Размер картинки разумный?
Не загружаю ли я огромный оригинал ради маленькой иллюстрации?

Формат подходит?
Не лежит ли обычная фотография в тяжёлом PNG?

Файл сжат?
Можно ли уменьшить его без видимой потери качества?

Имя файла понятно?

ALT действительно описывает изображение?

Картинка хорошо выглядит на смартфоне?

Изображения ниже первого экрана загружаются разумно?

Главная картинка первого экрана не отправлена бездумно в lazy load?

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

Вместо вывода

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

Это обычная цифровая гигиена.

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

Хорошая картинка должна делать три вещи:

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

А если при этом её ещё правильно понимают Яндекс и Google — совсем прекрасно.

🏳️‍🌈Волшебные хабы:

🎬 Тяжёлый контент, как не задушить сайт и планету одной 3D-анимацией