Когда старый сайт заменяют новым, текстовое содержание обычно кто-то вычитывает, а изображения часто воспринимают как «заодно перенесём». И только после запуска выясняется: фотографии товаров размыты, кейсы без картинок, баннер обрезан из-за смены размера, а откуда взялись некоторые изображения — непонятно. Проблемы с изображениями не мешают сайту открываться, но напрямую влияют на первое впечатление посетителей о компании и создают сложности при дальнейшем сопровождении.
Ниже мы разберём типичные проблемы с изображениями в том порядке, в котором они возникают при редизайне. Для каждой категории приведём конкретные шаги для проверки, чтобы вы могли пройтись по своему проекту и отметить выполненные пункты.
1. Этап инвентаризации: нет списка изображений со старого сайта, всё держится на памяти
Самая распространённая ошибка при редизайне — сразу открыть главную страницу старого сайта и начать делать скриншоты и сохранять файлы, вместо того чтобы сначала системно описать все изображения. За несколько лет работы сайта картинки могут оказаться в текстах статей, карточках товаров, шапках разделов, всплывающих окнах, подвале и других местах. Вручную перелистывая страницы, легко что-то упустить.
Надёжнее сначала составить список изображений. Предположим, на старом сайте есть три основных раздела: товары, кейсы, новости. Можно организовать данные по следующим полям:
- Адрес страницы или раздел, где находится изображение
- Расположение изображения на странице (шапка, иллюстрация в тексте, миниатюра и т.д.)
- Есть ли уже локальный файл оригинала
- Нужно ли это изображение на новом сайте
- Решение: оставить, заменить, удалить, уточнить
Список не должен быть сложным — достаточно одной таблицы. Главное — превратить вопрос «какие картинки переносим, а какие нет» в список с галочками, а не решать это в последний момент перед запуском. Критерии могут быть простыми: то, что связано с текущим бизнесом, оставляем; фотографии снятых с продажи товаров, устаревшие акционные баннеры, явно устаревшие командные фото можно пометить на удаление или замену.
2. Имена файлов: китайские названия, кракозябры и «IMG_0231»
На старых сайтах часто встречаются имена вроде «微信图片_20230512.jpg», «未标题-1.png» или просто набор цифр. При миграции такие файлы не создают проблем, но на новом сайте ими сложно управлять: чтобы найти нужную картинку товара, коллеге придётся открывать файлы по одному.
Редизайн — хороший повод переименовать изображения. Рекомендуем использовать строчные латинские буквы или пиньинь в формате «раздел-содержание-номер», например, для страницы товара — product-a-01.jpg, для кейса — case-hangzhou-02.jpg. Правила не должны быть слишком сложными — достаточно, чтобы несколько человек в команде понимали их и могли найти файл по ключевому слову.
Также избегайте пробелов, китайской пунктуации и специальных символов в именах файлов. При передаче между разными системами такие символы могут превратиться в кракозябры, а после загрузки в админку отображаться некорректно. Единые правила именования упростят замену изображений и сверку версий в будущем.
3. Размеры и форматы: вёрстка нового сайта отличается от старого
Размеры изображений на старом сайте подогнаны под старый шаблон. После смены вёрстки та же картинка может растянуться, обрезаться или оставить пустые поля. Типичные проявления: у баннера обрезаны края, пропорции товара искажены, на мобильном видно только центральный фрагмент.
Чтобы решить эту проблему, сначала уточните фактические размеры и пропорции каждого места под изображение на новом сайте, а затем решайте, использовать старое изображение как есть или экспортировать заново. Если шапка нового сайта — широкоформатная, а на старом сайте баннер был почти квадратным, то его, скорее всего, придётся обрезать заново или заменить, а не втискивать в новый блок.
Что касается форматов: для фотографий обычно используют JPG, для иконок, логотипов и изображений с прозрачным фоном — PNG. Если при редизайне обнаружится много тяжёлых изображений, их можно сжать при повторном экспорте, но степень сжатия должна быть такой, чтобы на глаз не было заметной размытости. Не стоит жертвовать деталями товара ради уменьшения размера файла.
4. Ссылки на изображения: после смены домена старые адреса перестают работать
Если новый сайт использует новый домен или структуру каталогов, адреса изображений со старого сайта изменятся. В уже опубликованных статьях, на внешних площадках, в проиндексированных поисковиками страницах изображения могут перестать открываться. Пользователь видит пустой блок или битую картинку — это плохо сказывается на впечатлении.
Перед редизайном можно выгрузить список основных URL изображений со старого сайта, а после запуска проверить каждый: какие ещё доступны, какие уже нет. Для изображений, которые нужно сохранить, постарайтесь оставить похожие пути на новом сайте или настроить перенаправление. Для тех, что больше не используются, хотя бы убедитесь, что страницы, где они были, уже обновлены.
Отдельно проверьте способ вставки изображений в тексты. В некоторых старых статьях картинки вставлены по прямой ссылке — после переезда такие адреса не обновятся автоматически, их нужно заново загрузить и заменить. Когда статей много, такие проблемы легко пропустить. Рекомендуем проверять по разделам, а не только главную страницу.
5. Авторские права и источники: не переносите изображения с неясным происхождением
Изображения на старом сайте могут быть из разных источников: предоставленные дизайн-студией, сделанные сотрудниками, скачанные с фотостоков, сохранённые с других сайтов. Если при редизайне перенести их как есть, то изображения с неясным происхождением останутся на новом сайте.
Надёжный подход — добавить в список инвентаризации колонку «Источник». Если изображение сделано самостоятельно или куплена лицензия, его можно переносить. Если источник неизвестен, на картинке явно чужой водяной знак или она просто сохранена из интернета, лучше заменить её. Особенно это касается заметных мест: шапка сайта, главные фото товаров — не используйте там материалы с неясным происхождением.
Если у компании нет собственной фотобазы, при редизайне можно заодно создать внутреннюю папку с изображениями, сложить туда подтверждённые к использованию файлы и подписать назначение и источник. В следующий раз при редизайне или подготовке акции не придётся искать картинки по всему интернету.
6. Управление в админке: изображения загружены, но никто их не ведёт
После запуска нового сайта меняется и способ управления изображениями. В одной админке есть медиабиблиотека, в другой нужно загружать файлы по разделам. Типичные проблемы: один и тот же логотип загружен десятки раз, у изображений стоят имена по умолчанию, и через некоторое время никто не может сказать, какая версия актуальна.
Рекомендуем после запуска выработать простые привычки: перед загрузкой переименовывать файл по правилам; при загрузке заполнять осмысленный заголовок или альтернативный текст, чтобы было легко искать; периодически удалять неиспользуемые изображения, чтобы медиабиблиотека не разрасталась. Альтернативный текст не должен быть длинным — достаточно описать, что на изображении и где оно используется.
Если обновлением занимаются несколько человек, лучше договориться о правилах хранения, например: «фото товаров — в папку товаров, фото акций — по годам». Чем проще правило, тем охотнее его соблюдают. Сложная иерархия папок, наоборот, отпугивает.
Проверка изображений перед запуском
На финальном этапе редизайна проверку изображений можно сделать за один подход:
- Откройте каждую страницу нового сайта и убедитесь, что нет битых, пустых или не загрузившихся изображений.
- Проверьте, полностью ли отображаются изображения на главной, в разделах, карточках товаров и статьях, нормальные ли пропорции.
- Посмотрите сайт с телефона, особенно шапку и фото товаров — не обрезаны ли ключевые части.
- Убедитесь, что адреса изображений со старого сайта, которые нужно сохранить, по-прежнему доступны.
- Сверьте источники изображений и замените те, у которых происхождение неясно.
- Проверьте имена и категории изображений в медиабиблиотеке, чтобы коллеги могли сразу найти нужное.
Проблемы с изображениями — это чаще не техническая сложность, а отсутствие ответственного на этапе редизайна. Отнеситесь к ним так же серьёзно, как к текстам: заранее составьте список, определите правила, проведите проверку перед запуском — и вы избежите многих доработок после релиза.
