Картинки и медиа
Тег img и обязательный alt, подписи через figure, форматы и вес файлов, адаптивные картинки, видео и звук.
Что ты научишься делать
- Вставишь картинку так, чтобы страница не прыгала при загрузке
- Научишься писать alt, который действительно помогает
- Выберешь формат под задачу: SVG, WebP, JPG или PNG
#Тег img: картинка приходит извне
Текст ты пишешь прямо в HTML. Картинка так не работает: она лежит отдельным файлом, а в разметке остаётся только ссылка на него.
img — одиночный тег, закрывать нечего. Два его атрибута важнее всех остальных.
<img src="images/cup.svg" alt="Чашка капучино с рисунком на пене"><!-- ↑ путь к файлу ↑ описание словами -->#alt — не «для галочки»
alt (alternative text) — текстовая замена картинки. Он нужен в трёх случаях, и все три встречаются каждый день.
- Картинка не загрузилась — вместо неё покажется текст, и человек поймёт, что там было.
- Страницу читает голосовая программа — она произнесёт
altвслух. - Поисковик разбирает страницу — по
altон понимает, что изображено.
Так не надо
<img src="1.jpg" alt="картинка">Ноль информации. Голосовая читалка скажет «картинка» — человек ничего не узнает.
Так надо
<img src="1.jpg" alt="Бариста наливает молоко в чашку">Понятно и без картинки. Именно так и надо: коротко описать то, что важно на изображении.
#Размеры: почему страница «прыгает»
Пока картинка грузится, браузер не знает, сколько места она займёт, и оставляет ноль. Картинка приходит — текст под ней резко уезжает вниз. Это раздражает и называется сдвигом вёрстки.
Лечится атрибутами width и height: браузер заранее резервирует место в правильной пропорции. Ставь их с настоящими размерами файла, а масштаб потом задавай в CSS.
<img src="cup.jpg" alt="Капучино" width="800" height="600">#Подпись: figure и figcaption
Если у картинки есть подпись, их связывают в одну конструкцию. figure — самостоятельная иллюстрация, figcaption — её подпись.
Это не то же самое, что alt. alt заменяет картинку, когда её не видно. Подпись видна всем и дополняет изображение.
#Форматы: что выбрать
| Формат | Для чего | Особенность |
|---|---|---|
SVG | Логотипы, иконки, схемы | Это код, а не пиксели: масштабируется без потерь и весит копейки |
WebP | Фотографии на современных сайтах | На 25–35 % легче JPG при том же качестве |
JPG | Фотографии, запасной вариант | Понимают все браузеры; прозрачности нет |
PNG | Картинки с прозрачностью, скриншоты | Тяжелее JPG, зато без «замыливания» |
AVIF | Фото, где важен вес | Ещё легче WebP, но поддержка чуть скромнее |
#Разные картинки для разных экранов
Телефону не нужна картинка шириной 2000 пикселей — это лишние мегабайты. Браузеру можно дать выбор через атрибут srcset: он сам возьмёт подходящий файл.
<img src="cup-800.jpg" srcset="cup-400.jpg 400w, cup-800.jpg 800w, cup-1600.jpg 1600w" sizes="(max-width: 600px) 100vw, 600px" alt="Капучино на деревянном столе" width="800" height="600">Когда нужно не просто разный размер, а разные форматы или вовсе разные кадры, берут picture. Браузер идёт по списку сверху вниз и берёт первый вариант, который умеет показать.
<picture> <source srcset="cup.avif" type="image/avif"> <source srcset="cup.webp" type="image/webp"> <img src="cup.jpg" alt="Капучино на деревянном столе" width="800" height="600"></picture>#Видео и звук
Теги video и audio устроены похоже: у них есть controls — показать панель управления, и вложенные source — форматы на выбор.
<video controls width="640" height="360" poster="preview.jpg"> <source src="brew.webm" type="video/webm"> <source src="brew.mp4" type="video/mp4"> Твой браузер не умеет показывать видео. <a href="brew.mp4">Скачать файл</a></video>#Иконка сайта
Маленькая картинка на вкладке — фавикон. Подключается в head. Лучший формат — SVG: один файл на все размеры экранов.
<link rel="icon" href="/favicon.svg" type="image/svg+xml">#Собираем галерею
Где спотыкаются почти все
alt отсутствует или написан «для галочки»
Почему Без alt голосовая программа зачитает имя файла. С alt="фото" — не скажет ничего полезного.
Как надо Опиши то, что важно на картинке, одной короткой фразой. Декоративной картинке — alt="".
Картинка лежит рядом с index.html, а путь написан как <code>/images/cup.jpg</code>
Почему Слэш в начале означает «от корня сайта». При открытии файла с диска корень — это диск, и картинка не находится.
Как надо Внутри проекта пиши относительный путь: images/cup.jpg.
Фотография 4000 px вставлена как есть и сжата средствами CSS
Почему Браузер всё равно скачает все пять мегабайт. Уменьшение на экране не уменьшает вес файла.
Как надо Уменьшай картинку в редакторе до нужного размера и сохраняй в WebP.
Не заданы width и height
Почему Пока файл грузится, места под него нет — весь текст под картинкой подпрыгивает.
Как надо Ставь настоящие размеры файла атрибутами, а масштабируй в CSS.
- Альтернативный текст alt
- Текстовая замена картинки: для голосовых программ, поисковиков и случая, когда файл не загрузился.
- Сдвиг вёрстки layout shift
- Прыжок содержимого при загрузке: элемент занял место, которое под него не зарезервировали.
- Векторная графика SVG
- Изображение, описанное кодом: линиями и фигурами. Не теряет качества при увеличении.
- Растровая графика raster
- Изображение из пикселей: JPG, PNG, WebP. При увеличении становится мыльным.
- Фавикон favicon
- Маленькая иконка сайта на вкладке браузера и в закладках.
Проверь себя
Пустой alt — сигнал «пропусти, смысла нет». Отсутствие атрибута заставит читалку произнести имя файла.
Размер на экране задаётся в CSS. Атрибуты нужны, чтобы браузер знал пропорцию до загрузки файла.
Логотип — это фигуры и линии. SVG описывает их кодом: чёткий на любом экране и весит меньше килобайта.
Внутри <code>picture</code> лежат варианты <code>source</code>. Браузер берёт первый, который умеет показать, а рисует всегда вложенный <code>img</code>.
Подпись — часть содержимого, её читают все. <code>alt</code> — запасной вариант на случай, когда изображение недоступно.
Задание
Галерея с подписями
Собери галерею из трёх иллюстраций. Каждая — отдельный figure с картинкой и подписью figcaption. У каждой картинки должен быть осмысленный alt и заданы width и height.
Пути к картинкам уже подставлены в заготовку — просто дополни разметку.
Подсказка 1
Скопируй блок figure целиком ещё два раза и поменяй в копиях src, alt и подпись.
Подсказка 2
Готовые пути к картинкам можно взять из демо выше — там есть круассан и кусок торта.
Показать решение
<h1>Наша витрина</h1><figure> <img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%20width%3D%22120%22%20height%3D%22120%22%20role%3D%22img%22%20aria-label%3D%22%D0%A7%D0%B0%D1%88%D0%BA%D0%B0%20%D0%BA%D0%BE%D1%84%D0%B5%22%3E%20%3Crect%20width%3D%22120%22%20height%3D%22120%22%20rx%3D%2214%22%20fill%3D%22%23f3ece2%22%2F%3E%20%3Cpath%20d%3D%22M28%2044h52v30a22%2022%200%200%201-22%2022h-8a22%2022%200%200%201-22-22V44Z%22%20fill%3D%22%237a4a2b%22%2F%3E%20%3Cpath%20d%3D%22M80%2052h9a12%2012%200%200%201%200%2024h-9%22%20fill%3D%22none%22%20stroke%3D%22%237a4a2b%22%20stroke-width%3D%226%22%2F%3E%20%3Cpath%20d%3D%22M32%2048h44v8a22%2022%200%200%201-44%200v-8Z%22%20fill%3D%22%23c98a5a%22%2F%3E%20%3Cpath%20d%3D%22M46%2024c0%206-6%206-6%2012M60%2020c0%206-6%206-6%2012M74%2024c0%206-6%206-6%2012%22%20fill%3D%22none%22%20stroke%3D%22%23b9a894%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fsvg%3E" alt="Чашка капучино" width="120" height="120"> <figcaption>Капучино на кокосовом</figcaption></figure><figure> <img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%20width%3D%22120%22%20height%3D%22120%22%20role%3D%22img%22%20aria-label%3D%22%D0%9A%D1%80%D1%83%D0%B0%D1%81%D1%81%D0%B0%D0%BD%22%3E%20%3Crect%20width%3D%22120%22%20height%3D%22120%22%20rx%3D%2214%22%20fill%3D%22%23fbf1e0%22%2F%3E%20%3Cpath%20d%3D%22M22%2076c8-26%2032-42%2058-38%2012%202%2020%2010%2020%2018s-10%2015-22%2013%22%20fill%3D%22%23e0a55c%22%20stroke%3D%22%23b9762f%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M40%2060c4%208%204%2014%202%2020M56%2051c4%209%204%2016%202%2022M72%2049c4%208%205%2015%203%2021%22%20fill%3D%22none%22%20stroke%3D%22%23b9762f%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fsvg%3E" alt="Свежий круассан" width="120" height="120"> <figcaption>Круассан с маслом</figcaption></figure><figure> <img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%20width%3D%22120%22%20height%3D%22120%22%20role%3D%22img%22%20aria-label%3D%22%D0%9A%D1%83%D1%81%D0%BE%D0%BA%20%D1%82%D0%BE%D1%80%D1%82%D0%B0%22%3E%20%3Crect%20width%3D%22120%22%20height%3D%22120%22%20rx%3D%2214%22%20fill%3D%22%23fdeef2%22%2F%3E%20%3Cpath%20d%3D%22M26%2084V54l34-16%2034%2016v30Z%22%20fill%3D%22%23f6d7c4%22%20stroke%3D%22%23c98a5a%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M26%2062h68M26%2072h68%22%20stroke%3D%22%23e4a97e%22%20stroke-width%3D%224%22%2F%3E%20%3Cpath%20d%3D%22M26%2054%2060%2038l34%2016-34%2012Z%22%20fill%3D%22%23f5b3c4%22%20stroke%3D%22%23d4718c%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Ccircle%20cx%3D%2260%22%20cy%3D%2234%22%20r%3D%226%22%20fill%3D%22%23d4718c%22%2F%3E%20%3C%2Fsvg%3E" alt="Кусок медовика" width="120" height="120"> <figcaption>Медовик по бабушкиному рецепту</figcaption></figure>