Изображения Mobile-First

Часть раздела Practical Frontend путешествия по HTML на Coddy — урок 9 из 35.

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

Давайте воспользуемся HTML-элементом picture для предоставления изображений разных размеров в зависимости от ширины экрана.

<picture> → обертка, которая содержит несколько вариантов изображений для различных экранов.

<source> → определяет, какое изображение загружать (srcset) и при каком условии (media). Пример: телефон (≤600px) → маленькое изображение; планшет (≤1024px) → среднее изображение.

<img> → резервный вариант, если ни один <source> не подходит, обычно это большое изображение для десктопа. Также содержит текст alt.

<picture>
  <source srcset="small-image.jpg" media="(max-width: 600px)">
  <source srcset="medium-image.jpg" media="(max-width: 1024px)">
  <img src="large-image.jpg" alt="Description of image">
</picture>

Задание

Легко

Перед вами стоит задача отобразить изображение Луны, которое будет хорошо смотреться как на мобильных устройствах, так и на настольных компьютерах.

Ваша задача:

Используйте элемент <picture> для настройки адаптивных изображений.
Для экранов шириной 768px и более загружайте увеличенное изображение Луны: https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg
Для экранов меньшего размера (мобильные по умолчанию) загружайте уменьшенное изображение Луны:
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/330px-FullMoon2010.jpg
Обязательно добавьте alt="Moon in the night sky" для обеспечения доступности.

Шпаргалка

Используйте элемент <picture> для адаптивных изображений в стиле mobile-first:

<picture> → обертка для нескольких вариантов изображений
<source> → определяет изображение (srcset) и условие (media)
<img> → резервное изображение с текстом alt

<picture>
  <source srcset="small-image.jpg" media="(max-width: 600px)">
  <source srcset="medium-image.jpg" media="(max-width: 1024px)">
  <img src="large-image.jpg" alt="Description of image">
</picture>

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

Попробуйте сами

<!DOCTYPE html>
<html>
<head>
  <title>Mobile-First Images</title>
  <style>
        body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 1rem;
      line-height: 1.6;
      background: #0a0a23;
      color: #f5f5f5;
    }

    header {
      text-align: center;
      margin-bottom: 1.5rem;
    }

    h1 {
      font-size: 1.5rem;
      color: #ffd369;
    }

    .content {
      max-width: 800px;
      margin: 0 auto;
    }

    img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      margin: 1rem 0;
    }

    p {
      font-size: 1rem;
    }

    @media (min-width: 768px) {
      h1 {
        font-size: 2.25rem;
      }

      p {
        font-size: 1.125rem;
      }
    }
  </style>
</head>
<body>
    <header>
    <h1>The Moon</h1>
  </header>

  <main class="content">
    <p>
      The Moon is Earth's only natural satellite and has fascinated humans for thousands of years. 
      It influences tides, inspires myths, and continues to be a target for exploration.
    </p>

  

    <p>
      Mobile-first images ensure the page loads fast on smaller devices while still looking 
      beautiful on bigger screens.
    </p>
  </main>
</body>
</html>