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

Соберите понятную структуру

Держите проект в одной папке, чтобы его можно было целиком перенести на сервер. Для небольшого сайта достаточно index.html, style.css и каталога images. Используйте короткие имена файлов без пробелов и сохраняйте единый регистр.

first-site/
  index.html
  about.html
  style.css
  images/
    project.webp

На некоторых локальных системах Photo.webp и photo.webp воспринимаются одинаково, а на сервере Linux это разные имена. Такая разница часто объясняет картинку, которая работала до загрузки.

Разберитесь с адресами

images/project.webp — путь относительно текущего документа. /images/project.webp — путь от корня сайта. https://example.com/images/project.webp — полный адрес с доменом. Для проекта в подпапке корневой путь может вести не туда, куда вы рассчитывали.

Не вставляйте в HTML путь C:Users… или адрес file:// с вашего компьютера. Другой посетитель не имеет доступа к этому файлу. Ссылаться нужно на ресурс, который входит в опубликованный проект.

Подготовьте изображение

Экспортируйте изображение в размере, достаточном для его отображения, но не загружайте многомегапиксельный оригинал ради маленькой карточки. Сравните качество и вес. Для фотографий могут подойти WebP или AVIF; окончательный выбор зависит от аудитории и процесса подготовки.

У img укажите осмысленный alt, исходные width и height. Картинки ниже первого экрана можно загружать лениво, а главное изображение не стоит откладывать автоматически.

<img src="images/project.webp"
     alt="Главная страница учебного проекта"
     width="800" height="450"
     loading="lazy">

Проверьте переносимость

Скопируйте проект в другую папку и откройте снова. Все локальные ссылки и картинки должны остаться рабочими. В Network после публикации не должно быть 404 для CSS и изображений. Следующий шаг — выбор способа размещения. Дополнительно: img и link.