ТЗ по фотографии Татьяны для сайта

1. Цель

Подготовить фотографию Татьяны Стерликовой для сайта ипотечного брокера так, чтобы она работала на доверие, выглядела профессионально, хорошо смотрелась на главной странице, в карточке “О брокере”, в социальных превью и на мобильных экранах.

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

2. Где используется фотография

Фотография нужна для следующих зон сайта:

1. Главный экран сайта.
2. Страница “О брокере”.
3. Open Graph / social preview для мессенджеров и соцсетей.
4. Возможные рекламные баннеры и карточки в будущем.
5. Fallback-изображение для SEO и AI-превью.

3. Общий визуальный стиль

Сайт выполнен в строгой деловой стилистике с акцентом на цвета:

• черный;
• бордово-красный;
• белый;
• светло-серый фон;
• теплые мягкие оттенки для доверительных блоков.

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

4. Требования к обработке

4.1. Цвет и свет

Нужно:

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

Нельзя:

• сильно менять внешность;
• чрезмерно сглаживать кожу;
• делать лицо “кукольным”;
• менять форму лица, глаз, носа, губ;
• применять агрессивные фильтры.

4.2. Фон

Нужно подготовить 2 варианта:

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

Фон не должен спорить с лицом. Основное внимание — на Татьяне.

4.3. Кадрирование

Нужны варианты:

• вертикальный портрет 4:5 для главного экрана;
• квадрат 1:1 для аватаров и карточек;
• горизонтальный 1200×630 для социальных превью;
• облегченная мобильная версия с хорошим фокусом на лице.

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

5. Нужные итоговые файлы

Подготовить следующие изображения:

5.1. Hero-изображение

Файл: assets/img/tatyana-hero.webp

Размер:

• 900×1125 px или больше;
• пропорция 4:5;
• формат WebP;
• вес желательно до 250–350 КБ.

Назначение: главный экран сайта и блоки с портретом.

5.2. Social preview

Файл: assets/img/tatyana-social.jpg

Размер:

• 1200×630 px;
• формат JPG;
• вес желательно до 300–450 КБ.

Назначение: превью при отправке ссылки в ВК, Telegram, MAX и другие сервисы.

На изображении должно быть достаточно свободного пространства, чтобы текстовые превью соцсетей не перекрывали лицо.

5.3. Квадратный портрет

Файл: assets/img/tatyana-avatar.webp

Размер:

• 800×800 px;
• формат WebP;
• вес желательно до 150–250 КБ.

Назначение: аватар, карточки, дополнительные блоки доверия.

5.4. Легкая мобильная версия

Файл: assets/img/tatyana-hero-mobile.webp

Размер:

• 600×750 px;
• формат WebP;
• вес желательно до 150–220 КБ.

Назначение: быстрая загрузка на мобильных устройствах.

6. Требования к названию и alt-текстам

Рекомендуемые alt-тексты:

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

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

• “фото”;
• “картинка”;
• “девушка”;
• “сотрудник”.

7. Как фотография должна выглядеть на главной

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

Рекомендуемый визуальный прием:

• портрет в карточке с легким скруглением углов;
• под фото подпись: “Татьяна Стерликова — ипотечный брокер”;
• рядом короткий блок доверия: “Первичная консультация бесплатно”, “Борисоглебск, Грибановский, Поворино”, “Окончательное решение принимает банк”.

Фото не должно выглядеть как случайно вставленный снимок. Оно должно быть частью фирменного блока.

8. Как фотография должна выглядеть на странице “О брокере”

На странице “О брокере” использовать более спокойную подачу:

• крупный портрет;
• подпись с именем и специализацией;
• рядом текст о подходе к работе;
• без агрессивных рекламных эффектов.

Цель страницы — доверие и понятность, а не давление на продажу.

9. SEO и производительность

Для сайта важно:

