Заголовок уже на месте, цвета подобраны, расписание и цена указаны. И всё же страница выглядит как шаблон. Те же фотографии легко представить на сайте другой мастерской.
Замена фотографий в HTML-шаблоне часто остаётся на самый конец. Так же бывает со страницей, которую сгенерировал ИИ или передал дизайнер. Структура уже подходит, а снимки ещё нужно подобрать под новый сезон, услугу или товар. На готовой странице можно оценить каждое фото рядом с заголовком и описанием.
Возьмём страницу вымышленной гончарной мастерской Claywell. На первом экране чёрно-белый натюрморт уступит место фотографии рабочего стола. Ниже, в разделе о материале, вместо снимка с несколькими предметами посуды появится иллюстрация одной чаши.
Меняем изображения прямо на готовой HTML-странице
Откройте файл в онлайн-редакторе HTML-файлов HtmlDrag через раздел «Загрузка HTML». В файле Claywell уже есть исходные фотографии, шрифт и стили. Поэтому работать можно сразу со всей страницей курса.
Прежде чем выбирать замену, посмотрите, как устроен первый экран. У Claywell рядом стоят натюрморт с керамикой, жёлтая карточка с информацией о курсе и крупный план рук, которые лепят из глины. Если заменить левое фото, заголовок, цена и снимок справа останутся перед глазами. Так проще оценить новое изображение в контексте.
Выбираем фото под то, что хочет увидеть посетитель
У магазина керамики и гончарной мастерской могут быть похожие снимки, но посетители приходят с разными вопросами. Готовые изделия показывают результат. Стол с глиной и инструментами помогает представить сам процесс. Для курса, рассчитанного на новичков, это полезно показать уже на первом экране.
В разделе о материале посетителю хочется рассмотреть изделие вблизи. Рядом с заголовком «Идеальной формы не существует» одна чаша лучше показывает неровный край и фактуру глазури, чем фотография сразу нескольких чашек и тарелок. Первый экран знакомит с занятием, а снимок ниже помогает разглядеть деталь.
| Где используется | Какой снимок подойдёт | Что должно быть хорошо видно |
|---|---|---|
| Главное фото или сцена занятия | Понятная сцена с запасом пространства вокруг главного предмета или человека. | Само занятие с первого взгляда, рядом с заголовком и главной кнопкой. |
| Деталь товара или материала | Один хорошо освещённый предмет с запасом по краям. | Форма, отделка и особенность, о которой говорится в тексте. |
| Дополнительное изображение | Другой ракурс, фактура или крупный план. | Деталь, которой нет на главном снимке. |
При выборе файла учитывайте его пропорции, запас пространства вокруг предмета и то, какие детали будут видны в реальном размере. Даже горизонтальное фото может потерять главное в узкой рамке. Вертикальный снимок с достаточным запасом по краям иногда подходит и для широкой рамки.
Короткое описание задачи пригодится и при поиске в фотобанке, и когда изображения готовит другой человек.
Страница рассказывает о курсе керамики для начинающих. Для первого экрана нужна фотография рабочего стола. В разделе о материале нужна иллюстрация, на которой хорошо видна одна чаша. Оставьте место вокруг рук и края чаши, чтобы кадр подходил для компьютера и телефона. Сохраните согласованную вёрстку и сведения о курсе, а изображения подберите под его содержание.
На первом экране исходной страницы Claywell стоит натюрморт. В разделе о материале видно несколько предметов посуды. Текст рядом подсказывает, что должна показать каждая замена.
Заменяем главное фото в существующей вёрстке
На новом фото видны инструменты, глина и рабочий стол. Снимок справа крупным планом показывает движения рук. Первый кадр знакомит с мастерской. На втором можно рассмотреть, как в ней работают.
В HtmlDrag нажмите правой кнопкой мыши на фотографию и выберите «Заменить изображение…». Когда рядом расположены несколько снимков и карточек, проверьте, что выбрали именно нужную фотографию.
Для файла с компьютера есть вкладка «Загрузить с устройства». Адрес уже размещённого изображения можно указать во вкладке «Использовать онлайн изображение». Для Claywell мы загрузили заранее подготовленный снимок с компьютера.
После замены посмотрите на первый экран целиком. Более насыщенная фотография привлекает внимание, но цену курса и главную кнопку должно быть легко найти. По миниатюре в фотобанке этого не понять.
В этом примере фактура рабочего стола хорошо выделяется на фоне простой жёлтой карточки. Сцена узнаваема и после кадрирования. Проверяя свой первый экран, посмотрите, понятно ли, что происходит на фото, и легко ли перейти от заголовка к кнопке.
Показываем одну важную деталь
Изображение крупным планом помогает рассмотреть конкретную особенность. У керамики это может быть край чаши, глазурь или фактура поверхности. У других товаров это может быть застёжка, отделка или этикетка. Сначала решите, что нужно показать, а затем выбирайте крупность кадра.
Для второй замены в Claywell мы использовали иллюстрацию чаши, заранее созданную с помощью ИИ. Светлая глазурь и неровный контур дополняют текст о форме изделий.
Здесь работает тот же инструмент замены. Исходное изображение вертикальное, а рамка на компьютере шире. Запас фона вокруг чаши позволяет подогнать кадр так, чтобы край остался виден целиком.
На крупном плане хорошо видны и чаша, и описание рядом. Проверяйте таким же способом фотографии товаров и материалов. Видно ли то, о чём говорит текст? Если рамка отрезает важную часть, попробуйте фото с запасом по краям или другой кадр. Возможно, этого будет достаточно, чтобы сохранить вёрстку.
Почему новое изображение обрезается или выглядит размытым
У изображения и области, в которую оно помещается, могут быть разные пропорции. В этом случае страница может обрезать края, чтобы заполнить рамку. Например, свойство CSS object-fit: cover сохраняет пропорции изображения и обрезает всё, что выходит за рамку.
Поэтому фотография, которая в галерее видна целиком, может оказаться обрезанной на сайте. Оцените края предмета прямо на странице и подберите кадр, в котором сохраняются нужные детали. При растягивании изображения форма предмета может исказиться.
Предпросмотр на компьютере позволяет оценить первый экран в обычном размере. Понятно ли занятие с первого взгляда? Дополняет ли снимок заголовок? Хорошо ли видна главная кнопка?
В разделе о материале чаше нужно достаточно места, чтобы её форму и поверхность можно было рассмотреть рядом с текстом. Проверяйте каждый снимок там, где он стоит. В уменьшенном виде всей страницы часть проблем незаметна.
Если фото выглядит размытым, проверьте исходный файл. При увеличении маленькой миниатюры недостающие детали не появятся. Возьмите оригинал подходящего качества, подготовьте файл для сайта и оцените его в размере, в котором его увидят посетители. Уменьшение картинки на странице само по себе не уменьшает объём скачиваемого файла.
Сохраняем изменения и проверяем мобильный вид
Когда обе фотографии хорошо смотрятся рядом с текстом, воспользуйтесь кнопкой «Сохранить версию». Если нужен файл для публикации на своём сайте, в окне экспорта выберите «Отредактированный HTML». Там доступны «Скачать HTML» и «Копировать HTML».
Обе замены сохранены в проекте Claywell. Обновлённый раздел о материале можно редактировать и дальше. Эта версия пригодится, когда нужно будет поменять даты, товары или сезонные фотографии.
Посмотрите на страницу и при ширине телефона. Рамка может стать уже, вспомогательный снимок может исчезнуть, а информация о курсе может оказаться в другом месте. Важно, чтобы основной предмет оставался узнаваемым. В узком окне Claywell фотография стола по-прежнему соседствует с жёлтой карточкой.
После замены фотографии иногда становится понятно, что рядом не хватает пояснения. Можно вставить короткую подпись о материале или добавить ссылку с фотографии товара на его карточку. Если посетителям нужно сравнить варианты курса, в HtmlDrag можно вставить таблицу и отредактировать её ячейки, строки и столбцы.
При правке соседних элементов готовые блоки можно заблокировать, чтобы случайно не сдвинуть их. Элемент с завершившейся акцией можно удалить. Так фотографии и содержание страницы будут соответствовать актуальному предложению.
Перед тем как использовать обновлённую страницу, проверьте несколько вещей.
- Нужные фотографии заменены, и главное в кадре легко различить.
- Детали хорошо видны и на компьютере, и на телефоне.
- Подготовленные для сайта файлы выглядят чётко в размере показа.
- Подписи, альтернативный текст и указание авторства соответствуют новым изображениям.
- Изображения со ссылками открывают нужные страницы.
- Сохранённая версия проекта и HTML для публикации содержат изменения.
Если на фотографии теперь другой предмет, пересмотрите и альтернативный текст. Рекомендации Google по изображениям советуют писать полезные описания с учётом содержания страницы. Конкретное описание того, что видно на снимке, полезнее списка ключевых слов.
Частые вопросы о замене изображений в HTML
Можно ли менять фотографии на HTML-странице, созданной с помощью ИИ?
Да, если HTML-файл нормально открывается в редакторе. Проверьте загрузку стилей и изображений, выберите нужный снимок и замените его. Если новый файл уже есть, его можно использовать сразу. Повторный запрос на генерацию изображения не понадобится.
Когда загружать файл, а когда указывать URL изображения?
Если согласованный файл есть на компьютере, загрузите его. URL подойдёт, когда изображение уже размещено по стабильному и доступному адресу. Если у вас есть только адрес галереи или страницы входа, найдите прямую ссылку на файл изображения.
Можно ли поставить вертикальный снимок в горизонтальную рамку?
Это зависит от свободного пространства вокруг предмета. У изображения чаши в Claywell достаточно фона для широкого кадра. Если предмет занимает весь снимок, важные детали могут исчезнуть. Посмотрите на результат в реальной рамке и при ширине телефона.
При замене фотографии обновятся ли подпись и ссылка?
Фотографию, подпись, указание автора и адрес перехода нужно проверить по отдельности. После замены прочитайте текст рядом и убедитесь, что ссылка, если она есть, открывает нужную страницу.
Какого размера должно быть новое изображение для сайта?
Подберите разрешение под область показа и проверьте, подходит ли размер файла для веб-страницы. Большая фотография на первом экране обычно требует больше деталей, чем изображение в небольшой карточке. Оцените вид в самом макете и проверьте действующее ограничение на загрузку.
Обновится ли опубликованный сайт после сохранения?
При сохранении изменения остаются в проекте HtmlDrag. Если сайт размещён отдельно, используйте отредактированный HTML в обычном процессе публикации этого сайта.
Снимок рабочего стола помогает представить занятие, а изображение одной чаши позволяет рассмотреть форму и глазурь. Если в вашем HTML-шаблоне ещё стоят временные или устаревшие фото, откройте файл в визуальном редакторе HTML и замените фотографии, подобрав новый снимок для каждого места на странице.