JavaRush /Курсы /Модуль 1: Web Core /Адаптивные изображения

Адаптивные изображения

Модуль 1: Web Core

13 уровень , 4 лекция

Открыта

5.1 Атрибут srcset

Адаптивные изображения играют важную роль в создании отзывчивых и оптимизированных веб-страниц. Они позволяют загружать изображения различных размеров и разрешений в зависимости от устройства и условий просмотра, что улучшает производительность и удобство использования. Основные инструменты для реализации адаптивных изображений в HTML — это атрибуты srcset и sizes.

Атрибут srcset используется для указания нескольких источников изображения с различными размерами или разрешениями. Браузер выбирает наиболее подходящее изображение в зависимости от устройства пользователя.

Синтаксис:

    
      <img src="default.jpg" srcset="image1.jpg 1x, image2.jpg 2x" alt="Example Image">

Где:

src: указывает путь к изображению по умолчанию
srcset: содержит список изображений и их характеристики, разделенные запятыми
1x, 2x: указывают коэффициент масштабирования (например, 1x для стандартного разрешения и 2x для устройств с высокой плотностью пикселей)

Пример использования srcset:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Пример использования srcset</title>
        </head>
        <body>
          <img
            src="images/default.jpg"
            srcset="images/image-small.jpg 480w,
              images/image-medium.jpg 800w,
              images/image-large.jpg 1200w"
            alt="Пример адаптивного изображения">
        </body>
      </html>

Объяснение кода:

src="images/default.jpg": указывает изображение по умолчанию
srcset: содержит список изображений с указанием их ширины в пикселях (480w, 800w, 1200w). Браузер выбирает наиболее подходящее изображение в зависимости от ширины окна просмотра

5.2 Атрибут sizes

Атрибут sizes используется в сочетании с srcset для указания ширины изображения в разных условиях отображения. Это позволяет браузеру более точно выбирать подходящее изображение.

Синтаксис:

HTML

    
      <img src="default.jpg"
      srcset="image1.jpg 480w, image2.jpg 800w"
      sizes="(max-width: 600px) 480px, 800px"
      alt="Example Image">

Где:

sizes: содержит список условий отображения и соответствующих ширин изображения
(max-width: 600px) 480px: если ширина окна просмотра меньше или равна 600px, использовать изображение шириной 480px
800px: во всех остальных случаях использовать изображение шириной 800px

Пример использования sizes:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Пример использования sizes</title>
          <style>
            .responsive-img {
              width: 100%;
              max-width: 100%;
              height: auto;
            }
          </style>
        </head>
        <body>
        <img
          class="responsive-img"
          src="images/default.jpg"
          srcset="images/image-small.jpg 480w,
            images/image-medium.jpg 800w,
            images/image-large.jpg 1200w"
          sizes="(max-width: 600px) 480px,
            (max-width: 900px) 800px,
            1200px"
          alt="Пример адаптивного изображения">
        </body>
      </html>

Объяснение кода:

sizes определяет ширину изображения для различных условий отображения:

Если ширина окна просмотра меньше или равна 600px, использовать изображение шириной 480px
Если ширина окна просмотра меньше или равна 900px, использовать изображение шириной 800px
Во всех остальных случаях использовать изображение шириной 1200px

5.3 Адаптивные изображения

Адаптивное изображение для разных размеров экрана

Создадим пример, в котором изображение адаптируется к различным размерам экрана с использованием атрибутов srcset и sizes.

Пример:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Адаптивное изображение</title>
          <style>
            .responsive-img {
              width: 100%;
              height: auto;
            }
          </style>
        </head>
        <body>
          <img
            class="responsive-img"
            src="images/default.jpg"
            srcset="images/image-small.jpg 480w,
              images/image-medium.jpg 800w,
              images/image-large.jpg 1200w"
            sizes="(max-width: 600px) 480px,
              (max-width: 900px) 800px,
              1200px"
            alt="Пример адаптивного изображения">
        </body>
      </html>

Объяснение кода:

src="images/default.jpg": указывает изображение по умолчанию
srcset: определяет три версии изображения с различными ширинами (480w, 800w, 1200w)
sizes: определяет ширину изображения для разных условий:
- до 600px — использовать изображение шириной 480px
- до 900px — использовать изображение шириной 800px
- более 900px — использовать изображение шириной 1200px
.responsive-img: класс CSS, который задает изображению ширину 100% и автоматическую высоту, чтобы оно занимало доступное пространство и сохраняло пропорции

Предыдущая Предыдущая лекция

Следующая Следующая лекция

Комментарии (1)

ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ

No Name Уровень 36

27 мая 2025

+ лекция в копилке