Добавление изображений

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

Этот пример показывает, как использование мультимедийных технологий может значительно обогатить восприятие и усилить эмоциональное вовлечение. Веб-страница с текстом, но совершенно без изображений выглядит очень скучно. Всемирная паутина приобрела свою популярность частично благодаря тому, что среди зарослей текста стали появляться изображения.

Основные понятия

Веб-страницы применяют два метода для размещения изображений: их можно встроить как часть контента или использовать как повторяющиеся фоновые элементы. Второй вариант обычно реализуется с помощью CSS-стилей.

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

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

Форматы изображений

Перед тем как изучать тег <img>, необходимо понимать, что не все форматы изображений поддерживаются веб-браузерами. Исходя из этого, важно знать, какие форматы изображений существуют и в каких случаях выбрать определенный формат для веб-страницы.

На современных веб-ресурсах можно выделить два типа изображений, которые активно применяются сегодня:

• Растровые (JPG, JPEG, PNG, GIF), те самые гифки.
• Векторные (SVG).

Растровые изображения состоят из множества маленьких точек, каждая из которых содержит информацию о цвете и прозрачности. Хотя эти изображения удобны для презентации в статьях, их главным недостатком является то, что они не сохраняют качество при увеличении размера. При увеличении изображения вы увидите, как оно начинает размываться из-за увеличения пикселей, что приводит к потере деталей и резкости.

Векторные изображения представляют собой графические объекты, составленные из математических формул, определяющих их расположение, форму и цвета. Благодаря такому подходу, векторные изображения могут быть масштабированы без потери качества и четкости, что делает их идеальным выбором для различных целей от веб-дизайна до печати. Вместо хранения пикселей, векторное изображение хранит информацию о линиях, кривых и точках, что делает его более гибким и универсальным форматом для работы с графикой.

Начнем с формата JPEG(Joint Photographic Experts Groups). Формат JPEG является одним из самых популярных для использования на сайтах из-за его способности поддерживать миллионы цветов и обеспечивать высокое качество изображений. Благодаря возможности оптимизации без значительной потери качества, файлы в формате JPEG занимают меньше места, что делает их идеальными для веб-страниц. Однако важно помнить, что повторная оптимизация может привести к ухудшению качества изображения.

Оптимизация изображений позволяет уменьшить объем их файла без потери качества изображения.

Все устройства и браузеры поддерживают файлы данного формата, что подтверждает его широкую популярность и обеспечивает стабильное отображение на веб-сайтах. Однако, несмотря на все преимущества, у этого формата есть один значительный недостаток — отсутствие прозрачности. Это означает, что невозможно сделать определенные части изображения прозрачными, чтобы видеть задний фон или другие элементы через них. В случае необходимости использования прозрачности, рекомендуется обратить внимание на следующий формат файла.

PNG(Portable Network Graphics). Формат PNG использует алгоритм сжатия без потерь, что помогает сохранить качество изображения. Данный формат позволяет использовать два вида цветовой глубины: 8-битный и 24-битный, оба из которых поддерживают прозрачность. 24-битный формат чаще используется для различных изображений на веб-сайтах, в то время как 8-битный менее популярен. Возможность использования прозрачности позволяет создавать уникальные комбинированные изображения, такие как кнопки и иконки с эффектами прозрачности.

Формат PNG позволяет многократно оптимизировать и редактировать изображения без потери качества. Он обеспечивает отличное отображение на всех браузерах и устройствах, что делает его универсальным решением. Хотя PNG файлы обычно имеют лучшее качество по сравнению с JPG, их размер может быть больше. Поэтому при загрузке изображений на сайт важно учитывать этот момент.

GIF(Graphics Interchange Format). GIF – это формат изображений, поддерживающий до 256 цветов, прозрачность и анимацию. Благодаря ограниченному числу цветов, размер файлов в формате GIF минимален, что делает его идеальным для создания анимаций, баннеров, кнопок, иконок и прочего. Однако, из-за ограниченности цветового спектра, GIF не подходит для фотографий и изображений с широким диапазоном цветов. В современном веб-дизайне использование GIF становится все реже, но все же остается популярным среди некоторых типов контента.

SVG и WebP становятся все более популярными в современном мире, идеально соответствуя требованиям веб-сайтов благодаря своей высокой скорости загрузки и адаптивности.

WebP — это формат изображений, созданный Google для использования в сети Интернет. Сегодня YouTube уже использует этот формат изображения, который поддерживает прозрачность и хорошо сжимается, сочетая в себе преимущества JPG и PNG без увеличения размера файла. Однако, не все браузеры поддерживают данный формат изображений.

SVG(Scalable Vector Graphics). SVG, или масштабируемая векторная графика, стала популярной недавно благодаря возможности масштабирования без потери качества. В начале ее развития браузеры плохо поддерживали этот формат, но сегодня все современные браузеры успешно его отображают. SVG идеально подходит для создания простых изображений, таких как логотипы или элементы дизайна, но не подходит для фотографий. Помимо этого, SVG файлы имеют небольшой размер, могут масштабироваться без потери качества и поддерживают анимированные элементы.

Добавление графики на веб-страницу

Структура мультимедийной информации отличается от текста, поэтому в HTML-коде она не описывается напрямую. Все мультимедийные файлы хранятся отдельно, а ссылки на них указываются в HTML-коде для воспроизведения контента.

