Урок 3. Картинки и пути к файлам

Картинка на странице — отдельный файл, а в HTML пишется только ссылка на него. Поэтому главное в этом уроке — не сам тег, а путь: как указать, где лежит файл, чтобы он нашёлся и у вас на компьютере, и на сервере.

Тег img

<img src="images/cake.jpg" alt="Яблочный пирог на тарелке" width="600" height="400">

• src — путь к файлу картинки (от source — источник).
• alt — замещающий текст. Его показывает браузер, если картинка не загрузилась, его читают вслух программы для незрячих, по нему поисковики понимают, что на картинке. Пишите коротко, что изображено. Для чисто декоративной картинки оставьте alt="" пустым, но не убирайте совсем.
• width и height — размер в пикселях, числом без px. Браузер заранее оставит под картинку место, и текст не будет прыгать, пока она грузится.

<img> — пустой тег, закрывающего </img> нет.

Чтобы картинка была ссылкой (например, маленькая открывает большую), её вкладывают в <a>:

<a href="images/cake-big.jpg">
  <img src="images/cake.jpg" alt="Яблочный пирог" width="300" height="200">
</a>

Картинку с подписью размечают тегами <figure> и <figcaption>:

<figure>
  <img src="images/cake.jpg" alt="Яблочный пирог" width="600" height="400">
  <figcaption>Пирог по рецепту из второго раздела</figcaption>
</figure>

Какой формат выбрать

Фотографию с телефона перед выкладкой уменьшите: снимок шириной 4000 пикселей весит несколько мегабайт, а на странице его всё равно покажут шириной 800–1200. Подойдёт любой графический редактор.

Как устроить папки

Держите все файлы сайта в одной папке, а картинки и стили — в своих подпапках:

site/
  index.html
  about.html
  css/
    style.css
  images/
    logo.png
    cake.jpg
  recipes/
    pie.html

Имена файлов и папок — латиницей, маленькими буквами, без пробелов: apple-pie.jpg, а не Яблочный пирог.JPG. Пробелы и русские буквы в адресах превращаются в коды вида %20, а при загрузке на сервер такие имена могут исказиться.

Относительные пути

Относительный путь отсчитывается от папки, где лежит сама страница. Разделитель — прямая косая черта /, как в адресах сайтов.

Со страницы index.html из схемы выше:

Со страницы recipes/pie.html картинки лежат уровнем выше. Подняться на папку вверх — ../:

<img src="../images/cake.jpg" alt="Яблочный пирог" width="600" height="400">
<a href="../index.html">На главную</a>

../../ поднимает на две папки, ./ означает текущую папку (./about.html — то же, что about.html).

Абсолютные пути и их ловушки

• Полный адрес https://example.com/images/logo.png — файл на другом сайте или на своём, но с полным адресом. Работает откуда угодно, пока файл есть по этому адресу.
• От корня сайта /images/logo.png — путь с косой чертой в начале отсчитывается от корня сайта на сервере. Но когда страница открыта с диска, «корнем» оказывается корень диска, и картинка не найдётся. Пока сайт лежит у вас на компьютере, пишите относительные пути.
• Путь на диске C:\Users\Anna\Desktop\site\cake.jpg или file:///C:/... — работает только на вашем компьютере. На сервере такого диска нет, и картинка пропадёт у всех посетителей.

Большие и маленькие буквы

Windows не различает регистр: Cake.JPG и cake.jpg для неё один файл. Серверы в интернете почти всегда работают на Linux, а там это два разных файла. Страница, где написано cake.jpg, а файл называется Cake.JPG, на вашем компьютере работает, а на хостинге показывает пустое место. Проще всего называть все файлы маленькими буквами.

Ленивая загрузка

Атрибут loading="lazy" просит браузер загружать картинку, только когда до неё дошла прокрутка. Длинная страница с десятками фотографий открывается быстрее:

<img src="images/photo-25.jpg" alt="Выпускной вечер" width="800" height="533" loading="lazy">

Первой картинке на экране, которую видно сразу, этот атрибут не нужен.

Если картинка не показывается

Вместо неё виден значок или текст из alt. Проверьте по порядку:

1. Имя файла и расширение совпадают до буквы: .jpg и .jpeg — разные имена.
2. Путь верен относительно страницы, а не относительно корня папки.
3. Файл действительно лежит там (и на сервере тоже, если сайт уже выложен).
4. Откройте инструменты разработчика (F12), вкладку «Network» («Сеть») и обновите страницу: у ненайденного файла будет код 404 и путь, по которому браузер его искал.

Об авторских правах

Чужие фотографии и рисунки с других сайтов без разрешения брать нельзя. Используйте свои снимки или картинки, у которых явно указано разрешение на свободное использование, и соблюдайте его условия.

Коротко

• Картинка — <img src="путь" alt="описание" width="…" height="…">, пустой тег.
• alt нужен всегда, у декоративных картинок — пустой.
• Фото — JPEG или WebP, прозрачность — PNG или WebP, логотипы и значки — SVG.
• Относительный путь отсчитывается от страницы: images/logo.png, уровень вверх — ../.
• Путь с / в начале и путь на диске C:\… ломаются: первый — при открытии с диска, второй — на сервере.
• Имена файлов — латиницей, маленькими буквами, без пробелов.

Проверьте себя