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

[@igorkl5167]

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

[@alex.zaslavskyi]

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

[@Skzokwkzlqlal]

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

[@Тихийпомощник]

- в хроме всё равно png

[@АртёмРуа]

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

[@BrainsCloud]

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

[@yaroslavzef7267]

Норм. Как сам?

[@АлексейАлексеевич10летназад]

Здравствуйте! Спасибо вам за ваши видео! У меня вопрос - как сделать блок, с фиксированной высотой и шириной, но при этом чтобы он адаптировался как картинка с свойством width 100%?

[@bohdanmarchenko]

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

[@sultanabdulazizov835]

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

[@darktoxin1991]

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

[@user-jv5qc6vg2b]

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

[@pandaskeptic2937]

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

[@BrainsCloud]

Пожалуйста!

[@JavaScriptcher]

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

[@IsHardynafthardynaft]

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

[@IsHardynafthardynaft]

У меня сработал такой код, если это можно назвать таковым: p.s. Думаю, что когда дотянусь до изучения CSS, то нагибать картинки станет проще.

[@adaewandrei]

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

[@yoltart7694]

Ты лучший 👍

[@orcsamuro9687]

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

[@Alexus1504]

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

[@Beyond-the-transcendent]

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

[@bohdanmarchenko]

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

[@powerrampage]

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

[@Кочевник-р2е]

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

[@alexeipopov3319]

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

[@BrainsCloud]

А почему не он? Мне удобно.

[@SergiuBurduja-y1l]

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

[@niqwer477]

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

[@igorkl5167]

Будет!

[@jangow5716]

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

[@BrainsCloud]

только для img

[@bigblueboar]

Классы берутся для тега IMG

[@irustv7674]

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

[@bigblueboar]

Так можно ж не использовать. Можете все писать по-старинке в CSS. Кому-то нравится, кому-то нет.

[@yaroslavzef7267]

Спасибос!

[@ertargn]

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

[@BrainsCloud]

не знаю

[@Kot_off]

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

[@bigblueboar]

Поставить 4 тега source, и для каждого свою картинку, и свой медиа-запрос? Ну, если для каждого разрешения прямо обязательно свою картинку.

[@Frie666]

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

[@bigblueboar]

Также. Только там есть еще один атрибут, указывает тип картинки. Не только png/jpg, еще webp, например, или avif

[@ldm2316]

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

[@BrainsCloud]

Поищите в аудио-библиотеке ютуба, называется nimbus

[@SergiuBurduja-y1l]

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

[@SergiuBurduja-y1l]

Все, нашел решение kzbin.info/www/bejne/i2KZaKOnjr2mb7c тоже у вас, спасибо вам за контент. Продолжайте в том же духе. У вас очень приятный голос и хорошая подача материала.

[@bigblueboar]

Не только webp, там куча всего. Например, еще jpg/png/svg/avif/heif. Будет загружено то, что поймет браузер.

[@mustang...]

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

[@checkTM]

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

[@thekamol]

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

[@BrainsCloud]

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

[@thekamol]

Нет, я имел виду картинок телефона

[@hawaiianboi8412]

@@thekamol f12 / toggle device toolbar / more options / show device frame. пока это работает только с айфонами до версии Х и айпадом. У меня версия хрома - 74

[@bigblueboar]

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

[@varfolomeiq]

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

[@BrainsCloud]

изначально делаете большую картинку, потом ее уменьшаете в два раза

[@gio2156]

Используй svg, если это лого то тем более, логотипы ща все svg делают

[@OyNice]

Здравствуйте! Как именно его уменьшают? То есть берётся картинка кодировается да? Если кадрировать фото то как кадрировать 2x раза ? Я новичок данной сфере пока не понимаю как решать различные задачи. помогите мне.

[@Frie666]

@@OyNice нашел ответ? напиши решение плиз

[@OyNice]

@@Frie666 Посмотри это видео: kzbin.info/www/bejne/iGqQdWadpd2Loas Если хочешь уменьшить размеры фото можешь через программу paint. (Если не можешь найти программу, то берёшь нужную тебе фотографию кликаеш и нажимаешь на правую кнопку мыши). Надеюсь разберёшься. Если что пиши.

[@golofaev]

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

[@BrainsCloud]

А что с ним не так?

[@golofaev]

как правильно прописать правило?

[@alym.aleksey]

@@golofaev через медиазапросы

[@ПашаЛоторев]

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

[@BrainsCloud]

Дисплеи с высокой плотностью пикселей

[@ertargn]

все норм не ты один тупой

[@yrka183]

Продукция яблока

[@bigblueboar]

Это когда дисплей вроде бы размером (физически, в дюймах) таким, как все Full-HD дисплеи (1920х1080), но там разрешение больше - не помню точно, 2 или 3 тысячи по горизонтали. Чтобы, вроде как, картинки были четче и красивее.

[@artemkosharnyi7812]

фул хд)))

[@DartMitai]

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

[@bigblueboar]

Тут с какой стороны посмотреть. Тегов - больше, да. Но это решение проблемы. А без этого тега пришлось бы писать еще гораздо больше. А избавиться от проблемы не выйдет - не заставишь же производителей делать все девайсы с одним и тем же разрешением.

[@taraszas]

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

[@ВладФилборман]

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

[@storikx8882]

Обнови браузер или пиши через CSS

[@BuggsSunny]

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

[@bigblueboar]

Например? Как?