RWD - графика

Автор: Бухарцев Матвей

Адаптивная графика и магия srcset: чтобы картинки выглядели чётко везде!

Привет, кодогении и поклонники прекрасного! 🎨 Сегодня мы отправимся в путешествие по миру адаптивной графики. Узнаем, как сделать так, чтобы наши изображения выглядели так же шикарно на ретина-дисплеях, как и на обычных экранах. Пристегните ремни — будет интересно!

Ретина-дисплеи: что это и с чем их едят?

Ретина-дисплеи (или просто устройства с высокой плотностью пикселей) — это экраны, где пиксели такие мелкие, что глаз их уже не различает. Картинка получается очень чёткой, и даже мельчайшие детали выглядят превосходно. Звучит круто, но есть одна проблема: наши привычные растровые изображения могут начать выглядеть размыто, как будто кто-то забыл надеть очки…

Поведение разных веб-элементов на высокочётких экранах

• Текст: Шрифты ведут себя отлично! Они масштабируются и рендерятся чётко. Можно вздохнуть с облегчением и продолжать использовать свои любимые шрифты.

• Цвета: Здесь всё тоже в порядке. Цвета остаются насыщенными и яркими, как вы и задумывали.

• Растровые изображения: Вот тут начинаются приключения. Поскольку они состоят из фиксированного числа пикселей, на ретина-дисплеях они могут выглядеть слегка мутными, как в утреннем тумане.

• Векторные изображения: Наши герои! SVG и прочие векторные форматы масштабируются бесконечно без потери качества. Они всегда выглядят чётко, как линейка.

srcset: секретное оружие веб-разработчика

Чтобы наши растровые картинки выглядели отлично на всех устройствах, нам на помощь приходит атрибут srcset. Это как дать браузеру несколько вариантов изображения и сказать: “Выбери тот, который тебе больше по нужен!”

Как это работает?

Представим, что у нас есть изображение котика (куда же без него):

<img src="cat.png" alt="Милый котик" />

Если мы хотим, чтобы на ретина-дисплеях отображалось более чёткое изображение, добавим srcset:

<img src="cat.png" srcset="cat.png 1x, cat@2x.png 2x" alt="Милый котик" />

Теперь браузер сам решит, какое изображение использовать:

• 1x — для обычных экранов.

• 2x — для экранов с удвоенной плотностью пикселей (ретина).

Дополнительная магия: адаптация под размер экрана

Мы можем использовать srcset и для разных размеров экранов. Например:

<img
    src="cat-small.png"
    srcset="cat-small.png 600w, cat-medium.png 1200w, cat-large.png 1800w"
    sizes="(max-width: 600px) 280px, (max-width: 1200px) 600px,  1200px"
    alt="Милый котик"
/>

• 600w, 1200w, 1800w — ширина изображения в пикселях.

• sizes — подсказывает браузеру, какой размер изображения нужен при разных ширинах экрана.

Почему это круто?

• Пользователи с ретина-дисплеями увидят чёткое изображение без размытия.

• Пользователи с обычными экранами не будут загружать лишние мегабайты.

Внимание! srcset не предназначен для кадрирования - внутри всегда одна картинка с разным разрешением. Не надо её обрезать или вообще подставлять другуое изображение.

Новые теги - <picture> и <source>

• — это обёртка для целого изображения. Как кастинг - вы даёте браузеру несколько вариантов, а он выбирает лучший под ситуацию
• — это инструкции внутри , говорящие, какое изображение использовать при определённых условиях

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

<picture>
    <source media="(min-width: 800px)" srcset="image-large.jpg" />
    <source media="(min-width: 400px)" srcset="image-medium.jpg" />
    <img src="image-small.jpg" alt="Удивительное изображение" />
</picture>

• Если экран 800px и шире — загрузится image-large.jpg.
• Если экран от 400px до 799px — image-medium.jpg.
• Если меньше 400px — image-small.jpg из .

Зачем это нужно?

• Адаптация контента: Показывать разные изображения на разных устройствах (горизонтальное на десктопе, вертикальное на мобильном).
• Оптимизация форматов: Предлагать современный формат WebP и запасной вариант JPEG.

Пример с форматами:

<picture>
    <source type="image/webp" srcset="image.webp" />
    <img src="image.jpg" alt="Великолепная картина" />
</picture>

Браузер загрузит image.webp, если умеет, иначе — image.jpg. Ваши изображения будут выглядеть потрясающе, а пользователи — довольны!

А как же фавиконки?

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

<head>
    <!-- ... самая важная инфа ... -->
    <link
        rel="icon"
        href="https://bouhartsev.top/favicon.ico"
        type="image/x-icon"
    />
    <link
        rel="apple-touch-icon"
        sizes="180x180"
        href="/source/icons/apple-touch-icon.png"
    />
    <link
        rel="icon"
        type="image/png"
        sizes="32x32"
        href="/source/icons/favicon-32x32.png"
    />
    <link
        rel="icon"
        type="image/png"
        sizes="16x16"
        href="/source/icons/favicon-16x16.png"
    />
    <link rel="manifest" href="/source/icons/site.webmanifest" />
    <link
        rel="mask-icon"
        href="/source/icons/safari-pinned-tab.svg"
        color="#f5f5f5"
    />
    <link rel="shortcut icon" href="/source/icons/favicon.ico" />
    <!-- ... другая красота ... -->
</head>

Лайфхак: как и другие картинки, фавиконки можно “генерировать” - есть инструменты, которые создадут вам набор иконок под все устройства из вашей картинки.

Итоги: делаем сайты красивыми на любых устройствах

• Используйте srcset для растровых изображений, чтобы обеспечить чёткость на всех экранах.

• Лучше векторные изображения (SVG) для логотипов, иконок и простых графических элементов.

• Текст и цвета обычно не требуют дополнительной настройки для ретина-дисплеев.

• Проверяйте свой сайт на разных устройствах, чтобы убедиться, что всё выглядит превосходно. Можно воспользоваться специальными инструментами.

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

Так что вперёд, добавьте немного волшебства srcset в ваш проект, и пусть ваши котики (и не только) будут чёткими на всех экранах! 🌟