Как работать с изображениями в HTML – руководство для начинающих
Изображения являются неотъемлемой частью веб-разработки, добавляя визуальную привлекательность и контекст вашим веб-страницам.
В HTML вы можете легко вставлять изображения для улучшения взаимодействия с пользователем. Эта статья познакомит вас с основами работы с изображениями в HTML и поможет вам лучше понять изображения в HTML.
Как вставить изображение на веб-страницу
Чтобы отобразить изображение на вашей веб-странице, вы будете использовать элемент <img>. Это самозакрывающийся тег, что означает, что вам не нужен закрывающий тег </img>. Вместо этого вы помещаете источник изображения и другие атрибуты в открывающий тег.
Вот основной синтаксис:
<img src="image.jpg" alt="Description of the image">- Атрибут
srcуказывает местоположение файла изображения. - Атрибут
altпредоставляет альтернативный текст для программ чтения с экрана, который отображается, если изображение не загружается.
Пример:
<img src="cat.jpg" alt="A cute cat">Результат:
Типы файлов изображений
HTML поддерживает различные форматы файлов изображений, включая JPEG, PNG, GIF и другие. Выбор формата зависит от ваших потребностей.
Вот пояснения к некоторым часто используемым форматам изображений в HTML:
JPEG (Объединенная группа экспертов по фотографии):
- Лучше всего подходит для: фотографий, изображений с градиентами и сложных сцен.
- Преимущества: Высокое сжатие, небольшие размеры файлов и хорошее качество изображения для фотографий.
- Соображения: Сжатие с потерями, не подходит для изображений с прозрачностью.
PNG (переносимая сетевая графика):
- Лучше всего подходит для: изображений с прозрачностью, значков, логотипов и графики с четкими краями.
- Преимущества: Поддерживает сжатие как без потерь, так и с помехами, отличное качество изображения и прозрачность.
- Соображения: Большие размеры файлов для сложных изображений по сравнению с JPEG.
GIF (формат обмена графикой):
- Лучше всего подходит для: простой анимации, изображений с ограниченной цветовой палитрой и значков.
- Преимущества: Поддерживает анимацию, прозрачность и небольшие размеры файлов для простой графики.
- Рекомендации: Ограниченная поддержка цветов (256 цветов), не подходит для фотографий или сложных изображений.
SVG (масштабируемая векторная графика):
- Лучше всего подходит для векторной графики, логотипов, иконок и изображений, которые необходимо масштабировать без потери качества.
- Преимущества: Не зависит от разрешения, небольшие размеры файлов и четкая визуализация при любом размере.
- Соображения: Не подходит для сложных фотографических изображений.
WebP:
- Лучше всего подходит для: современных веб-браузеров и эффективной доставки изображений.
- Преимущества: Обеспечивает сжатие как с потерями, так и без них, меньшие размеры файлов и хорошее качество изображения.
- Соображения: Ограниченная поддержка в старых браузерах.
BMP (растровое изображение):
- Лучше всего подходит для: Редко используется в Интернете из-за больших размеров файлов и отсутствия сжатия.
- Преимущества: Без потери качества, подходит для определенных специализированных применений.
- Соображения: Файлы большого размера и не рекомендуются для общего использования в Интернете.
При выборе формата изображения для вашей веб-страницы учитывайте такие факторы, как тип контента, сложность изображения, требуемая прозрачность и поддержка браузера вашей целевой аудиторией.
Обычно на веб-сайте используется комбинация форматов для оптимизации доставки изображений. Использование соответствующих методов и инструментов сжатия изображений также может помочь уменьшить размеры файлов при сохранении качества изображения, что имеет решающее значение для производительности веб-сайта.
Размер и масштабирование изображения
Вы можете управлять размером ваших изображений, используя атрибуты width и height. Эти атрибуты позволяют вам указать размеры изображения на вашей веб-странице.
<img src="cat.jpg" alt="A cute cat" width="300" height="200">Результат:
Важно установить соответствующие размеры, чтобы сохранить соотношение сторон и обеспечить адаптивный дизайн.
Выравнивание изображения
Выравнивание изображения по тексту с помощью атрибута align - это подход, который когда-то использовался в более старых версиях HTML. Но атрибут align устарел в современном HTML (HTML5).
Вместо этого выравнивание обычно достигается с помощью CSS. Вот расширенное объяснение обоих подходов:
Как использовать устаревший атрибут align (не рекомендуется):
В более старых версиях HTML вы могли использовать атрибут align с элементом <img> для управления выравниванием изображения внутри текста. Атрибут align имел такие значения, как "left," "right," "top," "middle," и "bottom". Вот пример:
<img src="cat.jpg" alt="A cute cat" align="left">
<p>This is some text that wraps around the image.</p>Результат:
Это какой-то текст, который обтекает изображение.
Хотя этот метод работал в прошлом, он считается устаревшим и не рекомендуется для современной веб-разработки. Лучше отделить контент от презентации, используя CSS для выравнивания.
Как использовать CSS для выравнивания изображений (рекомендуется):
В современной веб-разработке CSS (каскадные таблицы стилей) является предпочтительным способом управления выравниванием изображений внутри текста. Вы можете применить правила CSS непосредственно в вашем HTML-файле, используя встроенные стили, или, предпочтительно, использовать внешний CSS-файл для лучшей ремонтопригодности.
Вот пример того, как вы можете использовать CSS для выравнивания изображения по левому краю в пределах абзаца:
<style>
.image-align-left {
float: left;
margin-right: 10px; /* Add some space between the image and text */
}
</style>
<p><img src="cat.jpg" alt="A cute cat" class="image-align-left">This is some text that wraps around the image.</p>
В этом примере мы определяем CSS-класс с именем image-align-left, который использует свойство float, чтобы изображение перемещалось слева от текста. Свойство margin-right добавляет некоторое пространство между изображением и текстом для улучшения читаемости.
Использование CSS для выравнивания обеспечивает большую гибкость и контроль над позиционированием изображений внутри текста, и это рекомендуемый подход для современного веб-дизайна. Это также отделяет стиль от содержимого, делая ваш HTML более чистым и удобным в обслуживании.
Ссылки на изображения
Вы можете сделать изображения интерактивными, заключив их в элемент <a> (привязка). Вы можете дополнительно настроить поведение гиперссылки, используя дополнительные атрибуты HTML, такие как target="_blank", чтобы открыть страницу, на которую дана ссылка, в новой вкладке или окне браузера.
<a href="link-to-page.html" target="_blank">
<img src="cat.jpg" alt="Clickable Cat Image">
</a>Результат:
Теперь, когда пользователь нажимает на изображение, он переходит по указанной ссылке.
Адаптивные изображения
Современные веб-сайты должны быть адаптивными, адаптирующимися к различным размерам экрана. Чтобы сделать ваши изображения адаптивными, используйте свойство стиля max-width:
<img src="image.jpg" alt="Description" style="max-width: 100%;">Это свойство гарантирует, что изображения будут автоматически уменьшаться пропорционально ширине их родительских контейнеров при уменьшении размера экрана или ширины области просмотра.
Это особенно важно для обеспечения того, чтобы изображения не переполняли и не нарушали макет на экранах меньшего размера, например на мобильных устройствах.
Как загружать изображения из внешних источников
Вы также можете отображать изображения, размещенные на внешних веб-сайтах, указав полный URL-адрес в атрибуте src:
<img src="https://example.com/image.jpg" alt="External Image">Просто убедитесь, что у вас есть разрешение на использование внешних изображений и что они общедоступны.
Доступность изображений
Доступность Интернета имеет решающее значение. Всегда включайте описательный текст в атрибут alt, чтобы помочь пользователям с ограниченными возможностями. Осмысленный альтернативный текст помогает программе чтения с экрана создать контекст для изображения.
Альтернативный текст, сокращение от "alternative text", - это текстовое описание изображения, которое может быть прочитано вслух средствами чтения с экрана или отображено вместо изображения, если оно не может быть загружено.
Назначение альтернативного текста:
- Программы чтения с экрана. Люди с нарушениями зрения часто используют программы чтения с экрана для навигации по веб-сайтам. Когда программа чтения с экрана встречает изображение, она читает замещающий текст вслух, чтобы обеспечить контекст и передать значение изображения.
- Проблемы с загрузкой изображения. Замещающий текст также отображается, когда изображение не загружается должным образом в веб-браузере, что позволяет пользователям понять содержимое изображения, даже если они его не видят.
Как создать осмысленный альтернативный текст:
- Альтернативный текст должен быть кратким, но описательным, передающим основную информацию или назначение изображения.
- В нем не должно быть ненужных деталей или описаний визуального оформления (например, "Синяя кнопка" не так полезна, как "Отправить форму").
- Избегайте использования таких фраз, как "изображение" или "картинка", поскольку программы для чтения с экрана уже сообщают, что это изображение.
- Для декоративных или чисто эстетических изображений, которые не передают информацию, используйте пустой атрибут alt (
alt="") или укажите, что это декоративное изображение (alt="Декоративное изображение").
Примеры альтернативного текста:
Пример 1 (информативное изображение):
Пример 2 (Декоративное изображение):
Пример 3 (сложное изображение с описанием):
Помните, что цель альтернативного текста - предоставить содержательное и информативное описание изображения, чтобы пользователи с ограниченными возможностями могли понять его содержание и контекст.
Следуя этим рекомендациям и создавая соответствующий альтернативный текст, вы вносите свой вклад в создание более доступного и инклюзивного веб-интерфейса для всех пользователей.
Дополнительные советы по использованию изображений
1. Оптимизация изображения
Оптимизация изображений имеет решающее значение для производительности веб-сайта. Сжимайте изображения, используйте соответствующие размеры и выберите правильный формат файла, чтобы сбалансировать качество изображения и скорость загрузки.
2. Отложенная загрузка
Вы можете улучшить производительность веб-сайта, внедрив отложенную загрузку. Атрибут "loading", имеющий значение "lazy", - это функция в HTML, которая указывает браузеру загружать изображение лениво. Это означает, что он будет загружать изображение только тогда, когда оно находится в окне просмотра (видимой области) веб-страницы или рядом с ним.
Отложенная загрузка может помочь повысить производительность загрузки страниц за счет сокращения времени начальной загрузки изображений, которые не сразу видны пользователю.
Вот код, чтобы сделать это:
<img src="cat.jpg" alt="A cute cat" loading="lazy">3. Подписи к изображениям
В дополнение к альтернативному тексту для обеспечения доступности рассмотрите возможность использования подписей к изображениям для улучшения контекста. Вы можете включить элемент <figcaption> в элемент <figure>:
<figure>
<img src="cat.jpg" alt="A cute cat">
<figcaption>This is the picture of a cat with cute eyes</figcaption>
</figure>Результат:
4. Дисплеи Retina и с высоким разрешением DPI
Для дисплеев с высоким разрешением, таких как экраны Retina, отображайте изображения с более высоким разрешением, используя атрибут srcset:
<img src="cat.jpg" alt="A cute cat" srcset="image.jpg 1x, image@2x.jpg 2x">
Заключение
Включение изображений в документы HTML — фундаментальный навык для веб-разработчиков. С помощью элемента <img> и его атрибутов вы можете легко управлять отображением, размером и выравниванием изображения.
Следуя рекомендациям по оптимизации изображений, доступности и адаптивному дизайну, вы создадите визуально привлекательный и удобный для пользователя веб-контент.
Продолжая свой путь веб-разработки, попрактикуйтесь в интеграции изображений в свои проекты и изучите эти дополнительные советы, которые помогут повысить производительность и доступность ваших веб-сайтов.
