Изображения в HTML: picture, srcset, sizes, lazy, форматы webp, avif 

🔗 Ссылки: 🎓 Мои курсы по разработке: purpleschool.ru 💬 Telegram канал с полезными советами: t.me/purple_code_channel

Всегда с удовольствием смотрю ваши видео! Детально, но при этом не занудно и легко объясняете! Здорово! Спасибо за ваш труд!

Супер! Спасибо за отличный материал. Дополню: 1. Ретина, мать ее, всегда имейте ее в виду. Особенно, если идете в крупные компании, которые дадут вам старый моник, а потом жалуются фигле у нас на телефонах и макбуках мутные картинки 2. Sizes вроде как раз сам умеет выбрать размер от ретины или нет. 3. В инспекторе есть возможность выбрать dpi под ретину и убить поддержку avif, webp чтоб тестить то что на видео 4. jpg все еще могет для фоток. webp/avif вам помогут избавиться от тяжелых png. Если еще и поиграться с качеством альфа-канала, то там вообще размеры бомба! Советую для теста фри утилиту pym. Jpg еще хорош для opengraph image, соцсети не очень к webp 5. Материал бы добавить по работе с svg и background image 🔥

Спасибо! Впервые слышу про lazy и avif формат. Нужно хотя бы раз в полгода смотреть за новинками в html/css

PurpleSchool - лучшая школа!

Спасибо, отличная подача. Не отходите от этой практики, 1. Объяснить что это и для чего 2. Показать на практическом примере и поэтапно.

Спасибо за ролик. Идея для следующих курсов/мастер-классов - полноценная работа с изображениями на севере: 1) как загружать 2) как оптимизировать: сжимать, ресайзить 3) ковертации 4) хранение 5) работа с такими изображениями внутри api Большая проблема в том, что бэкенд разработчики вообще не любят заморачиваться с изображениями пока на них не надавит бизнес. Я думаю, что это от незнания. Ну и в целом хотелось бы увидеть хороший и сложный пример в связке с нодой и какой-нибудь sql базой)

Большое спасибо за полезный контент и замечательные практические советы. С нетерпением жду видео про best practises при загрузке на беке с использование Nest, sharp, etc)

Спасибо, здорово, очень полезное для оптимизации. Я с Вами))

Антон, спасибо! Твоя школа - суреская! Всем советую! На ютубе ролики крутые, но друзья! Вы бы видели ролики которые в уроках! Таких тонкостей и так пополочкам расложить материал + еще и с презентацией и лайфкодингом! В общем, рекомендую всем! Антон, так держать! Здоровья тебе, сил и мотивации!

Классный, подробный урок, спасибо!

Огонь 🔥

Очень полезно для адаптива 👍

До сих пор жду курс по виму. Благодаря тебе я быстрее смог получить работу, поэтому в ближайшее время планирую все спираченные курсы купить. Если выйдет вим, то первым будет он :)

Надо больше подписчиков! Все максимально четко и без воды. Антон, скажите пожалуйста используете ли вы планшет при разработке/проектировании макета UI или, например для других задач связанных с визуализацией?

Добрый день! Контент супер, как всегда! Единственное, на инлайн стили media="(max-width:1920px )" валидатор выдает ошибки!!! Как то можно этого избежать!?

Спасибо за информацию. Подскажите, а если изображения приходят с сервера, можно как-то похимичить над ними? использую blurhash для отображения блюра пока не прогрузилась картинка.

Подскажите, а как быть если нужно эти изображения интегрировать с WordPress, или вы это не учитывали?

❤🎉❤😊

Спасибо очень хороший урок. А можно ли урок по форматам картинок?

13:50 - вместо тэга picture можно так же использовать атрибут sizes для подгрузки других изображений 21:30 - нативный lazy load отвратителен, во-первых, загрузка изображений будет происходит в зависимости от размеров устройства ( помимо этого важен PPI ), то есть, например, в видео изображение началось загружаться за 1-2 прокрутки экрана, но на телефоне этих же экранов может быть больше, но это не значит, что изображение будет загружаться позже. во-вторых, загрузка изображений напрямую зависит от скорости интернета юзера, в реальности очевидно, что скорость может падать ниже 4G, а в каких-то случаях даже ниже, при такой скорости браузер начнет подгружать как можно больше изображений и разработчик никак не сможет на это повлиять)), что максимально абсурдно ( представьте у себя в голове, что при слабом интернете на телефоне у пользователя начинают загружаться изображения в большем количестве, нежели при хорошем соединение ). я бы не рекомендовал использовать нативный атрибут lazy, ведь есть альтернативы и уже давно придуманы решения данной задачи

А разве первый вариант с srcset (и без picture) не закрывает большинство потребностей? В реальности пользователи не открывают браузер во весь экран, а затем уменьшая его до ширины окна мобильного устройства - такого нет. Собственно первый вариант позволяет подгружать разные изображения в зависимости от разрешения. Собственно вопрос - чем тег лучше . Я находил ряд статей, где с примерами, где делается одно и тоже с обоими тегами, но почему лучше там не указано.

О кайф, спасибо!

Видел, как в sizes записывают медиазапрос, типа sizes="(max-width: 1200px) 1300px". Так и не понял до конца как в этом случае работает связка sizes и srcset...

странно srcset в source IDE ругается.

Добавлю еще что sizes тоже принимает media

можете делать видос про свои настройки vs code

По данным caniuse формат avif поддерживает 85% браузеров, webp 95%

Контент хороший вот только надо поработать с голосом : ( Думаю хорошо воспринимаете критику)

Ясно. Ждем видео о том, как изменить цвет текста и добавить перенос строки

Информация Ок, звук фе

БЫСТРО РАЗГОВАРИВАЕТЕ ПО МЕДЛЕННЕЕ (пожалуйста)

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

Я так надеялся, что он откроет IE в конце, чтобы показать, что там грузиться будет jpg вместо webp...

короче, используйте next js и не пишите эту лапшу