• не использовать тяжелые изображения без сжатия;
• отдавать WebP для основных фото;
• использовать JPG 1200×630 для Open Graph;
• указывать width и height в HTML;
• не вставлять base64-фото в SVG, если есть возможность заменить на отдельный WebP/JPG-файл;
• использовать lazy loading для фото ниже первого экрана;
• для hero-фото можно использовать preload.

10. Почему фото может не отображаться сейчас

На главной странице сейчас указан файл:

assets/img/tatyana-hero.svg

Это временный вариант: SVG со встроенным base64-изображением. Такой способ хуже для сайта, чем обычный WebP/JPG:

• файл тяжелее обслуживать;
• сложнее заменить фото вручную;
• может некорректно отображаться после правок, кеширования или обработки GitHub Pages;
• сложнее сделать отдельную мобильную версию.

Правильное решение — загрузить нормальные файлы изображений и заменить tatyana-hero.svg на tatyana-hero.webp.

11. Как загрузить фото через GitHub

Открыть репозиторий:

deputat36/broker

Дальше:

1. Перейти в папку:

assets/img/

1. Нажать:

Add file -> Upload files

1. Загрузить подготовленные файлы строго с такими названиями:

tatyana-hero.webp
tatyana-hero-mobile.webp
tatyana-social.jpg
tatyana-avatar.webp

1. Внизу страницы в поле commit message написать:

Добавлены фотографии Татьяны для сайта

1. Нажать:

Commit changes

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

12. Как загрузить фото через GitHub Desktop

1. Открыть локальную папку репозитория broker.
2. Перейти в папку:

assets/img/

1. Скопировать туда 4 подготовленных файла:

tatyana-hero.webp
tatyana-hero-mobile.webp
tatyana-social.jpg
tatyana-avatar.webp

1. Открыть GitHub Desktop.
2. Проверить, что выбран репозиторий broker.
3. В поле Summary написать:

Добавлены фотографии Татьяны для сайта

1. Нажать Commit to main.
2. Нажать Push origin.

13. Что заменить в коде после загрузки

В файле index.md сейчас вверху указано:

hero_photo: /assets/img/tatyana-hero.svg

После загрузки фото нужно заменить на:

hero_photo: /assets/img/tatyana-hero.webp

В блоке главного экрана желательно заменить обычный img на picture:

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

Для Open Graph в шаблоне уже используется:

/assets/img/tatyana-social.jpg

Поэтому файл tatyana-social.jpg обязательно должен лежать в assets/img/.

14. Как проверить после загрузки

После коммита подождать 1–3 минуты, пока GitHub Pages пересоберет сайт.

Проверить прямые ссылки:

https://sterlikova-ipoteka.ru/assets/img/tatyana-hero.webp
https://sterlikova-ipoteka.ru/assets/img/tatyana-hero-mobile.webp
https://sterlikova-ipoteka.ru/assets/img/tatyana-social.jpg
https://sterlikova-ipoteka.ru/assets/img/tatyana-avatar.webp

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

Потом проверить главную:

https://sterlikova-ipoteka.ru/

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

15. Критерии приемки

Работа считается готовой, если:

• лицо выглядит естественно и узнаваемо;
• фото сочетается с фирменными цветами сайта;
• есть 4 версии изображения под разные задачи;
• файлы оптимизированы по весу;
• на мобильном экране лицо не обрезается неудачно;
• изображение не замедляет первый экран;
• alt-тексты заполнены осмысленно;
• социальное превью выглядит аккуратно при отправке ссылки;
• фото открывается по прямой ссылке на домене сайта;
• нет ощущения случайной фотографии из личного архива.

16. Дополнительные рекомендации

Если будет возможность провести новую фотосессию, лучше сделать несколько кадров:

• деловой портрет по пояс;
• портрет крупнее для аватара;
• кадр за рабочим местом или с ноутбуком;
• горизонтальный кадр с запасом пространства под рекламные макеты.