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

Проверить сначала

Начните с того, что загружает браузер

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

План изображений

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

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

Если план говорит, что файлам нужны новые версии, используйте руководство по конвертации изображений для выбора следующего шага. Для обычной работы с WebP используйте Руководство по конвертации JPG в WebP, а руководство по AVIF — только для больших фото, требующих дополнительной экономии.

Размеры изображений

Установите чёткие размеры для каждой области изображения

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

Простая проверка: если карточка 360 px загружает файл 2400 px, проблема не в сжатии. Нужна меньшая версия изображения или HTML указывает на неправильный файл.

Порядок загрузки

Загрузите первое изображение намеренно

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

1. 1

   Назовите LCP-изображение

   Если первое значимое изображение, вероятно, станет Largest Contentful Paint, не загружайте его лениво по ошибке.

2. 2

   Не отвлекайте нижние изображения

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

3. 3

   Проверить фоны CSS

   Обрезанный фон всё равно может загрузить большой файл. Используйте файл правильного размера для видимой области.

4. 4

   Проверить повторяющиеся запросы

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

HTML

Используйте адаптивный HTML для измеренной области

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

<picture>
  <source
    type="image/avif"
    srcset="/images/article/product-640.avif 640w,
            /images/article/product-960.avif 960w,
            /images/article/product-1280.avif 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <source
    type="image/webp"
    srcset="/images/article/product-640.webp 640w,
            /images/article/product-960.webp 960w,
            /images/article/product-1280.webp 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <img
    src="/images/article/product-960.jpg"
    alt="Скриншот панели с процессом загрузки"
    width="960"
    height="540"
    loading="lazy"
    decoding="async" />
</picture>

Поиск и публикация

Сделайте так, чтобы изображения, alt-текст и метаданные рассказывали одну историю

SEO для изображений — это не просто добавление ключевых слов. Видимое изображение, соседний текст, полезный alt-текст, теги Open Graph и ссылки JSON-LD должны ясно описывать одну страницу. Декоративные изображения должны оставаться декоративными.

Если проверка выявляет слабые социальные превью, продолжайте с Руководство по изображениям Open Graph. Если проблема в схемах и метатегах, используйте Руководство по метаданным Blazor для согласованности JSON-LD и метаданных страницы.

Шаги

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

1. 1

   Откройте реальную страницу

   Начинайте с текущего URL, а не из папки с ресурсами. Запишите реально загружаемые изображения.

2. 2

   Создать план изображений

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

3. 3

   Конвертировать только изменённое

   Используйте инструменты конвертации только для файлов, найденных проверкой, а не для всей папки с медиа.

4. 4

   Обновите HTML и метаданные

   Указывайте srcset, sizes, размеры, Open Graph и ссылки JSON-LD на подготовленные файлы.

5. 5

   Проверьте вывод браузера

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

6. 6

   Сохраните правило на будущее

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

Контрольный список

Чеклист изображений перед публикацией

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