HTML Продвинутая работа с изображениями • srcset, picture, WebP и AVIF, preload, figure и figcaption

[@AleksanderLamkov]

📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

[@darlindtryhgbvgft]

Вы - лучший человек!!!!!!! СПАСИБО ЗА ВАШИ ВИДЕО!!!! просто находка! :)

[@z.dimitrov8046]

Спасибо тебе за твои старания 👍, надеюсь что в связи с ситуацией не забросишь записывать ролики , качественный контент ,очень ценно🙂

[@sekval3336]

Спасибо за ролик! Только начал учить WEB , не давно как раз сталкивался с проблемой отображения картинки на разных экранах))

[@OnlyProg-dm9gc]

Вау! Спасибо за урок и ценную информацию. Только у Вас видел такой подробный гайд по изображениям! Передоз котами обеспечен))

[@Anatoli-bq1pe]

Благодарю за очень полезное видео!

[@Tehnokrott]

Александр Красава!

[@akylbekbaizakov]

Спасибо за урок, сэнсэй! 🙌

[@anend5226]

Спасибо! Было интересно 🌹

[@Jdkdkkx78]

Спасибо большое за это видео ❤

[@mit7871]

Про image-set не слышал, спасибо 👍

[@reactnative049]

За котиков отдельный лайк!!!

[@OnlyProg-dm9gc]

Кто заметил, что автор даже меняет содержимое тега title от таймкода к таймкоду?) ❤

[@AlexanderShamarin]

спасибо.

[@Kotovar]

Спасибо) Интересно было бы послушать, какие варианты есть для минификации изображений через сборщики, как настроить такую автоматическую минификацию. Например в Vite

[@petersen1554]

gulp тебе в помощь

[@Kotovar]

@@petersen1554 Спасибо, но он же не для всех проектов.

[@mouri_san]

круто, спасибо, как всегда шикарно!

[@alman_harbi]

Спасибо!

[@--Sirius]

Лайк на префаере ) интересная тема

[@Andrew-i5r]

Отличное видео 👍 Ранее ты писал, что рассмотришь возможность сделать видео про реализацию темной темы на сайте. Мы когда-нибудь увидим это видео? Хотелось бы посмотреть на твою реализацию 🙂

[@AleksanderLamkov]

Да, я не забыл, будет про это видео, но точно после окончания курса по JS.

[@ЭйсВентура-б8д]

Полезное видео Саша. Правительство закручивает гайки, дублируй видео и на рутубе обязательно. Если можно, сделать ролик о мотивации, ее иногда так не хватает...

[@tylervolchek1578]

Очень жду нового много часового видео по верстке, предыдущие 2 верстки были просто кладезью информации. Планируются ли они вообще?

[@AleksanderLamkov]

Да, после курса по JS.

[@smotritelyoutube]

Очень круто, как всегда, лайк!!! Вы тут заговорили о сборщиках, не планируется ли в будущем какое-то видео о сборщиках? Вроде Vite сейчас на хайпе

[@AleksanderLamkov]

Да, будет, после курса по JS и мастер-класса.

[@andreiley7951]

Сделай, пожалуйста, видео про свою gulp сборку с парой примеров, как добавлять/менять плагины в сборке.

[@AleksanderLamkov]

Я не пользуюсь Gulp. Про Vite буду рассказывать в будущем видео.

[@kacetal]

Хорошее видео спасибо! Единственно, хотелось бы больше узнать ещё несколько моментов. Куда и как лучше вставлять текстовый вариант картинки в base64, как заглушку перед загрузкой. И очень интересна тема svg, если их держать в html то можно через currentColor менять цвет картинки что очень удобно для иконок. Если загружать через img то они будут кешироваться но цвет уже поменять нельзя. Может есть техника чтобы и при img можно было svg контролировать?

[@AleksanderLamkov]

1. Не понял про «текстовый вариант картинки». Заглушкой перед загрузкой картинки может быть просто background-color. При чем тут base64? Или идея тут в том, чтобы поместить заглушку в base64 в background-image? 2. Для смены цвета svg нужно вставлять элемент непосредственно в разметку. Если svg размещена через или background-image, то знаю только один способ повлиять на цвет - использовать CSS-свойство filter, но способ этот очень костыльный и нечитаемый, плюс не всегда получается добиться нужного оттенка.

[@kacetal]

