📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
Полезное видео Саша. Правительство закручивает гайки, дублируй видео и на рутубе обязательно. Если можно, сделать ролик о мотивации, ее иногда так не хватает...
Спасибо) Интересно было бы послушать, какие варианты есть для минификации изображений через сборщики, как настроить такую автоматическую минификацию. Например в Vite
Отличное видео 👍 Ранее ты писал, что рассмотришь возможность сделать видео про реализацию темной темы на сайте. Мы когда-нибудь увидим это видео? Хотелось бы посмотреть на твою реализацию 🙂
Спасибо за информативное видео, но остался вопрос. Когда браузер выбирает изображение на основе медиазапросов в , он использует как окончательный элемент для отображения изображения? Поэтому все стили, примененные к классу в , будут применяться к выбранному браузером изображению, независимо от того, какое изображение было указано в ?
Можно идти по всем роликам канала, начиная с первого. Пропустить можно разве что мини-курс по цифровой доступности, видео про фишки DevTools и видео про будущие фишки CSS (их всех 3 штуки, везде упоминаю про «свежесть» рассказываемых функций). Весь остальной же контент идёт в порядке возрастания сложности. Начинай с курсов HTML и CSS, затем проходи первый мастер-класс по верстке, затем изучай следующие ролики про БЭМ и препроцессор стилей Sass, смотри следующий мастер-класс для продвинутых, а затем уже переходи на курс по JavaScript.
Хорошее видео спасибо! Единственно, хотелось бы больше узнать ещё несколько моментов. Куда и как лучше вставлять текстовый вариант картинки в base64, как заглушку перед загрузкой. И очень интересна тема svg, если их держать в html то можно через currentColor менять цвет картинки что очень удобно для иконок. Если загружать через img то они будут кешироваться но цвет уже поменять нельзя. Может есть техника чтобы и при img можно было svg контролировать?
1. Не понял про «текстовый вариант картинки». Заглушкой перед загрузкой картинки может быть просто background-color. При чем тут base64? Или идея тут в том, чтобы поместить заглушку в base64 в background-image? 2. Для смены цвета svg нужно вставлять элемент непосредственно в разметку. Если svg размещена через или background-image, то знаю только один способ повлиять на цвет - использовать CSS-свойство filter, но способ этот очень костыльный и нечитаемый, плюс не всегда получается добиться нужного оттенка.
@@AleksanderLamkov да картинка сжатая и перекодированная в base64 вставляется куда то в разметку чтобы показываться до основной картинки. Как именно это делается я просто не в курсе. Насчёт svg да видно иконки для шрифтов придётся держать в штмл, они конечно не очень много весят, но всё же без кэша не очень.
Про заглушку в виде base64 не подскажу, к сожалению, сам не встречался с таким. Я помню, что когда-то Skeleton-элементы через JS-библиотеку навешивали на те места интерфейса, которые ещё не подгрузились. Но там не конкретная картинка-подложка под каждое ещё-не-прогруженное-изображение, а какая-то анимируемая штукенция одинаковая для всех.
Там где ты рассказываешь про подгрузку разных размеров картинок для мобильной и десктопной версии, есть один небольшой минус, если у сайта имеется админка, то картинку администратору придется загружать в нескольких размерах для разных экранов, как мне показывает опыт работы, этим никто не будет заниматься, есть уникальный личности которые умудряются засовывать скрипты в поля для текста в админке, поэтому что-то мне подсказывает что администратору будет лень загружать картинки разной размерности) Если конечно есть способ получше, хотел бы знать, буду благодарен, не считая Next JS в котором можно просто использовать Image из next/image и просто указать размеры картинки в sizes через max-width и он сам подгонит картинки к нужным размерам)
Если речь про картинку разных размеров, но с одинаковыми пропорциями, то уверен, что есть тонна плагинов для CMS, которые могут помочь даже из небольшой картинки сделать умный апскейл до нужных ширин экранов.
В picture можно выбирать же тоже с помощью дескрипторов ретину? Полная пропись picture выглядит я таким обращом ? : 1x для наглядности написал, да и вроде ничего такого если он даже и будет. Таким образом я пишу соурсы для avif все медиа в таком формате с ретиной в srcset, все три перечисляю. Далее webp для всез медиа так же Далее могу ведь и jpg так же в сорусе прорисать длч ретина со всеми медиа И в самом конце, перед закрываюшим picture написать уже простой img Я верно понимаю ? Просто предположим , что я в галпе сделал таску , которая все во все конвертирует , штампует разные размеры, все это адаптирует под ретину , и пишет мне picture вместо img. Полностью прописаный picture так будет выглядеть ? 😊
отличное видео, как раз не представлял как решить проблему, я добавил для картинок атрибут data-src с путем на другие картинки чтобы с js получить к ним путь и когда жмешь на картинку при открытии модального окна с картинкой, картинка с задержкой прогружалась, но в чем в первую очередь может быть проблема? сайт уже на хостинге, только проблему эту надо решить
Можно решить проблему через , либо начинать грузить полноразмерную картинку не при клике, а при наведении мыши на элемент, триггерящий открытие этой самой модалки.
По поводу image-set в css. Браузерная поддержка webp появилась раньше чем само свойство. По этому фолбек до jpg никогда не дойдет и картинка вообще не отобразится. Думаю нужно отдельным свойством задать ее выше без image-set.
Да почему же не дойдёт? Браузер читает содержимое функции image-set слева направо сверху вниз. background-image: image-set( url('images/cat.avif') type('image/avif'), url('images/cat.webp') type('image/webp'), url('images/cat.jpg') type('image/jpeg') ); Если браузер встречает поддерживаемый формат картинки, то её он и будет обрабатывать. В ином случае - попробует проанализировать следующее.
Да, это разные вещи. Плотность пикселей зависит от показателя экрана DPI. А размер - ну, это буквально размеры вьюпорта, типа ширина и высота доступного на экране пространства.
как быть если картинка респонсив? Т.е если задать фикс. размер, то понятно, что место будет выделено, а вот если она гибкая и меняет размер при изменении экрана на каждый пиксель как делать, чтобы не было прыжков контента? Или вообще не стоит так делать и лучше делать картинки под каждый экран в свой размер и менять только окружающий контент? Спасибо за видео!
Главное задать в атрибутах width и height максимально возможные для картинки размеры (то есть, вероятнее всего, размеры с десктопной версии макета). И если пропорции картинки на адаптиве не меняются (а так оно и бывает в большинстве случаев), то браузер будет для изображения резервировать адекватное место пропорционально указанным в атрибутах width и height значениям, независимо от ширины экрана, на котором грузится страница.
Да, полезный атрибут, спасибо! В курсе по HTML в уроке про изображения про «ленивую» загрузку рассказывал. В этом же видео постарался сконцентрироваться на той информации, которой ещё не было в материалах моего канала 🙂
Ты говоришь что в реальном проекте ты бы использовал плагин для минификации всех картинок, не запишешь видео на эту тему? Какой плагин, как ставить, как использовать?
Это все корректно работает если пользователь открывает сайт с мобилки в вертикальной ориентации, но в процессе взаимодействия со страницей меняет ориентацию на горизонтальную (и наоборот)?
интересно, что может себе представить слепой пользователь, которому скинридер озвучит вот тот весь alt про кошку, если этот слепой в жизни не видел кошку, цвета окраса, даже что такое угол из-за которого она выглядывает?
Не думаю, что у такого пользователя будут проблемы с восприятием тех вещей, о которых он знает с малых лет. Да и фантазию ведь никто не отменял 😅 Но вопрос интересный 🙂
4:20 стыдно не знать что если напротив Export нажать плюсик, то автоматически добавится на экспорт файл в х2 формате. а если еще раз нажать то в х3. и файлы не надо под формат именовать
![YoungBoy Never Broke Again - Missing Everything [Official Video]](http://i.ytimg.com/vi/dTYeMZGzOzw/mqdefault.jpg)
📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь:
💬 t.me/friendlyFrontendChat
Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
Вы - лучший человек!!!!!!! СПАСИБО ЗА ВАШИ ВИДЕО!!!! просто находка! :)
Спасибо тебе за твои старания 👍, надеюсь что в связи с ситуацией не забросишь записывать ролики , качественный контент ,очень ценно🙂
Вау! Спасибо за урок и ценную информацию. Только у Вас видел такой подробный гайд по изображениям! Передоз котами обеспечен))
Спасибо за ролик! Только начал учить WEB , не давно как раз сталкивался с проблемой отображения картинки на разных экранах))
Благодарю за очень полезное видео!
Про image-set не слышал, спасибо 👍
Полезное видео Саша. Правительство закручивает гайки, дублируй видео и на рутубе обязательно. Если можно, сделать ролик о мотивации, ее иногда так не хватает...
Спасибо) Интересно было бы послушать, какие варианты есть для минификации изображений через сборщики, как настроить такую автоматическую минификацию. Например в Vite
gulp тебе в помощь
@@petersen1554 Спасибо, но он же не для всех проектов.
Отличное видео 👍 Ранее ты писал, что рассмотришь возможность сделать видео про реализацию темной темы на сайте. Мы когда-нибудь увидим это видео? Хотелось бы посмотреть на твою реализацию 🙂
Да, я не забыл, будет про это видео, но точно после окончания курса по JS.
Спасибо большое за это видео ❤
Спасибо!
Спасибо! Было интересно 🌹
круто, спасибо, как всегда шикарно!
Кто заметил, что автор даже меняет содержимое тега title от таймкода к таймкоду?) ❤
Лайк на префаере ) интересная тема
За котиков отдельный лайк!!!
Очень круто, как всегда, лайк!!! Вы тут заговорили о сборщиках, не планируется ли в будущем какое-то видео о сборщиках? Вроде Vite сейчас на хайпе
Да, будет, после курса по JS и мастер-класса.
Очень жду нового много часового видео по верстке, предыдущие 2 верстки были просто кладезью информации. Планируются ли они вообще?
Да, после курса по JS.
Спасибо за информативное видео, но остался вопрос. Когда браузер выбирает изображение на основе медиазапросов в , он использует как окончательный элемент для отображения изображения? Поэтому все стили, примененные к классу в , будут применяться к выбранному браузером изображению, независимо от того, какое изображение было указано в ?
Да, всё верно.
Добрый день.А вы не могли бы подсказать списком последовательность ваших курсов и видео что за чем стоит учить. Возможно с вашими дополнениями !))
Можно идти по всем роликам канала, начиная с первого.
Пропустить можно разве что мини-курс по цифровой доступности, видео про фишки DevTools и видео про будущие фишки CSS (их всех 3 штуки, везде упоминаю про «свежесть» рассказываемых функций).
Весь остальной же контент идёт в порядке возрастания сложности.
Начинай с курсов HTML и CSS, затем проходи первый мастер-класс по верстке, затем изучай следующие ролики про БЭМ и препроцессор стилей Sass, смотри следующий мастер-класс для продвинутых, а затем уже переходи на курс по JavaScript.
Сделай, пожалуйста, видео про свою gulp сборку с парой примеров, как добавлять/менять плагины в сборке.
Я не пользуюсь Gulp. Про Vite буду рассказывать в будущем видео.
Хорошее видео спасибо! Единственно, хотелось бы больше узнать ещё несколько моментов. Куда и как лучше вставлять текстовый вариант картинки в base64, как заглушку перед загрузкой.
И очень интересна тема svg, если их держать в html то можно через currentColor менять цвет картинки что очень удобно для иконок. Если загружать через img то они будут кешироваться но цвет уже поменять нельзя. Может есть техника чтобы и при img можно было svg контролировать?
1. Не понял про «текстовый вариант картинки». Заглушкой перед загрузкой картинки может быть просто background-color. При чем тут base64? Или идея тут в том, чтобы поместить заглушку в base64 в background-image?
2. Для смены цвета svg нужно вставлять элемент непосредственно в разметку. Если svg размещена через или background-image, то знаю только один способ повлиять на цвет - использовать CSS-свойство filter, но способ этот очень костыльный и нечитаемый, плюс не всегда получается добиться нужного оттенка.
@@AleksanderLamkov да картинка сжатая и перекодированная в base64 вставляется куда то в разметку чтобы показываться до основной картинки. Как именно это делается я просто не в курсе.
Насчёт svg да видно иконки для шрифтов придётся держать в штмл, они конечно не очень много весят, но всё же без кэша не очень.
Про заглушку в виде base64 не подскажу, к сожалению, сам не встречался с таким.
Я помню, что когда-то Skeleton-элементы через JS-библиотеку навешивали на те места интерфейса, которые ещё не подгрузились. Но там не конкретная картинка-подложка под каждое ещё-не-прогруженное-изображение, а какая-то анимируемая штукенция одинаковая для всех.
Там где ты рассказываешь про подгрузку разных размеров картинок для мобильной и десктопной версии, есть один небольшой минус, если у сайта имеется админка, то картинку администратору придется загружать в нескольких размерах для разных экранов, как мне показывает опыт работы, этим никто не будет заниматься, есть уникальный личности которые умудряются засовывать скрипты в поля для текста в админке, поэтому что-то мне подсказывает что администратору будет лень загружать картинки разной размерности) Если конечно есть способ получше, хотел бы знать, буду благодарен, не считая Next JS в котором можно просто использовать Image из next/image и просто указать размеры картинки в sizes через max-width и он сам подгонит картинки к нужным размерам)
Если речь про картинку разных размеров, но с одинаковыми пропорциями, то уверен, что есть тонна плагинов для CMS, которые могут помочь даже из небольшой картинки сделать умный апскейл до нужных ширин экранов.
Спасибо за урок по картинкам, но почему решили не рассказывать про "ленивую" загрузку изображений? Мне кажется это как раз по теме работы с картинками
О ней была информация в курсе HTML.
В picture можно выбирать же тоже с помощью дескрипторов ретину? Полная пропись picture выглядит я таким обращом ? :
1x для наглядности написал, да и вроде ничего такого если он даже и будет.
Таким образом я пишу соурсы для avif все медиа в таком формате с ретиной в srcset, все три перечисляю.
Далее webp для всез медиа так же
Далее могу ведь и jpg так же в сорусе прорисать длч ретина со всеми медиа
И в самом конце, перед закрываюшим picture написать уже простой img
Я верно понимаю ? Просто предположим , что я в галпе сделал таску , которая все во все конвертирует , штампует разные размеры, все это адаптирует под ретину , и пишет мне picture вместо img. Полностью прописаный picture так будет выглядеть ? 😊
Да, вроде бы все логично.
отличное видео, как раз не представлял как решить проблему, я добавил для картинок атрибут data-src с путем на другие картинки чтобы с js получить к ним путь и когда жмешь на картинку при открытии модального окна с картинкой, картинка с задержкой прогружалась, но в чем в первую очередь может быть проблема? сайт уже на хостинге, только проблему эту надо решить
Можно решить проблему через , либо начинать грузить полноразмерную картинку не при клике, а при наведении мыши на элемент, триггерящий открытие этой самой модалки.
@@AleksanderLamkov спасибо большое
По поводу image-set в css. Браузерная поддержка webp появилась раньше чем само свойство. По этому фолбек до jpg никогда не дойдет и картинка вообще не отобразится. Думаю нужно отдельным свойством задать ее выше без image-set.
Хм, спасибо за информацию!
Не понятно. Если браузер понимает webp, то до жпега и не должно дойти.
Да почему же не дойдёт? Браузер читает содержимое функции image-set слева направо сверху вниз.
background-image: image-set(
url('images/cat.avif') type('image/avif'),
url('images/cat.webp') type('image/webp'),
url('images/cat.jpg') type('image/jpeg')
);
Если браузер встречает поддерживаемый формат картинки, то её он и будет обрабатывать. В ином случае - попробует проанализировать следующее.
можете уточнить тему, или как вы настроили цвета для тегов html
Тема Oceanic Dark Theme для WebStorm
5:03 Дескриптор плотности пикселей и дескриптор размера это разное?
Да, это разные вещи. Плотность пикселей зависит от показателя экрана DPI. А размер - ну, это буквально размеры вьюпорта, типа ширина и высота доступного на экране пространства.
А как быть с небольшими изображениями по типу: аватарок, значков и прочего (не svg)? Их тоже по DPR прописывать рекомендуется?
Если нельзя перевести в вектор, то да, лучше учитывать плотность пикселей устройства.
как быть если картинка респонсив? Т.е если задать фикс. размер, то понятно, что место будет выделено, а вот если она гибкая и меняет размер при изменении экрана на каждый пиксель как делать, чтобы не было прыжков контента? Или вообще не стоит так делать и лучше делать картинки под каждый экран в свой размер и менять только окружающий контент?
Спасибо за видео!
Главное задать в атрибутах width и height максимально возможные для картинки размеры (то есть, вероятнее всего, размеры с десктопной версии макета).
И если пропорции картинки на адаптиве не меняются (а так оно и бывает в большинстве случаев), то браузер будет для изображения резервировать адекватное место пропорционально указанным в атрибутах width и height значениям, независимо от ширины экрана, на котором грузится страница.
А как же атрибут loading="lazy" у img и ?
Да, полезный атрибут, спасибо!
В курсе по HTML в уроке про изображения про «ленивую» загрузку рассказывал.
В этом же видео постарался сконцентрироваться на той информации, которой ещё не было в материалах моего канала 🙂
Ты говоришь что в реальном проекте ты бы использовал плагин для минификации всех картинок, не запишешь видео на эту тему? Какой плагин, как ставить, как использовать?
В видео про сборщик проектов упомяну эту информацию. Это после курса по JS будет, не раньше.
Это все корректно работает если пользователь открывает сайт с мобилки в вертикальной ориентации, но в процессе взаимодействия со страницей меняет ориентацию на горизонтальную (и наоборот)?
Проблем никаких не будет.
интересно, что может себе представить слепой пользователь, которому скинридер озвучит вот тот весь alt про кошку, если этот слепой в жизни не видел кошку, цвета окраса, даже что такое угол из-за которого она выглядывает?
Не думаю, что у такого пользователя будут проблемы с восприятием тех вещей, о которых он знает с малых лет. Да и фантазию ведь никто не отменял 😅
Но вопрос интересный 🙂
4:20 стыдно не знать что если напротив Export нажать плюсик, то автоматически добавится на экспорт файл в х2 формате. а если еще раз нажать то в х3. и файлы не надо под формат именовать
Мне совершенно не стыдно чего-либо не знать. Жить с таким настроем проще 🙃
Но спасибо за информацию!
У тебя есть кошка?)
Ага, подобрал в подъезде котенка около 10 лет назад 😅
В плейлисте HTML это видео либо продублировано, либо это лично у меня баг
Ты прав! Исправил :)
интересно с в какой части земли должен быть человек что бы иметь такой слабый инет
Не все живут в Москве как ты. Да и в Москве не везде идеально ловит интернет