Форматы изображений и их применение (JPEG, PNG, WebP, SVG)

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 28
Автор
Рек. время прохождения 3 минуты
Упражнений 10
Комментарии 0
Тренажер HTML
В этом блоке заданий мы изучим, как правильно работать с изображениями в HTML. Выбор правильного формата изображения — ключ к созданию быстрых, красивых и доступных веб-страниц. Мы разберем основные форматы: JPEG для фотографий, PNG для графики с прозрачностью, SVG для векторной графики и WebP как современную и эффективную альтернативу. Вы на практике научитесь не только вставлять картинки, но и делать их адаптивными и доступными для всех пользователей.
Список тем

Вставляем первое изображение (JPEG)

id: 37819_html-img-format-jpeg-1

На странице должен появиться горный пейзаж. Для этого нужно вставить тег для отображения изображений. Путь к файлу и альтернативный текст уже предоставлены в атрибутах.

CSS
.container {
  padding: 10px;
  background: #f4f4f4;
  border-radius: 8px;
}
.container img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
HTML
<div class="container">
  <input1 src="https://naytikurs.ru/img/1j.jpeg" alt="Горный пейзаж">
</div>
Для вставки изображений используется одиночный тег `<img>`. Вам нужно просто написать имя этого тега в указанном месте.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Атрибут для доступности (alt)

id: 37819_html-img-format-alt-2

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

CSS
.container {
  padding: 10px;
}
.container img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
HTML
<div class="container">
  <img src="https://naytikurs.ru/img/4j.jpeg" input1="Ноутбук на столе">
</div>
Для добавления альтернативного текста к изображению используется атрибут `alt`. Это улучшает доступность (a11y) и SEO вашего сайта. Впишите `alt` на место пропуска.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Задаем размеры изображения

id: 37819_html-img-format-dims-3

Чтобы браузер заранее знал, сколько места займет изображение, и страница не 'дергалась' при загрузке, рекомендуется указывать его размеры. Добавьте атрибуты для ширины (300) и высоты (200).

CSS
.container img {
  max-width: 100%;
  height: auto; /* Это свойство позволит изображению быть адаптивным, даже с заданными атрибутами */
  border: 2px solid #ccc;
  border-radius: 5px;
}
HTML
<div class="container">
  <img src="https://naytikurs.ru/img/1.png" alt="Синий кристалл" input1="300" input2="200">
</div>
Используйте атрибуты `width` для указания ширины и `height` для высоты. Значения указываются в пикселях, но единицу измерения 'px' писать не нужно.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

PNG и магия прозрачности

id: 37819_html-img-format-png-4

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

CSS
.card {
  background-color: #4a90e2;
  color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  font-family: sans-serif;
}
.card img {
  margin-bottom: 10px;
  width: 60px;
}
HTML
<div class="card">
  <input1 src="https://naytikurs.ru/img/2.png" alt="Иконка ракеты">
  <h3>Запуск проекта</h3>
</div>
Вставьте тег `<img>` с указанным `src`. Обратите внимание, как благодаря формату PNG фон карточки будет виден 'сквозь' изображение, в отличие от JPEG.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Масштабируемая векторная графика (SVG)

id: 37819_html-img-format-svg-5

Для логотипов идеально подходит формат SVG. Он основан на векторах и масштабируется без потери качества. Вставьте логотип в формате SVG на страницу.

CSS
.logo-container {
  text-align: center;
  padding: 20px;
  background: #f0f0f0;
  border-radius: 8px;
}
.logo-container img {
  width: 150px;
}
HTML
<div class="logo-container">
  <input1 src="https://naytikurs.ru/img/11s.svg" alt="Логотип компании">
</div>
Формат SVG вставляется так же, как и другие изображения, с помощью тега `<img>`. Его преимущество в том, что он будет выглядеть идеально четко при любом размере.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Современный формат WebP с тегом <picture>

id: 37819_html-img-format-webp-picture-6

Чтобы ускорить загрузку сайта, можно использовать формат WebP. Но его поддерживают не все браузеры. Используйте специальную конструкцию, чтобы предложить браузеру WebP, а если он не сможет, то загрузить обычный JPEG в качестве запасного варианта.

CSS
.container img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
HTML
<div class="container">
  <input1>
    <input2 srcset="https://naytikurs.ru/img/1w.webp" type="image/webp">
    <img src="https://naytikurs.ru/img/1j.jpeg" alt="Горный пейзаж">
  </input1>
</div>
Используйте тег-контейнер `<picture>`. Внутри него разместите тег `<source>` для формата WebP. В `<source>` нужно указать путь к файлу в `srcset` и тип `type="image/webp"`. Обычный тег `<img>` в конце служит fallback вариантом.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Изображение-ссылка

id: 37819_html-img-format-link-7

Часто нужно сделать так, чтобы по клику на изображение пользователь переходил по ссылке. 'Оберните' иконку в тег ссылки. Адрес ссылки сейчас не важен, используйте `#`.

Адаптация под Retina с `srcset`

id: 37819_html-img-format-srcset-8

Для экранов с высокой плотностью пикселей (Retina) можно загружать более качественные изображения. Добавьте атрибут, который укажет браузеру, какое изображение использовать для обычных экранов (1x), а какое для экранов с высокой плотностью (2x).

CSS
.container img {
  max-width: 100%;
  height: auto;
}
HTML
<div class="container">
  <img input1="https://naytikurs.ru/img/5.png 1x, https://naytikurs.ru/img/9.png 2x"
       src="https://naytikurs.ru/img/5.png"
       alt="Абстрактная фигура">
</div>
Используйте атрибут `srcset`. В нем перечисляются пути к файлам и их дескрипторы плотности (например, `image-1x.png 1x, image-2x.png 2x`). Также всегда оставляйте `src` для старых браузеров, которые не понимают `srcset`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Встраиваемый SVG (inline SVG)

id: 37819_html-img-format-inline-svg-9

Иногда SVG-код встраивают прямо в HTML. Это позволяет управлять его частями (например, цветом) с помощью CSS. Создайте простую SVG-иконку: красный круг с черной обводкой, используя соответствующие теги.

CSS
.inline-svg-wrapper {
  text-align: center;
  padding: 20px;
}
HTML
<div class="inline-svg-wrapper">
  <input1 width="100" height="100" viewBox="0 0 100 100">
    <input2 cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </input1>
</div>
Основной контейнер — тег `<svg>`. Внутри него для рисования круга используется тег `<circle>`. Атрибуты `cx`, `cy` — это координаты центра, `r` — радиус, а `fill` — цвет заливки.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Продвинутое использование `<picture>`

id: 37819_html-img-format-picture-advanced-10

Тег `<picture>` позволяет не только выбирать формат, но и разные изображения для разных размеров экрана. Добавьте тег `source`, который будет отвечать за показ изображения на широких экранах (более 600px), а `img` будет служить вариантом по умолчанию для узких.

CSS
.container img {
  max-width: 100%;
  height: auto;
  border: 2px solid #333;
  border-radius: 4px;
}
HTML
<div class="container">
  <picture>
    <input1 media="(min-width: 600px)" srcset="https://naytikurs.ru/img/6.png">
    <input2 src="https://naytikurs.ru/img/7.png" alt="Адаптивное изображение">
  </picture>
</div>
Используйте тег `<source>` с атрибутом `media`, в котором указывается медиа-условие, например, `(min-width: 600px)`. Также не забудьте указать `srcset` для этого `source`. Тег `<img>` в конце обязателен.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру