Оптимизация изображений для сайта: пошаговая инструкция

Почему картинки решают скорость сайта

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

В Ташкенте это ещё терпимо на домашнем Wi-Fi, но в регионах и на мобильном интернете в метро или за городом такая страница открывается с заметной паузой. Человек из Instagram или рекламы Meta не ждёт: он закрывает вкладку, и вы платите за клик, который не дошёл до сайта. Кроме того, скорость загрузки главного изображения входит в показатели, которые учитывает Google, поэтому тяжёлые картинки бьют и по SEO, и по конверсии.

Шаг 1. Размеры и адаптивные картинки

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

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

Атрибуты srcset и sizes дают браузеру набор файлов разной ширины, и он сам выбирает подходящий: телефон берёт лёгкий вариант, большой монитор — крупный. Многие CMS и конструкторы делают это автоматически, если загрузить достаточно большой исходник. Проверьте в коде страницы, что srcset действительно есть. И помните: уменьшение картинки стилями (CSS) не оптимизация. Файл остаётся огромным, меняется только его отображение.

• Баннер и обложка — самая большая ширина, под неё отдельная версия
• Карточки каталога — одинаковый размер на всех товарах
• Картинки в статьях — ширина колонки текста
• Для телефона — более узкие версии

Шаг 2. Формат и сжатие: что выбрать

Формат подбирается под тип изображения. Универсальной «лучшей» настройки нет, поэтому возьмите три-четыре типичных фото с вашего сайта, сохраните с разным качеством и сравните глазами на телефоне и мониторе.

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

• Фотографии — WebP или AVIF, JPEG как запасной вариант для старых браузеров
• Картинки с прозрачным фоном — WebP или PNG
• Логотипы, иконки, простые схемы — SVG
• Анимация — короткое видео вместо тяжёлого GIF

Шаг 3. Метаданные и порядок загрузки

Заодно удалите метаданные камеры: модель устройства, параметры съёмки, а иногда и геолокацию. Они добавляют вес и могут раскрыть лишнее, например место съёмки склада или дома.

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

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

Шаг 4. Имя файла, alt и окружение

Поисковик не видит картинку так, как человек, поэтому ему нужны текстовые подсказки. Имя файла пишите латиницей, строчными буквами, через дефис и по смыслу: divan-uglovoy-seryy.webp вместо IMG_4521.webp. Для узбекской версии страницы уместны узбекские слова латиницей.

Alt — короткое описание того, что на фото, с учётом контекста: «Кабинет имплантологии клиники на Чиланзаре». Не набивайте туда запросы вроде «стоматология ташкент недорого». Декоративным картинкам оставляйте пустой alt. Помогает и окружение: заголовок, подпись и абзац рядом должны говорить о том же, что и снимок.

Типичные ошибки

Эти ошибки встречаются на сайтах в Узбекистане постоянно, и большинство исправляется за один рабочий день.

• Сжали библиотеку один раз, а новые фото снова грузят без обработки
• Текст и цена нарисованы на баннере вместо HTML: поисковик и экранные дикторы их не прочитают
• Один и тот же alt у всех фото галереи
• Первый экран с ленивой загрузкой — главная картинка появляется с задержкой
• Папка с изображениями закрыта в robots.txt
• Удалили старые файлы, на которые ссылаются другие сайты, без перенаправления

Пример: интернет-магазин мебели в Ташкенте

Допустим, магазин публикует диваны и получает заказы через Telegram и форму на сайте. Фотограф присылает снимки большого размера, контент-менеджер заливает их напрямую, а каталог с десятками товаров открывается тяжело. Реклама в Instagram ведёт именно на этот каталог, и часть людей уходит, не дождавшись.

Что делаем: определяем размеры карточки и страницы товара, включаем автоматическую конвертацию в WebP, прописываем понятные имена файлов вроде divan-uglovoy-seryy.webp и уникальный alt для каждого ракурса. Для мебели это ещё и поиск по картинкам: люди выбирают диван визуально, поэтому свои фото с точным описанием рядом могут приводить дополнительный трафик. Чужие снимки с других сайтов брать нельзя: это риск по авторским правам и никакого преимущества в поиске.

Чек-лист после оптимизации и правила для менеджера

Проверьте результат до и после: вес главной, карточки и статьи в инструментах разработчика, LCP в PageSpeed Insights, качество картинок на телефоне и мониторе. Посмотрите, как ссылка на страницу выглядит в Telegram: превью не должно пострадать. В Search Console убедитесь, что изображения индексируются.

Чтобы результат закрепился, настройте автоматическую обработку при загрузке в CMS или на стороне CDN и дайте менеджерам короткую памятку: какого размера исходник загружать, как называть файл, что писать в alt. Если аудитория распределена по регионам, подключите CDN и настройте долгое кеширование в браузере.

Если хотите, чтобы технические работы по скорости и индексации сделала команда, посмотрите нашу услугу SEO-оптимизации сайта в Узбекистане. В markdev можно обсудить вашу задачу и понять, с каких страниц начинать: с каталога, главной или статей.