@@AleksanderLamkov да картинка сжатая и перекодированная в base64 вставляется куда то в разметку чтобы показываться до основной картинки. Как именно это делается я просто не в курсе. Насчёт svg да видно иконки для шрифтов придётся держать в штмл, они конечно не очень много весят, но всё же без кэша не очень.

[@AleksanderLamkov]

Про заглушку в виде base64 не подскажу, к сожалению, сам не встречался с таким. Я помню, что когда-то Skeleton-элементы через JS-библиотеку навешивали на те места интерфейса, которые ещё не подгрузились. Но там не конкретная картинка-подложка под каждое ещё-не-прогруженное-изображение, а какая-то анимируемая штукенция одинаковая для всех.

[@kickdoe6793]

Там где ты рассказываешь про подгрузку разных размеров картинок для мобильной и десктопной версии, есть один небольшой минус, если у сайта имеется админка, то картинку администратору придется загружать в нескольких размерах для разных экранов, как мне показывает опыт работы, этим никто не будет заниматься, есть уникальный личности которые умудряются засовывать скрипты в поля для текста в админке, поэтому что-то мне подсказывает что администратору будет лень загружать картинки разной размерности) Если конечно есть способ получше, хотел бы знать, буду благодарен, не считая Next JS в котором можно просто использовать Image из next/image и просто указать размеры картинки в sizes через max-width и он сам подгонит картинки к нужным размерам)

[@AleksanderLamkov]

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

[@eldiablo2037]

Спасибо за информативное видео, но остался вопрос. Когда браузер выбирает изображение на основе медиазапросов в , он использует как окончательный элемент для отображения изображения? Поэтому все стили, примененные к классу в , будут применяться к выбранному браузером изображению, независимо от того, какое изображение было указано в ?

[@AleksanderLamkov]

Да, всё верно.

[@russianpivko9872]

Спасибо за урок по картинкам, но почему решили не рассказывать про "ленивую" загрузку изображений? Мне кажется это как раз по теме работы с картинками

[@AleksanderLamkov]

О ней была информация в курсе HTML.

[@AlexanderPuhckov]

Добрый день.А вы не могли бы подсказать списком последовательность ваших курсов и видео что за чем стоит учить. Возможно с вашими дополнениями !))

[@AleksanderLamkov]

Можно идти по всем роликам канала, начиная с первого. Пропустить можно разве что мини-курс по цифровой доступности, видео про фишки DevTools и видео про будущие фишки CSS (их всех 3 штуки, везде упоминаю про «свежесть» рассказываемых функций). Весь остальной же контент идёт в порядке возрастания сложности. Начинай с курсов HTML и CSS, затем проходи первый мастер-класс по верстке, затем изучай следующие ролики про БЭМ и препроцессор стилей Sass, смотри следующий мастер-класс для продвинутых, а затем уже переходи на курс по JavaScript.

[@--Sirius]

В picture можно выбирать же тоже с помощью дескрипторов ретину? Полная пропись picture выглядит я таким обращом ? : 1x для наглядности написал, да и вроде ничего такого если он даже и будет. Таким образом я пишу соурсы для avif все медиа в таком формате с ретиной в srcset, все три перечисляю. Далее webp для всез медиа так же Далее могу ведь и jpg так же в сорусе прорисать длч ретина со всеми медиа И в самом конце, перед закрываюшим picture написать уже простой img Я верно понимаю ? Просто предположим , что я в галпе сделал таску , которая все во все конвертирует , штампует разные размеры, все это адаптирует под ретину , и пишет мне picture вместо img. Полностью прописаный picture так будет выглядеть ? 😊

[@AleksanderLamkov]

Да, вроде бы все логично.

[@UnRealbl4]

По поводу image-set в css. Браузерная поддержка webp появилась раньше чем само свойство. По этому фолбек до jpg никогда не дойдет и картинка вообще не отобразится. Думаю нужно отдельным свойством задать ее выше без image-set.

[@AleksanderLamkov]

Хм, спасибо за информацию!

[@leem0ne]

Не понятно. Если браузер понимает webp, то до жпега и не должно дойти.

[@AleksanderLamkov]

Да почему же не дойдёт? Браузер читает содержимое функции 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') ); Если браузер встречает поддерживаемый формат картинки, то её он и будет обрабатывать. В ином случае - попробует проанализировать следующее.

