Новый image-set как 🖼 тег picture в CSS: не только ретина, но и WebP и AVIF

[@Anatoli-bq1pe]

Благодарю! Хорошо что сейчас image-set уже отлично поддерживается браузерами)

[@FFizmaTT]

Круто. Увидел в видео несколько хаков, о которых даже и не догадывался. Спасибо, Вадим!

[@МарияФролова-ъ9ь]

Спасибо тебе, милый человек! За image-set и за вариацию ссылки на карточке. То что нужно вот прям сейчас)

[@DolphinArtem]

Не знаю кто вы, я подписался на каналы про программирование, прошел 50 уроков по Java от автора Alishev, тут появились вы... Скажу вам, вы очень приятная личность! Просто очень, очень приятный голос и фейс ))). Вадим, у вас будет свыше миллиона... Да вы и сами это знаете.

[@Zagir08]

Вот конечно ссылка на всю карточку меня немножко удивила 👍 Вроде все логично и понятно. А додуматься ох как сложно. Спасибо за новые знания 😄

[@trewerguli1727]

Не ссылка, а ховер на всю карточку

[@maximkiselev1554]

aspect ratio имба!

[@demeja16]

Столько хаков в одном видео) Спасибо Вадим!)

[@serghiokomolov2339]

Друг мой! Ты не даешь мне стареть!

[@VIMPdev]

Отлично как всегда! Жду про отношение сторон

[@demidovmaxim1008]

Большое спасибо за выпуск, aspect-ratio очень полезное открытие.

[@dudovichenko]

Подписался на Патреон в порыве сердечной благодарности. Вадим, делай и дальше свои великолепные видео, помимо знаний я получаю от них эстетическое удовольствие. Ты легендарный!

[@pepelsbey]

Велком! И спасибо, буду продолжать )

[@alinanur6676]

Люблю ваши видео, ну очень!

[@SL0Tspb]

Как раз сегодня делал карточку из нескольких дивов, и была необходимость сделать всю ее ссылкой. Обернул в тег а, все заработало, но ведь семантически не правильно... а тут пример. коротко и доступно. Спасибо!

[@levsonc]

На самом деле нет никакой проблемы обернуть всё в тег a. Спецификация HTML это вполне допускает. Только не забывайте, что внутри a не может быть других a или других интерактивных элементов: кнопок, полей и так далее. (Это может быть неудобно, когда, например, в блоке есть маленькая подсказка. Тогда надо как-то вместе совмещать.) Так что смотрите как вам удобнее.

[@pepelsbey]

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

[@Алексей-с3я8е]

Я добавляю ссылку и растягиваю ее абсолютом поверх всей карточки. В итоге ссылке нет лишних элементов + добавляю текст с классом visually-hidden, чтобы ссылка была доступной.

[@eldarda]

Помнится задавался вопросом, как сделать в css с картинками то же, что и в html. А вот теперь, наконец, я нашел ответ. Спасибо)

[@domestic-wildkat]

Выглядит круто! Спасибо большое за уроки, много интересного для себя почерпнул)

[@parango812]

Очень круто! Фишек 5 за одно видео. Пойду играться

[@tyortyo]

Хоть и быстро. Но приятно и понятно. Спасибо

[@andreyzhukov2821]

Добрый день! Как раз разбирался с картинками для Retina дисплеев Спасибо!

[@romanstein13]

Клёво-клёво, спасибо, Вадим👏 Очень жду видео про aspect ratio.

[@yorik2872]

Вадим, хотел вас попросить рассказать о адаптивной вёрстке с использованием vw и vh. За ранее спасибо!

[@luksik0]

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

[@k-ivan]

Вадим, это гениально )!

[@andreigunderin]

Круто! Спасибо! Респект и уважуха.

[@mirislamus]

Спасибо за видео, как всегда все круто и понятно

[@ЕвгенийУгланов-ш2л]

это шедеврально))))

[@endotub]

Спасибо за Ваши ролики, очень интересно и доступно!

[@yernut]

