# Изображения для сайта: размеры, WebP, alt и скорость

Источник: https://quicklanding.ru/knowledge/website-images-webp-alt/

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

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

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

![Ноутбук на светлом столе рядом с предметами интерьера](/assets/images/knowledge/website-images-webp-alt.webp)

## Сначала определите назначение

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

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

## Подберите формат и размеры

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

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

| Место | Основная проверка |
| --- | --- |
| Карточка статьи | Объект различим после обрезки |
| Первый экран | Фото не задерживает появление основного содержимого |
| Иллюстрация инструкции | Детали читаются на телефоне |
| Снимок проекта | Можно рассмотреть интерфейс |
| Логотип | Есть подходящий фон и чёткие края |

## Что писать в alt

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

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

## Сделайте фото доступным и человеку, и роботу

Используйте обычное изображение в HTML там, где оно несёт содержание. В документации Google указано, что изображение, заданное только через CSS-фон, не обрабатывается как обычное индексируемое изображение. Декоративный фон можно оставить фоном, но важную схему или фото проекта стоит разместить содержательно.

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

## Проверьте итоговую страницу

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

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

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

## Документация и проверка сведений

Технические сведения сверены с документацией на 7 октября 2026 года. При настройке конкретного сервиса проверьте его текущую версию и действующие инструкции.

- [Google: изображения и поиск](https://developers.google.com/search/docs/appearance/google-images/)

## Материалы по соседним задачам

- [Показатели скорости](/knowledge/core-web-vitals-business/)
- [Страница услуги](/knowledge/service-page-structure/)
- [SEO перед запуском](/knowledge/seo-before-launch/)

## Частые вопросы

### WebP всегда лучше JPEG?

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

### Можно писать в alt все ключевые запросы?

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

### Нужно ли хранить фото на внешнем стоке?

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

Автор: Владимир Николаев