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

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

Шаг 1. Правильные размеры

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

• Определите, какой максимальной ширины бывает изображение в каждом шаблоне: баннер, карточка, фото в статье
• Подготовьте варианты под мобильный и десктоп
• Учитывайте экраны с высокой плотностью пикселей: для них нужен вариант примерно вдвое больше по ширине, но не больше

Шаг 2. Адаптивные картинки

Атрибуты srcset и sizes позволяют дать браузеру набор вариантов картинки, и он сам выберет подходящий для экрана. Телефон загрузит маленькую версию, большой монитор — крупную. Многие CMS делают это автоматически, если загрузить исходник достаточного размера.

Шаг 3. Формат

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

Шаг 4. Сжатие

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

Шаг 5. Загрузка

• Изображения первого экрана — без отложенной загрузки, главное — с повышенным приоритетом
• Ниже первого экрана — отложенная загрузка
• Указывайте ширину и высоту, чтобы не было сдвигов макета

Шаг 6. Подписи для поиска

Имя файла

Латиницей, через дефис, по смыслу: implant-zuba-shema.webp вместо IMG_4521.webp. Для узбекской версии можно использовать узбекские слова латиницей.

Alt

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

Подпись и окружение

Текст рядом с картинкой помогает поисковику понять, что на ней. Для товаров и объектов это особенно важно.

Шаг 7. Доставка

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

Карта изображений

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

Что проверить после оптимизации

1. Вес ключевых страниц в инструментах разработчика до и после
2. LCP главной, карточек и статей в PageSpeed Insights
3. Качество изображений на телефоне и большом мониторе
4. Отображение в Telegram и соцсетях: картинки превью не должны пострадать
5. Индексацию изображений в Search Console

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

• Сжать картинки один раз и снова загружать новые без обработки
• Уменьшить картинку стилями, оставив исходный файл огромным
• Ставить текст на изображение вместо HTML: поисковик и экранные дикторы его не прочитают
• Одинаковый alt на всех фото галереи
• Удалить старые изображения, на которые ссылаются другие сайты, без перенаправлений

Как закрепить результат

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