я всегда создавал отдельный variable для aspect ratio и задавал высоту и ширину через calc. Очень жду видео про aspect ratio теперь)

[@EvgenichTalagaev]

Спасибо вам большое за ваш труд! Вы делаете этот мир лучше)

[@guestalex]

Вадим, классно, как всегда!

[@aquaciti]

спасибо за видео, очень круто

[@НиколайАхметянов-ф4у]

лучший как всегда!

[@my_coolheart]

Спасибо за открытие скуша))

[@AleksovAnry]

Очень доступно. Приятно слушать. Всё по делу без лишнего мусора. Спасибо за контент!

[@hopmnc]

Спасибо, годно.

[@viktor_kost]

Я все ещё не могу понять - как на такой превосходный контент да подписано ~30к подписчиков? Желаю роста! Это заслужено! ✊

[@pepelsbey]

Подпишитесь, станет больше :)

[@viktor_kost]

@@pepelsbey обижаете) как только узнал - так сразу и подписался)

[@katerinaelgina2376]

Вау. Круто. Спасибо !

[@user-3773]

Спасибо, восхитительно!

[@sergreva7192]

Супер!

[@VladyslavArkhypov]

Спасибо за Вашу работу. Ценно!

[@evgenyaliakseenko2228]

Отличная подача материала 👍

[@zapiski_verstalshika]

Печально что только сейчас на работе разрешили флексы... А этого мне долго на практике не видать) разве что для себя что-то сверстать. Спасибо)))

[@Zagir08]

Привет. Как я понял вы работали на float???!! Зачем!?

[@windomizer]

@@Zagir08 Видимо, чтобы жизнь сладкой не казалась :D

[@Gogsan]

супер верстка, хочу быть таким же

[@КостянЕрмаков-е9ю]

Очень спасибо.😁

[@a.n.burdin]

👍👍

[@evgenenterprises4933]

Круто!

[@victor_bozhok]

Спасибо большое! Очень полезно и интересно :3

[@romannovak375]

Большое вам спасибо очень интересно

[@freeeon29]

Вот только aspect-ratio до сих пор не поддерживается в Safari, что сводит на нет его использование. На данный момент он есть там только в превью будущей версии. В случае сафари это означает, что пока человек не перейдет на новую версию Mac OS он будет сидеть на старой версии сафари, т.к. там нельзя обновить браузер отдельно от ОС.

[@pepelsbey]

Вы неправы, Safari всё-таки обновляется на предыдущих версиях macOS. Например, Safari 14 работает на 10.11-10.14, то есть совместим с macOS, вышедшей в 2018 году. Другое дело, что некоторые возможности, которые зависят от самой ОС, могут в браузере отстутствовать: кодеки, форматы шрифтов и графики.

[@lvivduncan]

6:50 picture -- class?

[@TheBubaololo]

11:03 не совсем понял, на юзеров лисы предлагается забить?

[@pepelsbey]

А вы посмотрите на демку в Firefox: там вполне WebP 2x pepelsbey.github.io/playground/63/

[@TheBubaololo]

@@pepelsbey Вадим, вы золотой человек

[@artimovskiy]

Мода на backgraund-image возвращается или c object-fit что-то не так?

[@pepelsbey]

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

[@albertrain7093]

Здравствуйте Вадим! Спасибо большое, что Вы есть ) Очень многому у Вас научился. Терзает меня один момент касательно способа с псевдо-элементом ссылки. Нуждаюсь в Вашем профессиональном мнении ))) Не ломает ли такой способ доступность для пользователей с мышкой. Ведь нельзя, при желании выделить и скопировать текст ссылки, придеться лезть в девтулзы для этого. Спасибо заранее!

[@pepelsbey]

Если у вас задача сделать всю карточку кликабельной, то у вас нет выбора - текст будет выделить сложно. Только если пользователь не знает, что можно зажать альт и начать выделение с ним - тогда получится.

[@ggg-tq9be]

Проверил в опере, хроме, лисе и осле, везде отображается кроме ie. Нужно ещё добавить обычный фолбэк background-image: url(...). Вы забыли про это или это массовый протест против ослов?)

