"Информатика. Учебное пособие для общеобразовательных учреждений с русским языком обучения", Г. А. Заборовский, А. Е. Пупцев
Изображение на веб-странице — это отдельный графический файл, который браузер загружает по адресу, указанному в HTML. Тег задаёт место картинки в документе, а атрибут src сообщает, где находится файл. Альтернативный текст помогает понять содержание изображения, если оно не загрузилось или недоступно пользователю. Чтобы страница открывалась быстро и выглядела правильно, нужно подобрать подходящий формат, верный путь и разумные размеры.
Текст подготовлен нейронной сетью по теме параграфа и не заменяет учебник — важные факты и формулировки сверяйте с ним.
Тег <img> — одиночный HTML-тег, который задаёт место изображения в документе. У него нет закрывающего тега: запись открывает элемент и сразу завершает его. Браузер использует этот элемент, чтобы показать графический файл рядом с текстом и другими частями страницы. Поэтому тег указывает не на само изображение внутри HTML, а на то, где его нужно разместить.
Атрибут src содержит адрес файла изображения. Атрибут — это дополнительное указание внутри тега; в src записывают путь к файлу или его полный веб-адрес. По этому адресу браузер запрашивает графику отдельно от HTML-документа. Если адрес составлен неверно, тег останется в разметке, но изображение найти не получится.
Альтернативный текст — краткое словесное описание или обозначение назначения изображения, задаваемое атрибутом alt. Оно пригодится, если файл не загрузился или пользователь не видит картинку. Программа чтения с экрана может озвучить описание, поэтому оно помогает воспринимать содержание страницы. Текст должен быть полезным и соответствовать изображению, а не просто повторять слово «картинка».
Формат графического файла определяет способ хранения изображения в файле. От формата зависят размер файла, особенности сжатия и то, доступны ли прозрачность или анимация. Сжатие уменьшает объём данных, но в некоторых форматах может снижать качество. Выбирая формат, учитывают не только расширение имени, но и вид изображения, который нужно сохранить.
HTML-документ содержит ссылку на графический файл, а не обязательно сами пиксели изображения. Когда браузер встречает тег <img>, он читает адрес в src и отдельно запрашивает файл по этому адресу. Такой подход позволяет использовать один файл на разных страницах и обновлять его независимо от разметки. Но если запрос не находит файл или загрузка не удаётся, браузеру нечего показывать в указанном месте.
Адрес можно записать относительным или абсолютным. Относительный путь, например images/logo.png, отсчитывается от папки, где находится HTML-файл; он удобен, когда страницы и изображения хранятся вместе внутри сайта. Абсолютный URL содержит полный адрес ресурса, поэтому его можно указать и для файла на другом сервере. В обоих случаях путь обязан соответствовать реальному расположению файла: браузер ищет именно по записанному адресу, а не подбирает похожее имя.
Изображение добавляют тегом <img>, указывая src и осмысленный alt; ширину и высоту можно задать атрибутами width и height. Альтернативный текст объясняет картинку, когда она не видна, а размеры помогают браузеру выделить ей место на странице. Если ширину и высоту задать непропорционально исходным, изображение растянется или сожмётся. Кроме того, уменьшение картинки только на экране не обязательно уменьшает объём загружаемого файла, поэтому лучше заранее подготовить версию подходящего размера.
Для фотографий часто выбирают JPEG: он эффективно сжимает изображения с плавными переходами цвета, хотя сильное сжатие может сделать детали менее чёткими. PNG лучше подходит для логотипов, схем и другой графики с резкими границами; он сохраняет прозрачные области. GIF применяют для простой графики и анимации, но его ограниченная палитра не подходит для качественных фотографий. Таким образом, выбор формата зависит от того, какие свойства изображения нужно сохранить.
Крупный файл дольше загружается и может задерживать появление содержимого страницы, особенно при медленном соединении. Слишком сильное сжатие, напротив, ухудшает читаемость деталей и делает картинку размытой. Поэтому оценивают и вес файла, и качество, и то, можно ли понять страницу без изображения. Альтернативное описание делает содержание доступнее людям, которые не видят картинку, а компактные файлы помогают другим пользователям быстрее открыть страницу.
| Свойство | JPEG | PNG | GIF |
|---|---|---|---|
| Типичные изображения | Фотографии, изображения с плавными переходами цвета | Логотипы, схемы, графика с чёткими границами | Простая графика и небольшие анимации |
| Сжатие и влияние на качество | С потерями: меньший файл может означать снижение качества | Без потерь: детали сохраняются, файл может быть крупнее | Ограниченная палитра, подходит не для всех изображений |
| Поддержка прозрачности | Нет | Да | Да, но возможности прозрачности ограничены |
| Поддержка анимации | Нет | Обычный PNG — нет | Да |
| Подходящие случаи использования | Фотографии, для которых важно уменьшить размер файла | Прозрачные логотипы и графика, где важны чёткие края | Простые короткие анимации и небольшие значки |
Сначала определите, что именно изображено и какие свойства необходимо сохранить. Для снимков обычно рассматривают JPEG, для прозрачной графики — PNG, для простой анимации — GIF. Затем проверьте, достаточно ли качество и не слишком ли велик файл для быстрой загрузки.
Условие. Нужно разместить файл logo.png из папки images и указать альтернативный текст. Предположим, что папка images находится рядом с HTML-документом. Значит, путь к файлу можно записать относительно документа, не указывая полный адрес сайта.
Ответ. Фрагмент разметки: <img src=
Почему изображение не отображается на веб-странице?
Чаще всего в атрибуте src указан неверный путь, имя файла или расширение. Проверьте, где лежит изображение относительно HTML-документа, и убедитесь, что регистр букв в имени совпадает.
Чем отличается относительный путь от абсолютного?
Относительный путь указывает расположение файла относительно текущего HTML-документа, например images/logo.png. Абсолютный URL содержит полный адрес ресурса, например https://example.com/images/logo.png.
Зачем изображению задавать альтернативный текст?
Он сообщает содержание или назначение картинки, если изображение не загрузилось. Программы чтения с экрана озвучивают этот текст пользователям, которые не видят изображение.
Какой формат выбрать для фотографии, а какой — для прозрачного логотипа?
Для фотографии обычно подходит JPEG: он хорошо сжимает снимки. Для логотипа с прозрачным фоном выбирают PNG, который поддерживает прозрачность и сохраняет чёткие границы.
Можно ли уменьшить файл изображения, просто задав меньшие размеры в HTML?
Нет: ширина и высота меняют отображение картинки, но обычно не уменьшают объём исходного файла, который загружается браузером. Для ускорения страницы подготовьте изображение нужного размера и оптимизируйте его файл.
3.2. Изображения на веб-страницах