[@БеспрозванныйКирилл]

отличное видео, как раз не представлял как решить проблему, я добавил для картинок атрибут data-src с путем на другие картинки чтобы с js получить к ним путь и когда жмешь на картинку при открытии модального окна с картинкой, картинка с задержкой прогружалась, но в чем в первую очередь может быть проблема? сайт уже на хостинге, только проблему эту надо решить

[@AleksanderLamkov]

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

[@БеспрозванныйКирилл]

@@AleksanderLamkov спасибо большое

[@hyperpocket.]

5:03 Дескриптор плотности пикселей и дескриптор размера это разное?

[@AleksanderLamkov]

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

[@СветланаГруздева-л7ю]

Александр, а использовать в слайдерах типа owl carousel нельзя? Не работает - я пробовала.

[@AleksanderLamkov]

Можно, ограничений таких быть не может. Скорее всего как-то не так используете связку из picture + source + img.

[@АлексейЛ-ж3м]

можете уточнить тему, или как вы настроили цвета для тегов html

[@AleksanderLamkov]

Тема Oceanic Dark Theme для WebStorm

[@andreiley7951]

А как быть с небольшими изображениями по типу: аватарок, значков и прочего (не svg)? Их тоже по DPR прописывать рекомендуется?

[@AleksanderLamkov]

Если нельзя перевести в вектор, то да, лучше учитывать плотность пикселей устройства.

[@petersen1554]

интересно, что может себе представить слепой пользователь, которому скинридер озвучит вот тот весь alt про кошку, если этот слепой в жизни не видел кошку, цвета окраса, даже что такое угол из-за которого она выглядывает?

[@AleksanderLamkov]

Не думаю, что у такого пользователя будут проблемы с восприятием тех вещей, о которых он знает с малых лет. Да и фантазию ведь никто не отменял 😅 Но вопрос интересный 🙂

[@uzver3787]

как быть если картинка респонсив? Т.е если задать фикс. размер, то понятно, что место будет выделено, а вот если она гибкая и меняет размер при изменении экрана на каждый пиксель как делать, чтобы не было прыжков контента? Или вообще не стоит так делать и лучше делать картинки под каждый экран в свой размер и менять только окружающий контент? Спасибо за видео!

[@AleksanderLamkov]

Главное задать в атрибутах width и height максимально возможные для картинки размеры (то есть, вероятнее всего, размеры с десктопной версии макета). И если пропорции картинки на адаптиве не меняются (а так оно и бывает в большинстве случаев), то браузер будет для изображения резервировать адекватное место пропорционально указанным в атрибутах width и height значениям, независимо от ширины экрана, на котором грузится страница.

[@chikurov]

Это все корректно работает если пользователь открывает сайт с мобилки в вертикальной ориентации, но в процессе взаимодействия со страницей меняет ориентацию на горизонтальную (и наоборот)?

[@AleksanderLamkov]

Проблем никаких не будет.

[@kickdoe6793]

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

[@AleksanderLamkov]

В видео про сборщик проектов упомяну эту информацию. Это после курса по JS будет, не раньше.

[@secondname_lastmane]

4:20 стыдно не знать что если напротив Export нажать плюсик, то автоматически добавится на экспорт файл в х2 формате. а если еще раз нажать то в х3. и файлы не надо под формат именовать

[@AleksanderLamkov]

Мне совершенно не стыдно чего-либо не знать. Жить с таким настроем проще 🙃 Но спасибо за информацию!

[@ant2783able]

А как же атрибут loading="lazy" у img и ?

[@AleksanderLamkov]

Да, полезный атрибут, спасибо! В курсе по HTML в уроке про изображения про «ленивую» загрузку рассказывал. В этом же видео постарался сконцентрироваться на той информации, которой ещё не было в материалах моего канала 🙂

[@hyperpocket.]

У тебя есть кошка?)

[@AleksanderLamkov]

Ага, подобрал в подъезде котенка около 10 лет назад 😅

[@hyperpocket.]

В плейлисте HTML это видео либо продублировано, либо это лично у меня баг

[@AleksanderLamkov]

Ты прав! Исправил :)

[@KlausM-b5l]

интересно с в какой части земли должен быть человек что бы иметь такой слабый инет

[@hazz_87]

Не все живут в Москве как ты. Да и в Москве не везде идеально ловит интернет