Разбор тега picture. Для чего нужен, синтаксис, примеры

Привет! В этом видео расскажу о теге picture и вариантах его использования
github.com/maxdenaro/maxgraph... - код из видео
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Поддержать канал: boosty.to/maxgraph
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: t.me/maxgraph
Чат для верстальщиков: t.me/maxgraph_chat
#обучение #css #picture

[@sineylo]

Возможно кому-то будет интересно узнать про то, что такое вообще 1x, 2x, 3x и так далее. Это называется дескриптор плотности пикселя (Pixel Density Descriptor - PDD). Значение 1x можно не указывать так как браузер по умолчанию обрабатывает указанное изображение без дескриптора, как 1x. Даже если его указать, хуже не станет, а возможно частично добавит ясности. В некоторых зарубежных источниках ещё часто можно встретить вот такое обозначение 200w, 250w и так далее. Это уже дескриптор ширины (Width Descriptor - WD). 1w = 1px. Всё это в целом называется метаданными. Так или иначе, как показывает практика лучше всего использовать PDD.

[@alexandrgusletsov2567]

топ! Спасибо Максим

[@evgeniika8426]

Спасибо! Это лучшие уроки по верстке!

[@Code.bless_you]

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

[@maxgraph]

Пожалуйста)

[@user-nr7mz5kc3o]

Спасибо за полезное видео, всё очень чётко и понятно объясняете !

[@user-hw9iu6fe8x]

Только начал искать инфу про picture и сразу полезное видео на канале вышло😁 Сразу лайк,а потом просмотр)

[@Anatoli-bq1pe]

Огромная благодарность за данный видос! Честно сказать даже не знал про такое

[@alexeyponomarev3241]

Спасибо за очередное полезное видео, Максим!

[@relaxdeepsleepmusic3608]

Спасибо большое за видео.

[@PupkinRytp]

Макс, лайк как всегда!

[@user-or3ou3yl2r]

Спасибо!

[@Vedar.]

🔥

[@AntonioBenderas]

Крутотень. Всё сжато в одном видео. Ещё бы вариант как через css подключать разные варианты картинки.
А такой вопрос, это задача дизайнера или верстальщика подготавливать целый сет картинок для одного изображения?

[@sineylo]

Через CSS можно будет такое делать, правда ещё не скоро ибо функция image-set() до сих пор находится в статусе Working Draft. Частично её можно попробовать в браузере Firefox.
---
Задача дизайнера подготовить изображения для каждого брейкпоинта, но увы так делают не все. Я бы даже сказал так: «Хорошо, если в целом будут дополнительные макеты, не говоря уже про подготовленные изображения :)».

[@adm93rus]

Интересно как должен выглядеть picture, если мне в не. Нужно вывести и webpage и jpg и их еще разные размены под разные медиазапросы?

[@maxgraph]

Страшно))

[@Gazovchik]

Всем привет
Мне интересно - но для меня - автор Не чётко говорит......
и надо всё время вслушиваться, чтобы просто Понять - Какие слова произносятся......
Это неудобно

[@user-jt7wb3zc1m]

Как по мне автор говорит все четко. Но, специально дла Вас я хакнул *TouTube* и вставил Вам (в плеер) кнопку _Subtitles/closed captions (c)_ проверьте, не исключено что может помочь в Вашей ситуации! 😘

[@Unknown-xh7rz]

Спасибо за полезный видос