JavaRush /Курси /Frontend SELF UA /Адаптивні зображення

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

Frontend SELF UA

Рівень 25 , Лекція 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% і автоматичну висоту, щоб воно займало доступне простір і зберігало пропорції

Попередня Попередня лекція

Наступна Наступна лекція

Коментарі

ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