Для размещения изображения на веб-странице используется одиночный тег <img>, который может быть размещен в любом месте тега <body>. Этот тег указывает браузеру, где должно быть размещено изображение, но не определяет само изображение и его источник. Для этого необходимо добавить дополнительные атрибуты. Основной атрибут тега <img> — это src, который указывает путь к файлу изображения. Пример кода для вставки изображения на HTML-страницу выглядит так: <img src=»image.jpg»>.

Если изображение хранится в той же папке, что и HTML-файл, достаточно указать его имя. В случае, если изображение находится в другой папке, требуется указать полный путь к нему. Рекомендуется помещать все графические файлы, используемые на веб-странице, в одну папку вместе с основным файлом страницы.

Давайте рассмотрим несколько примеров с указанием адреса файла изображения:

<img src= “image/folder.jpg”> – В папке, где находится HTML-документ, есть подпапка с названием «folder», в которой находится изображение с именем «image.jpg».

<img src= “…/folder.jpg”> – изображение размещено на уровень выше от документа.

Также возможно указать источник изображения, вставив ссылку на конкретный интернет-ресурс в атрибуте src:

<img src= “https://…/image/folder.jpg”>

Другим важным атрибутом является alt, который предоставляет описание изображения для случая, если оно не может быть отображено на странице. Например:

<img src= “image.jpg” alt= “Описание изображения”>

Когда браузер обнаруживает тег <img>, он отправляет запрос на сервер для загрузки соответствующего изображения. Все сталкивались с такой ситуацией, когда у вас низкая скорость подключения к Интернету и вам приходится ждать, пока изображения появятся на странице. Поэтому при создании сайта нужно обдумать количество изображений на нём и ограничить количество запросов к серверу для улучшения производительности.

Кроме src и alt, у тега <img> есть и другие атрибуты, о которых мы поговорили в таблице ниже:

Изучим атрибуты height и width более подробно. Они определяют размеры изображения в пикселях и могут значительно ускорить загрузку страницы. Браузеры используют эти размеры для резервирования необходимого места на странице до загрузки изображения, что предотвращает перестройку страницы при каждом новом добавлении фото. Такой подход позволяет оптимизировать процесс загрузки и улучшить пользовательский опыт.

Размеры изображения можно указывать не только в пикселях, но и в процентах. Если задана процентная величина, то размеры изображения будут рассчитываться относительно его контейнера — элемента, в котором находится тег <img>. Если нет контейнера, то размеры рассчитываются от размеров окна браузера. Например, указав width=»100%», изображение будет занимать всю ширину страницы. Рекомендуется использовать реальные размеры изображений при указании width и height, чтобы избежать потери качества изображения при его масштабировании.

Установка фонового изображения

Фоновое изображение — это файл с графическим содержимым, который заполняет фон окна браузера независимо от его размеров. Этот рисунок автоматически дублируется, чтобы создать единый фоновый узор. Для установки фонового изображения используется атрибут background, который указывается в теге <body>. Например: <body background= “image.jpg”>

Основы работы с видео и аудио

Для вставки аудиозаписей на веб-страницу используется тег <audio>. Любая информация, помещенная между открывающим и закрывающим тегом, будет проигрываться в браузере, который поддерживает <audio>, и не будет отображаться в тех браузерах, которые не поддерживают данную функцию. Код для вставки аудио:

<audio src = “sound.mp3”></audio>

Ниже приведена таблица с атрибутами тега <audio>

Видео добавляется следующим образом: 

<video src = “video.avi”></video>

Давайте также изучим основные атрибуты элемента <video>. Они схожи с атрибутами <audio> и <img>

Вывод

В данной статье мы изучили способы вставки изображений на веб-страницу при помощи тэга <img>. Мы подробно рассмотрели основные атрибуты, такие как src, который указывает путь к изображению, и alt, предназначенный для добавления замещающего текста, показываемого при невозможности загрузки картинки. Также мы обсудили применение атрибутов width и height для задания размеров изображений. Тема HTML является важной для сдачи экзамена ЕНТ, поэтому чем глубже и шире ваше понимание этой темы, тем больше вероятность успешной сдачи теста.

Фактчек

• Изображения вставляются с помощью тега <img>
• Атрибут src указывает путь к изображению.
• Атрибут alt добавляет альтернативный текст в случаях, когда изображение не загружается.

Задания для самопроверки:

Задание 1

Какой HTML-код корректно вставит изображение с альтернативным текстом «изображение недоступно» и размером 300×200 пикселей?

1. <img src=»image.jpg» alt=»изображение недоступно» width=»300″ height=»200″>
2.  <image source=»image.jpg» description=»изображение недоступно» width=»300px» height=»200px»>
3. <img href=»image.jpg» text=»изображение недоступно» size=»300×200″>
4. <picture src=»image.jpg» alt=»изображение недоступно» width=»300″ height=»200″>

Задание 2

Какой атрибут необходимо добавить к элементу <video>, чтобы обеспечить пользователю возможность управления воспроизведением видео (воспроизведение, пауза, регулировка громкости)?

1. autoplay
2.  loop
3. controls
4. muted

Задание 3

Какой атрибут в теге <audio> позволяет воспроизводить аудио по кругу?

1. autoplay
2. loop
3. controls
4. muted

Ответы: 1 – 1; 2 – 3; 3 – 2.