CSS:
img width: 32%; display: inline-block; >
Условная расстановка адаптивных изображений
В следующем примере, мы рассмотрим вариант использования адаптивных картинок с различной расстановкой в зависимости от устройств просмотра, т.е. при просмотре на смартфонах изображения будут отображаться в одну колонку, в две колонки на планшетах, и выстраиваться в четыре колонки на больших экранах.
Для реализации задуманного, применим медиа-запросы @media , указав тип носителя, для которого будет применяться то или иное максимальное значение ширины изображений max-width .
HTML:
CSS:
/* Для небольших устройств (смартфоны) */ img max-width: 100%; display: inline-block; > /* Для средних устройств (планшеты) */ @media (min-width: 420px) img max-width: 48%; > > /* Для больших устройств (ноуты, пк) */ @media (min-width: 760px) img max-width: 24%; > >
/* Для небольших устройств (смартфоны) */ img < max-width: 100%; display: inline-block; >/* Для средних устройств (планшеты) */ @media (min-width: 420px) < img < max-width: 48%; >> /* Для больших устройств (ноуты, пк) */ @media (min-width: 760px) < img < max-width: 24%; >>
Всё довольно просто, неправда ли? Идея с медиа-запросами отличная, уже довольно давно и широко используемая. Показанные в примере параметры, хорошо работают именно с данным макетом, как поведут себя в других конструкциях, стоит тщательно проверять, так что…
Адаптивное изображение на всю ширину экрана
Для того, чтобы сделать широко-форматные адаптивные изображения, которые заполняют 100% размера окна просмотра, необходимо просто удалить свойство максимальной ширины контейнера max-width (значение в 960px) и установить ему ширину width в 100%. Ширина изображения, так же выставляется в значение 100%.
CSS:
.container width: 100%; > img width: 100%; >
Несмотря на то что данная техника очень проста в использовании и имеет устойчивую поддержку браузерми, следует помнить о том, что изображения всегда будут показаны в полный размер, т.е. большие, с высоким разрешением изображения показываются заполняя всё пространство, что для небольших мобильных устройств, не всегда в тему, если только картинка не используется в качестве фонового изображения.
На этом пожалуй и всё. Если вы хотите, для различных устройств, использовать отдельные изображения разного размера, используйте, хуже уж точно не будет. Знаете другие методы сделать изображения адаптивными, пишите в комментариях, обязательно рассмотрим, новое оно всегда интересно.
Источник: sixrevisions
Надеюсь буржуинский автор не будет на меня в обиде за столь вольный перевод)))
С Уважением, Андрей .
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Всего комментариев: 41
Нян : 18 марта, 2015 в 22:36 Спасибо, хорошо объяснили про колонки Ответить
Jentoss : 20 июня, 2015 в 03:04 Класс!
Блин очень круто, спасибо! Ответить
Oleg : 31 июля, 2015 в 19:41 Все хорошо Вы описали. Но это все лучше отнести к резиновому дизайну, а не к адаптивному.
В том то и смысл чтобы на мобильных показать совсем другие изображения.
В css через backgraund-image и CSS media queries это делается легко, но в таком случае картинка при плавному уменьшении ширины браузера меняется скачками (в зависимости от того, сколько изображений мы подготовили).
Если же вставлять картинки с помощью тега как здесь описывается, то как менять картинки для разных разрешений? С помощью JS получить ширину девайса, передать из JS в PHP значение ширины девайса (перезагрузка страницы) и выводить нужную картинку с помощью HTML и PHP.
Либо же в HTML выводить несколько изображений, а через CSS скрывать ненужные из них с помощью CSS media queries. Но в этом случае грузятся лишние картинки… Ответить
driver : 1 августа, 2015 в 00:45 Если исходить из терминологии, макет представленный в статье ближе к отзывчивому % + media-queries Адаптивный макет px + media-queries , как раз таки при этом типе верстки страница «прыгает» по контрольным точкам, смещаясь и адаптируя контент каждый раз к наиближайшей следующей из них.
Чистая «резина» использует для элементов относительные показатели %
Вы же описали стратегию прогрессивного улучшения адаптивного дизайна, использующей стилизацию CSS и дополнительные скрипты JavaScript
% + media-queries + %-media + JavaScript + magic
Так что соглашусь с вами, данное решение всё же ближе к отзывчивому типу макетов страниц, который в отличие от адаптивного основывается на принципе «резины». Ну, а в заголовке статьи просто устоявшаяся подмена понятий Ответить
Андрей : 13 сентября, 2015 в 09:54 А если изображение маленькое и без атрибутов ширины и высоты? Тогда как? Оно увеличивается на всю ширину дива… Ответить
driver : 13 сентября, 2015 в 10:33 Соответственно, так как базовая ширина задана в width: 100%;
В данном случае размер предопределяется с помощью свойства max-width: Ответить
Шурик : 2 февраля, 2016 в 12:12 А что будет с картинками, у которых высота больше чем ширина? �� Ответить
driver : 2 февраля, 2016 в 14:14 Попробуйте и всё узнаете )) Ответить
Юлия : 28 марта, 2016 в 09:51 Нужно поставить два лого по краям экрана. Шаблон адаптивный. То есть нужно, что бы на маленьких устройствах лого выводились одно под другим. Подскажите как можно это реализовать? Конкретнее как реализовать отображение двух адаптивных картинок по краям большого экрана? Как то так ))) Ответить
driver : 28 марта, 2016 в 19:46 Если совсем уж по-простецки, то примерно так: см. пример в редакторе изменяйте размер поля просмотра: тынц Ответить
DeniSTAR : 13 августа, 2016 в 23:06 Спасибо!
Наконец-то нашел то, что нужно!
Самая изящная идея. Никакой воды. Всё только по существу. Просто, доступно и понятно.
Теперь с таким инструментом и сайт будет красиво выглядеть, благо и в CSS лишь немного дополнений ввести останется и привести его к большей логике. А то поначалу, задумавшись о кросс-браузерности, боялся, что несколько типов сценариев и файлов CSS придется делать. Теперь — на одну головную боль меньше.
Еще раз Спасибо! Ответить
Hosilov : 20 августа, 2016 в 22:37 Здравствуйте. У меня вопрос : можно ли всё это сделать на вап ? Ответить
Игорь : 7 октября, 2016 в 23:01 А как сделать на одной странице одно изображение адаптивным, адругие фиксированными. Буду признателен… Ответить
Дмитрий : 2 декабря, 2016 в 19:23 Добрый день.
А как сделать так, чтобы не было промежутков между картинками в случае условной расстановки? Ответить
driver : 2 декабря, 2016 в 21:45 Используйте отрицательное значение margin, для всех вариантов, в том числе и для условной расстановки будет примерно так:
img width: 100%;
height: auto;
margin:-3px;
> Ответить
Дмитрий : 3 декабря, 2016 в 16:24 Как вариант. Спасибо. Ответить
gedy : 24 мая, 2017 в 16:46 Спасибо за подсказку. Статья помогла решить проблему. Очень толково, даже для начинающего Ответить
Юрий : 8 июня, 2017 в 16:59 Добрый день.Картинки на сайте не уменьшаются не адаптивные. Я дописал в css
img max-width: 100%;
height: auto;
Почему они не меняются под размер окна?
Мой сайт lifepc.by Ответить
driver : 8 июня, 2017 в 19:06 День добрый.
Всё прекрасно уменьшается(в демо).
У вас же, весь базовый макет #main и вложенные в него блочные элементы имеют фиксированные значения например width:1150px; для основного блока #main и шапки, что само собой изначально исключает отзывчивость макета. У контейнера #main_content размеры не указаны, однако далее у сайдбара и блока контента заданы процентные величины для ширины.
Получается, что ваш макет тупо не резиновый, и стало быть сам шаблон и вложенные в него элементы просто не могут меняться под размер окна.
Чтобы исправить ситуёвину, нужно самую малость, перетряхнуть вёрстку макета, задать не фиксированные размеры как для базы, так и для вложенных элементов(картинкам в том числе), при необходимости использовать медиа-запросы(выражения). Так же придётся поиграться с маржой и флоатами.
Понимаю, геморно, так что для ориентира набросал версию css резинового макета для вас: см.здесь раздел CSS.
Можете использовать стили скопировав, но перед этим конечно же сохраните свою версию, и ещё, в html, непосредственно в шапку, перенесите фоновую картинку, так как из css убрал, получиться должно примерно так:
С менюшкой тоже придётся вам поработать Ответить
BB : 24 июля, 2017 в 23:38 Отлично! Ответить
Irina : 13 октября, 2017 в 22:28 Спасибо! Буду осуществлять на своем сайте! Ответить
Елена : 18 октября, 2017 в 16:48 Спасибо, отличная статья. А есть ли способ показать в контейнере не всё изображение а только его часть, обрезать его по краям, используя только css, не прибегая к обрезке самого изображения. Ответить
driver : 18 октября, 2017 в 21:06 Здравствуйте, Елена.
Способы «обрезки» изображений с помощью CSS, конечно же существую.
Набросал для вас парочку простых примеров, как вырезать определённую область полноразмерной картинки:
Вариант №1 — Обрезка картинок посредством использования overflow: hidden и трансформаций css.
Вариант №2 — Вариант кадрирования изображения с помощью абсолютного позиционирования
Так же, для определения области позиционированного изображения, можно использовать свойство clip: rect () , что это за свойство и, как с ним работать, в интернетах полно развёрнутой информации. Ответить
Андрей : 13 февраля, 2018 в 01:53 Добрый день! Не могу сделать изображение шапки адаптивным…Помогите пожалуйста) Ответить
Александр : 16 февраля, 2019 в 01:01 Базовые значения адаптивного изображения через СSS помогло. Нуб нубом в html, вояю через дримвер 6, наконец то на мобилке картинки четко! Спасибо автору. Ответить
Антон : 25 марта, 2019 в 01:45 Здравствуйте.
Подскажите пожалуйста правильно ли я вас понял.
Каждый раз создавая страницу или запись на сайте (вордпресс) мне надо будет в каждом блоке где хочу ее вывести прописывать ее в хтмл и после стайлить ее?
Не судите строго, новичек.) Ответить
driver : 25 марта, 2019 в 09:42 Здравствуйте.
Стили для изображений задаются и легко изменяются в style.css любой темы wordpress, как базовые, так и для отдельных блоков. Каждый раз в html прописывать ничего не нужно.
Например, прописав в .css для картинок значения width: 100%; height: auto; вы сделаете их отзывчивыми и при размещении в блоках имеющих относительные значения ширины, а это уже обязательное условие современных тем, все ваши картинки будут автоматом подстраиваться под заданный размер родителя.
Рассмотрите подробнее фарш style.css демо-страницы и надеюсь поймёте сам принцип работы, как для отдельных блоков, так и для базы. Ответить
Ильдар : 30 июля, 2019 в 10:30 А можно также сделать с картинками которые обернуты в div со свойством inline block Ответить
Дмитрий : 1 декабря, 2019 в 23:44 Здравствуйте. А если изображение подключено в css как его сделать адаптивным? Ответить
driver : 1 февраля, 2019 в 00:12 Здравствуйте.
Если в качестве фоновой картинки background-image: понадобятся свойства background-position: , background-repeat: , background-attachment: , background-size: и background-color: с определёнными значениями
Так как я не знаю в качестве чего вы используете изображение, подробности расписывать не берусь, дабы не тратить время в пустую Ответить
Адаптивные изображения
В данной статье мы изучим концепцию гибких (responsive) изображений — таких, которые отображаются хорошо на устройствах с сильно отличающимися размерами экрана, разрешением, и другими характеристиками — и рассмотрим инструменты, которые имеются в HTML для их реализации. Responsive images — только одна часть (и хорошее начало) гибкого веб-дизайна, темы, которая будет рассмотрена подробнее в будущем модуле на тему CSS.
| Требования: |
Предполагается, что вы уже знакомы с основами HTML и умеете добавлять статичные изображения на веб-страницу. |
| Цель: |
Узнать, как использовать такие элементы, как srcset и чтобы обеспечить работу гибких изображения на веб-сайтах. |
Почему адаптивные изображения?
Какую проблему мы пытаемся решить адаптивными изображениями? Давайте рассмотрим типичный сценарий. Обычный веб-сайт может содержать изображение в заголовке, для улучшения визуального восприятия пользователем, а также несколько изображений в контенте под ним. Вы, вероятно, захотите, чтобы изображение в заголовке занимало всю ширину окна, а изображения в контенте размещались где-то внутри колонки с контентом. Давайте посмотрим на следующий простой пример:
Такая вёрстка хорошо выглядит на широкоформатных экранах ноутбуков и настольных ПК, (вы можете посмотреть посмотреть демо-пример и найти исходный код на Github.) Мы не будем подробно рассматривать CSS, скажем только следующее:
- Содержимому тега main задана максимальная ширина 1200 пикселей. Если ширина окна браузера больше этого значения, то содержимое сайта остаётся на 1200 пикселей и центрирует себя в доступном пространстве. Если ширина окна браузера меньше, содержимое устанавливается в 100% от ширины экрана.
- Изображение в шапке всегда будет оставаться в центре тега header вне зависимости от ширины браузера. Если сайт будет просматриваться на узких экранах, то важные детали в центре изображения (люди) всё равно будут видны. Все, что выходит за пределы ширины экрана будет скрыто. Высота шапки 200 пикселей.
- Изображения в содержимом заданы так, что если ширина body становится меньше чем ширина изображения, то изображения начинают сжиматься и остаются всегда внутри body и не выступают за его пределы.
Всё хорошо, однако проблемы начинаются, когда вы просматриваете сайт на устройстве с небольшим экраном – шапка внизу выглядит нормально, но теперь она занимает значительную высоту экрана; первое изображение в контенте напротив, выглядит ужасно – при таком размере едва можно рассмотреть людей!
Было бы намного лучше показывать обрезанную версию изображения, на котором видны важные детали снимка, когда сайт отображается на узком экране, и, возможно, что-то среднее между обрезанным и оригинальным изображениями для экранов средней ширины, таких как планшеты – это известно как art direction problem.
Кроме того, нет нужды встраивать такие большие изображения на страницу, если она просматривается на маленьком экране мобильного устройства; это называется resolution switching problem — растровое изображение представляет собой точно-заданное количество пикселей по ширине и высоте; как мы успели заметить, когда рассматривали векторную графику, растровое изображение становится зернистым и выглядит ужасно, если оно отображается в размере большем, чем оригинальный (тогда как векторное изображение нет). В то же время, если изображение отображается в гораздо меньшем размере, чем оригинальный, это приведёт к напрасной трате трафика — пользователи мобильных устройств будут грузить большое изображение для компьютера, вместо маленького для их устройства. Идеально было бы иметь несколько файлов в разных разрешениях, и отображать нужный размер в зависимости от устройства, обращающегося к веб-сайту.
Сложность в том, что для некоторых устройств с большим разрешением экрана нужны изображения большего чем ожидается размера, чтобы чётче отображалось. По сути это всё одна задача в разных условиях.
Можно предположить, что векторные изображения могли бы решить эти проблемы. В какой-то степени это так. У них небольшой вес и размер, поэтому их можно использовать почти в любом случае. Они хороши для простой графики, узоров, элементов интерфейса и т. д. Сложнее создать векторное изображение с большим количеством деталей, как, например, на фото. Растровые изображения (JPEG) для нашего примера подходят больше.
Такого рода проблемы не было в начале существования веба, в первой половине 90-х годов – тогда единственными устройствами для просмотра веб-страниц были настольные компьютеры и ноутбуки, так что создатели браузеров и авторы спецификаций даже не задумывались о создании решения. Технологии отзывчивых изображений были реализованы недавно для решения проблем, указанных выше. Они позволяют вам предоставить браузеру несколько изображений, каждое из которых отображает одно и то же, но содержит разное количество пикселей (resolution switching), или разные изображения с отдельными областями основного изображения (art direction).
Как сделать изображения отзывчивыми?
В этом разделе рассмотрим две вышеописанные проблемы и покажем, как их решить с использованием инструментов HTML . Как показано на примере выше — изображение в заголовке используется только как украшение сайта и установлено как фоновое с помощью CSS. CSS больше подходит для адаптивного дизайна чем HTML, об этом поговорим в следующем модуле о CSS.
Разные разрешения: Разные размеры
Итак, какую проблему решают разные разрешения? В зависимости от устройства нужно отобразить одно и то же изображение, но разных размеров. Посмотрите на вторую картинку в примере. Стандартный элемент обычно позволяет указать только один путь к файлу:
img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy" />
Однако есть два новых атрибута — srcset и sizes — позволяющих добавить дополнительные изображения с пометками, чтобы браузер выбрал подходящее. Пример на Github: responsive.html (также смотри источник кода).
img srcset=" elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w " sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy" />
Атрибуты srcset и sizes кажутся сложными, но они не так плохи, если вы отформатируете их как в примере выше: каждая часть значения атрибута с новой строки. Значение состоит из списка элементов через запятую, каждый из которых включает три части. Давайте рассмотрим эти значения:
srcset включает названия изображений, среди которых браузер выберет нужное и их размеры. Перед каждой запятой части значения в таком порядке:
- Название изображения ( elva-fairy-480w.jpg .)
- Пробел.
- Актуальная ширина картинкив пикселах ( 480w ) — заметьте, что здесь используется w вместо px , как вы могли ожидать. Эта настоящая ширина изображения, которая может быть просмотрена в свойствах картинки на вашем компьютере (например, на Mac нужно открыть картинку в Finder и нажать Cmd + I , чтобы вывести информацию на экран).
sizes определяет перечень медиавыражений (например, ширину экрана) и указывает предпочтительную ширину изображения, когда определённое медиавыражение истинно — это то, о чём мы говорили выше. В нашем случае, перед каждой запятой мы пишем:
- Медиа-условие ( (max-width:480px) ) — вы можете больше узнать об этом в CSS topic, но сейчас давайте скажем, что медиа-условие описывает возможное состояние экрана. В этом случае, мы говорим «когда viewport width меньше или равен 480 пикселям».
- Пробел.
- Ширину слота (в оригинале «width of the slot»), занимаемую изображением, когда медиа-условие истинно. ( 440px )
Примечание: Для ширины слота, вы можете указать абсолютные значения ( px , em ) или значение относительно окна просмотра ( vw ), но НЕ проценты. Вы могли заметить, что у последнего слота нет медиа-условия — это значение по умолчанию, которое станет актуальным, если ни одно из предыдущих медиа-условий не будет истинно. Браузер игнорирует все последующие проверки после первого совпадения, так что будьте внимательнее к порядку их объявления.
Итак, с такими атрибутами, браузер сделает следующее:
- Посмотрит на ширину экрана устройства.
- Попытается определить подходящее медиа-условие из списка в атрибуте sizes .
- Посмотрит на размер слота к этому медиавыражению.
- Загрузит изображение из списка из srcset , которое имеет тот же размер, что и выбранный слот, или, если такого нет, то первое изображение, которое больше размера выбранного слота.
И это всё! На текущий момент, если поддерживающий браузер с viewport width 480px загрузит страницу, медиа-условие (max-width: 480px) будет истинно, следовательно, будет выбран слот 440px , тогда будет загружено изображение elva-fairy-480w.jpg , так как свойство ширины ( 480w ) наиболее близко значение 440px . Условно, изображение 800px занимает на диске 128KB, в то время как версия в 480px только 63KB — экономия в 65KB. Теперь представьте, что у вас страница, на которой много изображений. Используя это технику, вы обеспечите мобильным пользователям большую пропускную способность.
Старые браузеры, не поддерживающие эти возможности, просто проигнорируют их и возьмут изображение по адресу из атрибута src .
Полезные инструменты разработчика
Есть несколько полезных браузерных инструментов разработчика, чтобы помочь с определением необходимой ширины слотов и т. д., которые вам нужно использовать. Когда я работал над ними, я сначала загружал фиксированную версию моего примера ( not-responsive.html ), затем открывал Responsive Design View (Tools > Web Developer > Responsive Design View), который позволяет взглянуть на layout вашей веб-страницы как если бы они были просмотрены через устройства с различными размерами экрана.
А дальше вы можете проверить работает ли srcset если установить значение viewport width таким каким вы хотите (например, установить узкую ширину), открыв Network Inspector (Tools > Web Developer > Network) и затем перезагрузить страницу. Это должно дать вам перечень ресурсов которые были загружены чтобы составить (собрать) web-страницу, и тут вы можете проверить какой файл изображения был выбран для загрузки.
Переключения разрешений: Одинаковый размер, разные разрешения
Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя srcset с x-дескриптором и без sizes — более простой синтаксис! Найти пример как это выглядит можно здесь srcset-resolutions.html (смотрите также the source code):
img srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x" src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy" />
В данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называемое CSS-пикселями):
img width: 320px; >
В этом случае, нет необходимости в sizes — браузер просто определяет в каком разрешении отображает дисплей и выводит наиболее подходящее изображение в соответствии с srcset . Таким образом, если устройство, подключаемое к странице, имеет дисплей стандартного/низкого разрешения, когда один пиксель устройства представляет (соответствует) каждый CSS-пиксель, то будет загружено изображение elva-fairy-320w.jpg (применён x1, то есть вам не надо включать его). Если устройство имеет высокое разрешение, в два пикселя устройства на каждый CSS-пиксель или более, то будет загружено изображение elva-fairy-640w.jpg . 640px изображение имеет размер 93KB, тогда так 320px изображение — всего 39KB.
Художественное оформление
Подводя итоги, проблема художественного оформления заключается в желании изменить отображаемое изображение чтобы оно соответствовало разным размерам отображения изображения. Например, если на веб-сайте отображается большой пейзажный снимок с человеком посередине при просмотре в браузере на настольном компьютере, то при просмотре веб-сайта в мобильном браузере он уменьшается; он будет выглядеть плохо так как человек будет очень маленьким, и его будет тяжело разглядеть. Вероятно будет лучше показать меньшую портретную картинку в мобильной версии на которой человек отображается в увеличении (в приближении). Элемент позволяет нам применять именно такое решение.
Возвращаясь к нашему оригинальному примеру not-responsive.html, мы имеем изображение которое очень нуждается в художественном оформлении:
img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
picture> source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" /> source media="(min-width: 800px)" srcset="elva-800w.jpg" /> img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" /> picture>
- Элемент принимает атрибут media , который содержит медиа-условие; при помощи этих условий определяется, какое изображение будет выведено. В данном случае, если ширина viewport’a составит 799px или меньше, будет выведено изображение первого элемента . Если ширина составит 800px и более — второго.
- Атрибут srcset содержит путь изображения, которое будет выведено. Обратите внимание, что, как и в примере с
![]()
выше, может принимать атрибуты srcset и sizes с несколько предопределёнными изображениями. Так вы можете не только поместить группу изображений внутри элемента , но и задать группу предписаний для каждого из них. В реальности вы вряд ли захотите заниматься этим очень часто.
- Вы всегда должны использовать элемент
![]()
, с src и alt , прямо перед , иначе изображения не появятся. Это нужно на тот случай, когда ни одно из медиа-условий не удовлетворено (например, если бы вы убрали второй элемент ) или браузер не поддерживает элемент .
Этот код позволяет нам выводить отзывчивое изображение и на широких, и на узких экранах, как показано ниже:
Примечание: вам следует использовать атрибут media только при художественном оформлении; когда вы используете media , не применяйте медиа-условия с атрибутом sizes .
Почему это нельзя сделать посредством CSS и JavaScript?
Когда браузер начинает загружать страницу, он начинает загрузку изображений до того, как главный парсер начал загружать и интерпретировать CSS и JavaScript. В среднем, эта техника уменьшает время загрузки страницы на 20%. Но она не так полезна в случае с адаптивными изображениями, поэтому и необходимы такие решения, как srcset . Например, вы не могли бы загрузить элемент ![]()
, потом определить ширину вьюпорта при помощи JavaScript и динамически изменить источник изображения. Изначальное изображение было бы уже загружено к тому времени, как вы загрузили его меньшую версию, что плохо.
Смело используйте современные форматы изображений
Есть несколько новых форматов изображения (таких, как WebP и JPEG-2000), которым удаётся сохранять высокое качество при малом размере файла. Тем не менее, браузеры поддерживают их не полностью.
позволяет нам использовать их в старых браузерах. Вы можете прописать MIME-тип внутри атрибута type , браузер сразу определит файлы такого типа как неподдерживаемые:
picture> source type="image/svg+xml" srcset="pyramid.svg" /> source type="image/webp" srcset="pyramid.webp" /> img src="pyramid.png" alt="regular pyramid built from four equilateral triangles" /> picture>
- Не используйте атрибут media , если вам не нужно художественное оформление.
- В элементе можно указывать путь к изображениям только того типа, который указан в type .
- Как и в предыдущих примерах, при необходимости вы можете использовать srcset и sizes .
Активное обучение: реализация собственных адаптивных изображений
Самостоятельно создайте отзывчивое, художественно оформленное изображение для широких и узких экранов, используя и srcset .
- Напишите простую HTML-разметку.
- Найдите широкоформатное пейзажное фото с какой-нибудь яркой деталью. Создайте веб-версию изображения посредством графического редактора, потом обрежьте его, чтобы крупнее выделить деталь, и создайте второе изображение (примерно 480px достаточно).
- Используйте элемент для работы с художественно оформленной картинкой.
- Обозначьте несколько разных размеров для этой картинки.
- Используйте srcset / size для описания переключения при смене размеров вьюпорта
Примечание: Используйте инструменты разработчика, чтобы отследить смену размера, как было описано выше.
Заключение
Это все для отзывчивых изображений — мы надеемся, вам понравилось играть с этими новыми технологиями. Напомним, что мы здесь обсуждали две различные проблемы:
- Художественное оформление: Проблема, при которой вы хотите использовать обрезанные изображения для различных макетов — например, ландшафтное изображение для полных экранов на макете компьютера и портретное изображение, показывающее увеличенный основной объект, для мобильного макета. Всё это может быть решено с помощью элемента.
- Переключение разрешений: Проблема, при которой вы хотите использовать файлы изображений меньшего размера на устройствах с узким экраном, поскольку им не нужны огромные изображения, как на настольных дисплеях, а также дополнительно, что вы хотите использовать изображения разного разрешения для экранов с высокой/низкой плотностью. Эту проблему можно решить с помощью векторной графики (SVG изображений), и srcset и sizes атрибуты.
Это так же подводит нас к окончанию целого модуля «Мультимедиа и встраивание»! Единственное, что вам осталось сейчас сделать перед тем, как двигаться дальше — это попробовать наше мультимедийное задание и посмотреть, как вы усвоили материал. Веселитесь!
Посмотрите так же