[@pepelsbey]

Да, вы правы, для лучшей совместимости можно добавить ещё и фолбэк для IE

[@nir0pilot]

Этот хак иногда глючит. Height:auto не отрабатывает и картинки искажаются. Я потупил денёк, и пришёл к выводу: можно убрать width, height, css к картинке и добавить одно css свойство aspect-ratio

[@pepelsbey]

Ну это не хак, это обычный CSS. Не стоит отказываться от атрибутов width и height, они очень полезны при загрузке - браузер сразу знает, сколько отдать места для картинок, знает их соотношение сторон. Ну и «иногда глючит» звучит как магия, лучше бы разобраться и понять. Может есть демка?

[@nir0pilot]

@@pepelsbey демки нет, но там использовался js-плагин slick, который, возможно, как-то влиял, и турболинки из rails. при некоторых прогрузках страниц фото решительно деформировались, но не всегда - как фишка ляжет. С вычисленным aspect-ratio pagespeed перестает ругаться на отсуствие width/height, чего я и добивался.

[@pepelsbey]

Жаль, что вы не разобрались, в чём проблема. Добавлять aspect-ratio в стилях - слишком «далеко», браузеру это нужно понимать в разметке.

[@Stanislav-p7y]

Спасибо за видео! Почему при background-image: -webkit-image-set( url(../../../assets/images/[e-mail]) 1x, url(../../../assets/images/[e-mail]) 1x) хром подгружает ( смотрю в "Network") [e-mail] , почему не [e-mail] ?

[@pepelsbey]

Посмотрите внимательнее на синтаксис с MIME-типом и браузерную поддержку, я об этом рассказываю в видео.

[@CzarOfScripts]

Можете объяснить про "двухкратный экран"? Что это значит?

[@pepelsbey]

Это когда на один логический пиксель приходится четыре физических. Они же ретиновые экраны или HiDPI

[@clleoweb4083]

А что же делать с lazy load? Как к этой красоте прикрутить отложенную загрузку изображений? При чем нужен правильный lazy, при котором в src будет не пустота а реальное изображение?

[@pepelsbey]

Ценности в отложенной загрузки изображений особенно нет - они и так не блокируют рендеринг, в отличие от контентных. Ну разве что если вам нужно показать какой-то плейсхолдер вместо тяжёлой картинки. Но думаю это вполне можно сделать множественными фонами.

[@shurinskiy]

Авиф - выкатывает со дворов 😉

[@veadev]

Top, Right, Left, Bottom можно заменить одним свойством inset:0;👍

[@omnomnom1323]

А в какой программе переводят здесь картинку из png в jpeg?

[@pepelsbey]

Это Squoosh squoosh.app/, все ссылки всегда есть в описании

[@StonHenge]

Как вставить image-set в место где использованы множественные фоны? Т.е. у меня две картинки которые нужно прописать в image-set. Не получается. Или это невозможно?

[@pepelsbey]

Функция image-set() - это, по сути, замена url(), то есть если вы можете прописать несколько картинок в свойстве background-image через запятую с помощью url(), то аналогично можно и с image-set().

[@russianstan]

Очень круто! Но кто поставил дизлайк?

[@pepelsbey]

Может я сам? 😱

[@svet0v]

А что делать с тем, чтобы w3c валидатор не ругался на это свойство?

[@pepelsbey]

Не использовать CSS-валидатор W3C, он оторван от реальности

[@svet0v]

@@pepelsbey а как тогда проверять валидна ли верстка?

[@pepelsbey]

HTML-валидатор вполне имеет смысл, валидность стилей лучше проверять линтерами, вроде Stylelint

[@svet0v]

@@pepelsbey а есть какое-то подтверждение того, что на валидность стилей в валидаторе w3c не имеет смысл обращать внимания, чтобы я со спокойной совестью мог image-set пользоваться?

[@СергейСульженко-ф9я]

Класс, в can i use показано 96% у данного свойства, так его можно или нет использовать?

[@pepelsbey]

Конечно! Только с типом пока не получится

