Если открыть медиабиблиотеку почти любого сайта, который несколько лет наполнялся без правил, картина будет примерно одинаковой: фотографии по пять-восемь мегабайт, скриншоты в PNG там, где хватило бы лёгкого JPEG, десятки дублей одного логотипа и файлы с названиями из случайных цифр. Всё это напрямую сказывается на скорости, а значит, на позициях в поиске и конверсии. Хорошая новость: правила работы с изображениями простые, и освоить их может любой контент-менеджер.
Что происходит при загрузке картинки
Когда вы загружаете изображение, WordPress не просто сохраняет файл. Он создаёт несколько копий разных размеров: миниатюру, средний, большой и средне-большой размер, а также все размеры, которые зарегистрировала тема и плагины. У интернет-магазина на WooCommerce из одной фотографии товара легко получается десяток файлов.
Из этого следуют два вывода. Во-первых, загружать огромный оригинал бессмысленно: посетителям всё равно показываются уменьшенные копии, а оригинал только занимает место на диске и в резервных копиях. Во-вторых, если тема регистрирует много лишних размеров, хранилище растёт кратно — это стоит проверить при аудите.
WordPress по умолчанию уменьшает слишком большие изображения при загрузке, сохраняя отдельную версию «масштабированного» оригинала. Это страховка, а не повод загружать фото с камеры как есть.
Подготовка изображения до загрузки
Лучший момент для оптимизации — до того, как файл попал на сайт. Вот порядок, который мы рекомендуем:
- Обрежьте лишнее. Кадрирование под нужные пропорции решает больше, чем любая компрессия: не будет смысла хранить половину кадра, которую тема всё равно отрежет.
- Уменьшите размер в пикселях. Для изображения внутри статьи достаточно ширины, примерно в полтора-два раза превышающей ширину колонки текста, — с запасом для экранов высокой чёткости. Для полноэкранного баннера — чуть больше ширины типичного широкого монитора.
- Выберите формат (подробнее ниже).
- Сожмите файл в графическом редакторе или онлайн-сервисе. Качество около восьмидесяти процентов для фотографий визуально почти неотличимо от исходного.
- Переименуйте файл осмысленно латиницей через дефис.
Ориентир по весу: обычная иллюстрация в статье — до двух-трёх сотен килобайт, большой баннер — до полумегабайта. Если файл весит мегабайты, что-то пошло не так.
Какой формат выбрать
| Формат | Для чего подходит | Чего избегать |
|---|---|---|
| JPEG | Фотографии, сложные изображения с плавными переходами | Схемы, текст, логотипы — появляются артефакты |
| PNG | Изображения с прозрачностью, скриншоты интерфейсов, графика с чёткими краями | Фотографии — файл получается в разы тяжелее |
| WebP | Почти всё: даёт меньший вес при том же качестве, поддерживает прозрачность | Редкие старые программы не открывают при скачивании |
| AVIF | Ещё более сильное сжатие фотографий | Нужна проверка поддержки на хостинге и в теме |
| SVG | Логотипы, иконки, простые иллюстрации — масштабируются без потерь | Загрузка от непроверенных пользователей: файл может содержать код |
WordPress поддерживает WebP из коробки. Плагины оптимизации умеют автоматически создавать WebP-версии для уже загруженных изображений и отдавать их браузерам. Загрузку SVG ядро по умолчанию не разрешает именно из соображений безопасности — если она нужна, включайте её через плагин с очисткой кода и только для администраторов.
Название файла и alt-текст
Название файла и альтернативный текст — две вещи, которые занимают секунды, но влияют и на доступность, и на поиск по картинкам.
Имя файла
Файл «IMG-4587.jpg» ничего не сообщает ни поисковику, ни вам самим через полгода. Пишите имя латиницей, коротко и по сути: «remont-kuhni-do-posle.jpg», «divan-uglovoj-seryj.jpg». Избегайте пробелов, кириллицы и спецсимволов — они превращаются в нечитаемые закодированные последовательности в адресе.
Альтернативный текст
Alt читают программы экранного доступа для незрячих пользователей, он показывается, если картинка не загрузилась, и помогает поисковым системам понять содержание изображения. Хороший alt описывает, что на картинке и зачем она здесь:
- плохо — «фото», «картинка1», набор ключевых слов через запятую;
- хорошо — «Угловой диван серого цвета в интерьере гостиной»;
- для чисто декоративных элементов — разделителей, фоновых узоров — alt оставляют пустым, чтобы экранные дикторы их пропускали.
Учтите: alt, заполненный в медиабиблиотеке, подставляется при вставке картинки в запись. Если изменить его в библиотеке позже, в уже опубликованных записях он не обновится — там нужно править отдельно.
Совет от студии: договоритесь в команде о простом правиле — ни одна картинка не публикуется без осмысленного имени файла и alt-текста. Это проще, чем потом исправлять сотни изображений при SEO-аудите.
Вставка в запись: размеры и адаптивность
При вставке изображения в редакторе можно выбрать размер: миниатюра, средний, большой, полный. Для обычной иллюстрации в тексте выбирайте «Большой» — тема сама подставит подходящую копию для разных экранов благодаря адаптивным атрибутам, которые WordPress добавляет автоматически. «Полный размер» без необходимости не выбирайте: на мобильном телефоне браузер может скачать тяжёлый оригинал.
Ещё две полезные детали. Отложенная загрузка — WordPress сам добавляет изображениям атрибут, который откладывает загрузку картинок за пределами экрана. А вот для главного изображения в первом экране отложенная загрузка вредна — его, наоборот, нужно загрузить как можно раньше. Хорошие темы учитывают это, но если показатели скорости проседают именно на первом экране, проверьте этот момент.
Порядок в медиабиблиотеке
Со временем библиотека разрастается, и найти нужный файл становится сложно. Что помогает:
- загружайте изображения из записи, а не в общую библиотеку — тогда файл «прикрепляется» к записи, и это видно в списке;
- заполняйте заголовок изображения — по нему работает поиск в библиотеке;
- если файлов тысячи, используйте плагин папок для медиатеки, но выбирайте тот, который не меняет физические пути файлов;
- не удаляйте изображения «на глаз»: картинка может быть использована в виджете, настройках темы или конструкторе, а библиотека об этом не знает.
Что делать с уже загруженными тяжёлыми файлами
Если сайт работает давно, переделывать каждую картинку вручную нереально. Здесь помогает пакетная оптимизация: плагин проходит по медиабиблиотеке, пережимает оригиналы и копии, при необходимости создаёт WebP-версии. Перед запуском обязательно сделайте резервную копию папки загрузок — сжатие с потерями необратимо.
Если тема менялась, в библиотеке могут остаться миниатюры размеров, которые уже не используются, а новых — не хватать. Регенерация миниатюр пересоздаёт копии под текущую тему. На больших магазинах это ресурсоёмкая операция, её лучше запускать в часы минимальной нагрузки.
Отдельная история — чистка неиспользуемых файлов. Плагины, которые ищут «сиротские» изображения, иногда ошибаются и предлагают удалить используемые файлы. Мы проводим такую чистку только с резервной копией и выборочной ручной проверкой.
Вывод
Правильная работа с изображениями — это привычка: обрезать, уменьшить, выбрать формат, сжать, назвать файл по-человечески и заполнить alt. Пять минут на подготовку экономят мегабайты трафика каждому посетителю и заметно ускоряют сайт. Если медиабиблиотека уже раздута и сайт тормозит, наши специалисты проведут оптимизацию изображений без потери качества в рамках администрирования, а при редизайне сразу настроят размеры миниатюр под новую тему.
