Тег picture в HTML. Адаптивные изображения

Привет! Как дела? Записал новое видео для тебя!

Спасибо за полезный урок! 👍 👍 👍❤️

Спасибо. Почему Brackets? Сделай видео по настройке и плагинам редактора пожалуйста.

Автор, дайте ссылку на скачивая музыки, которая на фоне.

Что такое ретина? (Изв. Я тупой)

А как вы установили телефон на браузер

крутой плагин который показывает картинку при наведении курсор в код html/// существует ли такой плагин на visual studio code?

а как же быть с background-image ?

Лучший, братик. 💪✋
Как обычно)

Как вы работали 4 года назад в brackets, так и продолжаете работать?
А ведь появилось множество хороших редакторов, например vscode, или ide phpstorm.
А вы просто консерватор)))

Вы еще про webp забыли рассказать, его тоже можно использовать в теге picture.

За 10 минут все клево объяснил, а то надоела куча туториалов 10 штук по полчаса объясняют тэг picture. Спасибо, подписался.

а как делать @2x ??? у меня они получаются в плохом качестве, как все так их увеличивают?!

Идеология данного тега непонятна: хорошо, можно тут сделать медиа запрос с разными картинками, а как тогда быть с остальным контентом (медиа формат для других устройств), его же придется писать в css файле. Т.е. придется разделить код под разные устройства на два или более разных места, что затруднит поддержку такого кода. В моем понимании - picture - плохое нововведение.

Просто, понятно, качественно, полезно. Лайкос

Спасибос!

для jpeg картинок так же?

ребят не понял только как картинку готовить.

Здравствуйте. А классы прописывать и для img и для source одинаковые? (к примеру если у нас 2 расширения png и webp)

Спасибо. Второй день голова пухла от непонятной статьи про это в интернете.

А что эта за классное расширение для просмотра адаптивных экранов? можно ссылку?)

очень гибкий, жаль что захламляет html

Круто, ну а как мне к примеру менять картинку, если у меня при адаптиве 1920, 1024, 768, 320. ?

Прикольный тег!

тег picture создает ненужные DOM узлы. Можно без него обойтись

Ты лучший 👍

А что будет если тэг img скрыт медиа выражением в picture. А в стилях написать img{display:block} ?

А что за прикол?
Ведь плохо же в html писать адаптив!
Это же его захламляет

Полезно и очень подробно!!😎

вы использовали фотошоп для convert картинок 1x, 2x (dpi) ?

Спассибо, тяжело было самому разобраться.

фул хд)))

Огромное спасибо! Очень доступно обьяснили

Теперь вопрос если к тэгу img я задаю класс , то получаю что если браузер выбирает изображение из sours то класс и стили css не подтягиваются ,
class="cover__users-ava" - задаёт позицию абсолют и координаты, если удалить source то всё работает

<picture>
<source type="image/webp" srcset="img/zxc.webp">
<img class="cover__users-ava" src="img/zxc.png" alt="ava">
</picture>

То что надо. Спасибо теперь понял.

А если браузер не поддерживает тег пикче? Че делать

Размазывал кашу по тарелке как мог, повторяя одно и тоже, аж на 10 минут вышло, вах.

Скажите, если браузер старый и не поддерживает SVG, будет ли в нем работать тег <picture>?

а если картинки в srcset будут разных форматов, png, jpg оно не будет работать?

спасибо!огонь!

Cпасибо бро очень граммотно и доходчиво объяснил!лайк подписка!

Спасибо, было полезно

Всё здорово! Действительно очень доходчиво рассказали об этом способе! Хотелось бы добавить, что вот такая конструкция кода например media="(min-width: 450px) and (max-width: 600px)" тоже будет работать. Прям как в медиа запросах CSS. Это значит, что в этом диапазоне будет показываться ваше изображение. Для другого диапазона другое. Просто сколько не смотрел такого примера нигде не встречал, однако он рабочий и в определённых случаях очень удобный!

<picture>
<source srcset="html5-logo.svg" type="image/svg" />
<img src="Screenshot(1).png" />
</picture> - в хроме всё равно png