Чек-лист внедрения фотографии Татьяны

Документ нужен для этапа, когда будут готовы обработанные изображения по ТЗ docs/tatyana-photo-brief.md.

1. Подготовить файлы

Проверить, что в assets/img/ загружены:

• tatyana-hero.webp — основной вертикальный портрет 4:5;
• tatyana-hero-mobile.webp — облегченная мобильная версия;
• tatyana-social.jpg — горизонтальное изображение 1200×630 для Open Graph;
• tatyana-avatar.webp — квадратный портрет для карточек и будущих блоков.

2. Проверить вес файлов

Рекомендуемые ориентиры:

• tatyana-hero.webp — до 250–350 КБ;
• tatyana-hero-mobile.webp — до 150–220 КБ;
• tatyana-social.jpg — до 300–450 КБ;
• tatyana-avatar.webp — до 150–250 КБ.

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

3. Заменить hero-фото

Текущий файл assets/img/tatyana-hero.svg содержит встроенное base64-изображение. После подготовки WebP лучше заменить вывод фото на picture.

Рекомендуемый код:

<picture>
  <source media="(max-width: 760px)" srcset="/assets/img/tatyana-hero-mobile.webp" type="image/webp">
  <img src="/assets/img/tatyana-hero.webp" alt="Татьяна Стерликова, ипотечный брокер" width="900" height="1125" loading="eager">
</picture>

4. Проверить страницы

После замены изображения проверить:

• главную страницу;
• страницу /o-brokere/;
• мобильную версию главного экрана;
• карточку портрета в hero-блоке;
• подпись под фото;
• отсутствие неудачной обрезки лица и плеч.

5. Проверить Open Graph

В _layouts/default.html уже используется fallback:

https://sterlikova-ipoteka.ru/assets/img/tatyana-social.jpg

После замены файла tatyana-social.jpg проверить, что превью ссылки выглядит аккуратно:

• во ВКонтакте;
• в Telegram;
• в MAX;
• в других мессенджерах, если используются.

6. Проверить производительность

После внедрения:

• убедиться, что фото первого экрана загружается быстро;
• проверить, что у изображения есть width и height;
• не использовать base64 для большого фото;
• не подключать тяжелые библиотеки ради обработки изображения;
• оставить preload только для фото первого экрана, если оно реально используется в hero.

7. Проверить доступность

Alt-текст должен быть осмысленным:

• Татьяна Стерликова, ипотечный брокер;
• или Ипотечный брокер Татьяна Стерликова в Борисоглебске.

Не использовать alt-текст:

• фото;
• картинка;
• портрет без имени;
• девушка;
• сотрудник.

8. Проверить итог

Перед завершением задачи проверить:

• нет битых ссылок на изображения;
• нет старого base64-фото там, где оно уже не нужно;
• tatyana-social.jpg открывается напрямую;
• главная страница не “прыгает” при загрузке;
• на телефоне нижняя sticky-панель не перекрывает важную часть фото;
• социальное превью не обрезает лицо.