[@СергейСульженко-ф9я]

@@pepelsbey Вадим, а объясните пожалуйста, где брать все эти картинки? Допустим есть картинка, где мне взять эту же картинку в двукратном разрешении? Вопрос может быть элементарный, но я не знаю(

[@denisdmitriev4670]

Вау, открыл для себя много нового, обидно, что всё еще нет никакого прогресса в поддержке image-set

[@pepelsbey]

Кажется полная поддержка (как в Firefox) будет в следующей версии Chrome (скоро) и в следующей версии Safari (никто не знает когда, но думаю скоро) caniuse.com/css-image-set

[@TamaraNikolaevna]

Вадим, имеет значение расширение картинки jpg или jpeg? У меня в Sqoosh при оптимизации получается расширение только jpg. Большое спасибо за работу.

[@pepelsbey]

Расширение .jpg совместимо со старыми ОС, есть даже расширение .htm для таких случаев. Но это очень, очень старые ОС, вроде MS-DOS. Так что никакой практической разницы сегодня нет.

[@TamaraNikolaevna]

@@pepelsbey Спасибо

[@ag_main]

Squoosh все же передавливает фото и качество падает да прописать 2х под респонс

[@Beyond-the-transcendent]

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

[@pepelsbey]

Браузеры выбирают подходящие картинки из source и ставят их в img, так что должно сработать. Попробуйте то же самое, но со ссылкой на CodePen с демкой, чтобы можно было понять, в чём ваша проблема.

[@Beyond-the-transcendent]

@@pepelsbey ладно, сяб, значит просто баг синтаксиса.

[@vladislav805]

"..., кроме Firefox, которым никто не пользуется ..." ачёвсмысле? Я вот только его и использую. Или... я - никто?))

[@pepelsbey]

Я тоже! Нас двое )

[@VladimirMiroshnichenko64]

я в таких случаях говорю так "Есть статистика, а есть погрешность. Так вот вы даже не погрешность" :)

[@antonmanin3521]

Вы играли когда-нибудь в майнкрафт?

[@pepelsbey]

Нет, я плохо понимаю зачем люди играют в компьютерные игры, ведь можно поверстать )

[@mrakcw]

Перезалил видео? Лайк мой куда дел?))) 😂😂😂 Вадим, есть предложение для следующего ролика))) предложения принимаешь? )) 🧙‍♂️🚀🐱‍👤🏍😁🐱‍🏍

[@pepelsbey]

Перезалил, там ошибка была ( Заявки не принимаю, а идеи выслушаю ;)

[@dimovich85]

Хотел тоже самое написать) я тоже днем хотел видос глянуть, но что-то не давал ютуб

[@ProJavaScript]

По поводу "никто не пользуется Firefox": я уже год как использую его как основной браузер, потому что в Chrome у меня лагает KZbin видео качеством выше 720 (внезапно), хотя у меня 1660 super с аппаратной поддержкой всех необходимых кодеков. А в Firefox ничего не нагает, даже 4К. Возможно,проблема в Хроме в том, что у меня включена скорость воспроизведения 2x по-умолчанию, но в FF всё на этой скорости всё прекрасно работает. P.S. Если FF постигнет судьба Opera и Edge, это будет катастрофа :(

[@ИванИванов-ч8з8ы]

авиф ауф

[@AntonMorya]

Кто дизлайк поставил? Кто этот дивергент))

[@oshurek-dev]

зачем нам нужно свойство, которое нигде не работает кроме firefox? и тут я, кто смотрит это видео с firefox....

[@pepelsbey]

И тут я, который залил это видео в Firefox. Может быть нас всё-таки много? )

[@isvladxxe]

Firefox единственный кто нормально выводит звук с ютуба на системы 7.1 звука в Linux ( в win вроде костылем можно везде сделать) хром задействует только 2 передних канала ((

[@HelgaOz]

как всегда, очень понятно и доходчиво! всегда жду Ваши видео! спасибо!

[@shittywizzard5727]

Великолепно, спасибо!

[@vitalycooperman3387]

Просто отличное видео. Спасибо.