Как создавать адаптивные изображения. Атрибут srcset
Адаптивные изображения автоматически изменяют свой размер, чтобы соответствовать экрану пользователя, что улучшает вид страницы и ускоряет загрузку.
Давайте рассмотрим несколько способов создания адаптивных изображений.
�� В статье мы говорим о пикселях и ретина-дисплеях. Если вы не знаете, что это такое — прочитайте статью.
Метод описания плотности экрана
Метод подходит для тех изображений, размер которых фиксирован на экранах повышенной плотности. Это значит, что для некоторых изображений шириной 200px , указанной в HTML, можно загрузить картинку шириной 600px или больше, так как на экране повышенной плотности она будет смотреться намного лучше.
Как сделать изображение адаптивным с помощью srcset
- Реагировать на ретину — загружать разные картинки для разной плотности пикселей;
- Реагировать на ширину вьюпорта — загружать разные картинки для разных медиавыражений;
- Работать с новыми форматами изображений (AVIF и WebP).
Чтобы реализовать метод, используем атрибут srcset для описания плотности экрана. Атрибут srcset позволяет указать несколько вариантов изображений с разными разрешениями или плотностями пикселей. Браузер выбирает наиболее подходящее изображение на основе плотности пикселей экрана устройства, чтобы загрузить его.
1x , 2x , 3x — это идентификатор, который указывает плотность экрана для показа определённой картинки. Разработчик выбирает какие идентификаторы нужно указать для разных устройств.
Дескрипторы ширины, высоты и плотности
В атрибуте srcset можно использовать различные виды дескрипторов для указания вариантов изображений в зависимости от конкретных требований.
Дескриптор ширины (w — width descriptor) указывает ширину изображения или вьюпорта, для которого предназначено конкретное изображение. Измеряется в пикселях.
В этом примере medium.jpg имеет дескриптор 1000w , значит изображение предназначено для вьюпортов шириной 1000px, соответственно, large.jpg — изображение для вьюпортов шириной 2000px.
Дескриптор размера (x — pixel density descriptor) указывает отношение между шириной изображения и шириной вьюпорта. Он измеряется в вещественных числах без единицы измерения.
Здесь у medium.jpg дескриптор 1.5x , значит, ширина изображения в полтора раза больше ширины вьюпорта. У large.jpg ширина изображения в два раза больше ширины вьюпорта.
Дескриптор плотности пикселей (dppx — dots per pixel descriptor) задаёт плотность пикселей изображения или экрана, для которого предназначена конкретная картинка. Он измеряется в пикселях на дюйм ( ppi ).
Дескриптор 1.5dppx означает, что изображение предназначено для устройств с плотностью 1.5 пикселя на дюйм. Изображение large.jpg подойдёт для устройств с плотностью 2 пикселя на дюйм, например, для планшетов, ноутбуков или мониторов с очень высоким разрешением.
Использование атрибута srcset позволяет создавать адаптивные изображения, которые оптимально подстраиваются под различные устройства и экраны. Когда браузер загружает страницу, он анализирует дескрипторы изображений и выбирает наиболее подходящее на основе характеристик экрана и возможностей браузера.
Кадрирование изображений и тег
Если по дизайну сайта изображение на разных устройствах немного меняется, например, кадрируется или приобретает дополнительные детали, его удобно верстать с помощью тега .
Как добавить адаптивное изображение с помощью
Указываем открывающий и закрывающий тег . Внутри этого контейнера будем определять разные источники изображений.
Атрибут media описывает условия, при которых будет загружаться соответствующее изображение. Например, media=»(min-width: 1200px)» означает, что изображение logotype-desktop.svg будет загружаться, если ширина экрана равна или больше 1200px .
- В зависимости от условий задать нужное изображение;
- Рассказать браузеру о наличии картинок в новых форматах и указать, какая из них подходит к вьюпорту;
- Кадрировать картинку.
В конце добавляем элемент , который будет использоваться в случае, если браузер не поддерживает тег или не выполняется ни одно из условий, определённых в тегах . Здесь указываем путь к изображению img/logotype-phone.svg и добавляем альтернативный текст с помощью атрибута alt .
Материалы по теме
- Как изменить ширину элемента. Свойство width
- Как создавать адаптивные сетки
- Как добавить изображение на страницу
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
Что такое HTML?
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
Основы разметки
Всё начинается с тегов. Тег — это элемент языка разметки, который определяет, какой тип содержимого будет представлен.
Теги обычно идут парами: открывающий тег
Мой заголовок
Это мой первый абзац. Привет, мир!
Некоторые теги можно не закрывать:
Теги и атрибуты
У тегов могут быть атрибуты. Это дополнительные характеристики, которые помогают определить свойства элемента. Например, у тега атрибут src указывает путь к изображению:
Атрибут alt описывает изображение, это полезно, если изображение не загрузится или для программ чтения экрана.
Формы и элементы форм
Формы используются для сбора данных от пользователей. Например, когда вы вводите что-то в поисковой строке или заполняете регистрационную форму.
- — это тег формы.
- action — куда отправляются данные.
- method — метод отправки (обычно get или post ).
- — поле для ввода данных. Тип text означает текстовое поле.
- — метка для поля ввода.
Списки в HTML
Списки позволяют нам организовывать данные в упорядоченном (нумерованном) или неупорядоченном (с маркерами) виде.
Упорядоченные списки создаются с помощью тегов (ordered list) и (list item):
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
- Элемент списка с маркером
- Еще один элемент с маркером
Ссылки и навигация
Чтобы ваши пользователи могли переходить от одной страницы к другой, используются ссылки. Тег для создания ссылки — , атрибут href указывает на адрес, куда должна вести ссылка:
Таблицы
Имя Возраст Джон 30 Элис 25
Использование изображений
Семантическая разметка
Семантическая разметка важна для доступности и SEO. Это использование элементов HTML по их предназначению, например:
Заголовок статьи
Первый абзац статьи.
Это основы, которые сформируют крепкий фундамент для начала работы с HTML. Следующий шаг — погружение в CSS, чтобы оживить и улучшить визуальную составляющую ваших веб-страниц. Но об этом — в нашей следующей статье. Стройте свои веб-страницы с удовольствием и не бойтесь экспериментировать! ��
- 1 ноября 2023
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
Простое диалоговое окно на HTML
Вот короткое демо:
- 18 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport , то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.
- 18 сентября 2023
Атрибут class в HTML на примерах
Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
- 14 сентября 2023
В чём отличия цитат blockquote, cite и q
В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.
- 12 сентября 2023
Осмысленный alt-текст: 6 правил
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 31 июля 2023
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023
Как понять, что перед вами заголовок
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023
Как правильно вставлять SVG
Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.
SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~ Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.
- 1 июня 2023
адаптация картинки под размер экрана css
Есть адаптация картинки под размер экрана на сайте. Реализована она на данный момент так: img
- Как сделать сайт удобным для мобильных устройств. Рекомендации Платона Щукина
- Партнеры РСЯ получили возможность показывать видеорекламу в блоке Floor Ad
- Вопросы представителю Яндекса
На сайте с 24.12.2009
5 февраля 2015, 17:39
Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.
На сайте с 12.02.2013
5 февраля 2015, 17:51
Не помогает. И, как я понимаю, не должно. Но если задавать max-width: 100px уменьшает картинку до 100px, но это не вариант решения. Картинка может больше быть 100px, или меньше.
На сайте с 24.12.2009
5 февраля 2015, 22:16
Я надеюсь вы убрали width.
.erb-image-wrapper img <
max-width:100% !important;
height:auto;
display:block;
>
На сайте с 05.03.2009
8 февраля 2015, 20:12
acril1994:
Есть адаптация картинки под размер экрана на сайте. Реализована она на данный момент так:
При больших размерах экрана (ПК) все выглядит хорошо.
При низких разрешениях экрана (мобильный телефон, 320 на 240 px) картинку увеличивает БОЛЬШЕ своего собственного размера. Например, если картинка 100 px по ширине, ее растянет на 320 px по ширине, искажая качество.
Надо сделать так, чтобы картинка не увеличивалась больше своего собственного физического размера.
Используй медиазапрос в файле стилей
@media all and (min-device-width: 320px)
Адаптивные изображения и видео
После того, как вы разобрались с гибкой сеткой, настало время обратить внимание на другое содержимое веб-страниц, которое требует определенных манипуляций, чтобы стать адаптивным. Речь идет об изображениях и видео. Если вы просто добавите изображение на веб-страницу и уменьшите окно браузера, то увидите, что картинка не адаптируется под ширину окна, а сохраняет свои исходные размеры. Это может привести к появлению горизонтальной прокрутки, а также к тому, что изображение будет выходить за пределы адаптивной колонки:
Адаптивные изображения с помощью CSS
Как сделать изображение адаптивным с помощью CSS? Для начала вам понадобится убрать атрибуты ширины и высоты в теге изображения (если таковые имеются). Ваш HTML-код не должен их содержать:
В таблицу стилей добавьте следующую запись:
Это означает, что максимальная ширина тега будет равна ширине блока-контейнера, в котором он содержится. Изображение не сможет выйти за пределы своего родителя, а при изменении ширины родителя оно будет автоматически подстраиваться под нее.
Точно так же можно сделать ширину изображения равной, например, половине ширины родительского контейнера:
Адаптивные видео
Чтобы сделать адаптивными теги , а также и , добавьте для них такой же CSS-код, как и для изображений. Желательно перечислить сразу все селекторы:
img, video, embed, object
Адаптивные iframe
Дела обстоят сложнее, если вы встраиваете видео через тег . Тогда вышеописанный метод здесь не работает. Придется прибегнуть либо к помощи JavaScript, либо использовать более хитрый CSS-код.
Если вы выбрали второй вариант, вам понадобится поместить тег в дополнительный контейнер . Например:
Затем добавьте следующий код CSS:
.video < height: 0; position: relative; padding-bottom: 56.25%; >.video iframe
Как вы заметили, в коде присутствует свойство padding-bottom со странным значением 56.25% . Что это означает? Значение padding-bottom , указанное в процентах, считается относительно ширины блока. Число 56.25 мы получили, определив соотношение сторон встраиваемого видео (16:9) и разделив число короткой стороны на число длинной стороны, после чего умножив результат на 100:
Если вы собираетесь встраивать видео с другим соотношением сторон, скажем, 4:3, то для определения подходящего значения padding-bottom проделайте ту же процедуру:
Данный метод используется и в фреймворке Bootstrap.
Далее в учебнике: знакомство с Flexbox.
Масштабирование картинок
Если для элемента не задать атрибуты width и height , то браузер самостоятельно определит ширину и высоту изображения после загрузки файла и покажет его в исходном размере. Рисунок в формате SVG браузеры, за исключением IE, выводят на всю доступную ширину.
Изменение масштаба и пропорций изображения делается как через атрибуты , так и через стили.
Использование атрибутов
Любую картинку можно как увеличивать, так и уменьшать в размерах, задавая значение высоты или ширины в пикселях или процентах от размера родителя. Если установлена только ширина или высота, то вторая величина вычисляется автоматически исходя из пропорций картинки. Два заданных значения могут исказить пропорции, особенно если они заданы неверно. В примере 1 показаны разные варианты задания размеров в пикселях.
Пример 1. Размеры в пикселях
В примере использовалась одна и та же фотография, для первого размеры явно не указаны, поэтому браузер добавил изображение в исходном виде. Для второй фотографии указана ширина 400 пикселей, что привело к уменьшению её размеров при сохранении пропорций. Третья фотография искажена, поскольку задана одинаковая ширина и высота, притом, что исходное изображение не квадратное (рис. 1).
Рис. 1. Размеры фотографии
Аналогичным образом задаются размеры в процентах от ширины родительского элемента, таким образом можно установить картинку на всю ширину окна браузера. В примере 2 показано добавление трёх фотографий в ряд, ширина которых привязана к ширине окна.
Пример 2. Размеры в процентах
В данном примере все размеры заданы в процентах, так что приходится пользоваться математикой, чтобы суммарная ширина не получилась больше 100%. Ширину каждого элемента устанавливаем как 27%, к ней добавляется поле слева и справа по 2%, итого каждый элемент занимает 31%, а всего 31х3=93%. Оставшиеся 100-93=7% делим пополам, в итоге 7/2=3.5% — столько получается ширина промежутка между блоками. Для первого отступ слева нам не нужен, поэтому его убираем через свойство margin-left . Результат данного примера показан на рис. 2.
Рис. 2. Масштабирование фотографий
Масштабирование через стили
Стили удобно задействовать, когда нужно массово задать одинаковые размеры для множества изображений, тогда не придётся указывать индивидуальные размеры для каждой картинки через width и height . Но если у вас большое количество иллюстраций разного размера, то стили здесь никак не помогут. Они пригодятся, например, для иконок одинаковой ширины и высоты или когда размеры задаются в процентах, как это показано выше. В примере 3 приведён стиль для изменения размеров всех изображений внутри элемента .
Пример 3. Размеры через стили
figure img < width: 100%; /* Ширина в процентах */ >Когда для одного элемента одновременно указывается атрибут width и стилевое свойство width , то стили имеют приоритет выше.
Интерполяция
Предположим, что у нас есть растровая картинка размером 200х200 пикселей и мы увеличиваем её пропорционально по ширине в два раза. Площадь изображения и общее количество пикселей вырастет при этом в четыре раза. Новые пиксели добавляются браузером самостоятельно исходя из набора уже имеющихся. Способ получения этих новых пикселей называется интерполяцией изображения. Надо понимать, что качество очень сильно зависит от самого изображения, масштаба и алгоритма, но обычно результат получается хуже оригинала.
Похожее происходит и при уменьшении изображения, только браузеру уже приходится не добавлять, а выбрасывать часть пикселей.
Алгоритм интерполяции заложен в браузер и может быть изменён с помощью свойства image-rendering . К сожалению, браузеры пока слабо поддерживают это свойство, поэтому приходится указывать несколько разных значений. В примере 4 показано изменение алгоритма, чтобы переходы цветов не размывались, а оставались чёткими. В браузерах Chrome и Opera пример пока не работает, ожидается что поддержка свойства появится в новых версиях.
Пример 4. Изменение алгоритма интерполяции
Результат данного примера показан на рис. 3. Для левой картинки применяется алгоритм, заданный по умолчанию; для правой — метод интерполяции по ближайшим точкам.
Рис. 3. Вид картинок после увеличения масштаба
Вписывание картинки в область
Порой изображения необходимо вписать в область заданных размеров, например, для создания слайдшоу — плавной смены нескольких фотографий. Есть два основных способа. Первый метод простой и работает во всех браузерах. Задаём желаемые размеры области и скрываем всё, что в неё не помещается с помощью свойства overflow со значением hidden (пример 5).
Пример 5. Использование overflow
Результат примера показан на рис. 4. Область имеет высоту 400 пикселей и занимает всю доступную ей ширину. Для фотографии внутри устанавливаем ширину 100% и сдвигаем её чуть вверх, чтобы она лучше выглядела. Поскольку высота области фиксирована, то при уменьшении окна браузера до некоторого предела высота фотографии окажется меньше 400 пикселей и под ней появится пустое пространство. Поэтому вводим свойство min-width чтобы этого избежать.
Рис. 4. Фотография внутри области заданных размеров
Второй способ не так универсален, поскольку свойство object-fit не поддерживается в IE, а Firefox его понимает только с версии 36. Зато object-fit позволяет более аккуратно вписать изображение в заданную область. В примере 6 показан стиль для этого. Задействовано значение cover , оно увеличивает или уменьшает изображение так, чтобы оно всегда полностью заполняла всю область.
Пример 6. Использование object-fit
figure < width: 100%; /* Ширина области */ height: 400px; /* Высота области */ margin: 0; /* Обнуляем отступы */ >figure img < width: 100%; /* Ширина изображений */ height: 100%; /* Высота изображении */ object-fit: cover; /* Вписываем фотографию в область */ >См. также
- object-fit
- Атрибуты элементов
- Выравнивание картинок
- Добавление медиа-контента
- Изображения
- Изображения
- Изображения в HTML
- Подрисуночная подпись
- Фон в CSS
- Форматы графических файлов