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

Подписаться 40 тыс.

Просмотров 26 тыс.

50% 1

00:00 Интро
00:34 Вставка PNG
01:08 Оптимизация в JPEG
01:56 Ретиновый JPEG
02:53 Подключение WebP
04:23 Подключение AVIF
05:42 Картинка как фон
06:35 Основа карточки
09:31 Как делали раньше
10:15 Замена на image-set
11:08 Загрузка по типам
12:33 AVIF в Firefox
12:57 Градиент под текстом
13:43 Ссылка на карточке
14:43 Ресайз карточки
15:43 Аутлайн для ссылки
16:45 Выводы
17:04 Аутро
Нравится? Становитесь патронами / pepelsbey
Код github.com/pepelsbey/playgrou...
Демо с котом pepelsbey.github.io/playgroun...
Image-set на MDN developer.mozilla.org/en-US/d...
Aspect-ratio на MDN developer.mozilla.org/en-US/d...
Squoosh squoosh.app/
Справочник и конвертер в AVIF avif.io/
* * *
Камера: Blackmagic Pocket Cinema 4K
Объектив: Panasonic 12-35 мм, f/2,8
Микрофон: Audio-Technica BP40
Свет: Amaran 200d + Light Dome
Софт: DaVinci Resolve, iZotope RX

Опубликовано:

2 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 149

@FFizmaTT 2 года назад

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

@DolphinArtem 2 года назад

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

@Zagir08 2 года назад

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

@trewerguli1727 2 года назад

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

@serghiokomolov2339 2 года назад

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

@Anatoli-bq1pe 4 месяца назад

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

@maximkiselev1554 2 года назад

aspect ratio имба!

@demeja16 2 года назад

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

@yorik2872 2 года назад

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

@parango812 2 года назад

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

@VIMPdev 2 года назад

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

@demidovmaxim1008 2 года назад

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

@user-pl5ig1te3g 2 года назад

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

@tyortyo 2 года назад

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

@my_coolheart 2 года назад

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

@user-xd7vj5cf9f 2 года назад

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

@user-eq8wf1mq6z 2 года назад

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

@user-3773 2 года назад

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

@luksik0 2 года назад

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

@eldarda 2 года назад

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

@evgenyaliakseenko2228 2 года назад

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

@guestalex 2 года назад

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

@alinanur6676 2 года назад

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

@k-ivan 2 года назад

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

@HelgaOz 2 года назад

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

@mirislamus 2 года назад

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

@victor_bozhok 2 года назад

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

@vitalycooperman3387 2 года назад

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

@romanstein13 2 года назад

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

@andreyzhukov2821 2 года назад

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

@aquaciti 2 года назад

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

@andreigunderin 2 года назад

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

@EvgenichTalagaev 2 года назад

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

@endotub Год назад

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

@user-ue7ou9lk2s 2 года назад

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

@AleksovAnry 2 года назад

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

@yernut 2 года назад

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

@romannovak375 2 года назад

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

@katerinaelgina2376 2 года назад

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

@shittywizzard5727 2 года назад

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

@hopmnc 2 года назад

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

@SL0Tspb 2 года назад

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

@user-zh5kg2op4h 2 года назад

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

@pepelsbey 2 года назад

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

@user-et2me5vv4d 2 года назад

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

@user-rj6ro3mp1p 2 года назад

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

@evgenenterprises4933 2 года назад

Круто!

@sergreva7192 2 года назад

Супер!

@viktor_kost 2 года назад

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

@pepelsbey 2 года назад

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

@viktor_kost 2 года назад

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

@Gogsan 2 года назад

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

@zapiski_verstalshika 2 года назад

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

@Zagir08 2 года назад

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

@windomizer 2 года назад

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

@a.n.burdin 2 года назад

👍👍

@albertrain7093 2 года назад

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

@pepelsbey 2 года назад

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

@dudovichenko 2 года назад

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

@pepelsbey 2 года назад

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

@veadev 8 месяцев назад

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

@vladislav805 2 года назад

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

@pepelsbey 2 года назад

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

@VladimirMiroshnichenko64 2 года назад

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

@freeeon29 2 года назад

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

@pepelsbey 2 года назад

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

@shurinskiy 2 года назад

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

@russianstan 2 года назад

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

@pepelsbey 2 года назад

Может я сам? 😱

@nir0pilot 2 года назад

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

@pepelsbey 2 года назад

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

@nir0pilot 2 года назад

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

@pepelsbey 2 года назад

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

@denisdmitriev4670 Год назад

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

@pepelsbey Год назад

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

@TamaraNikolaevna Год назад

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

@pepelsbey Год назад

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

@TamaraNikolaevna Год назад

@@pepelsbey Спасибо

@ggg-tq9be 2 года назад

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

@pepelsbey 2 года назад

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

@user-cl9yc1tw2i 2 года назад

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

@pepelsbey 2 года назад

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

@user-cl9yc1tw2i 2 года назад

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

@artimovskiy 2 года назад

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

@pepelsbey 2 года назад

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

@TheBubaololo 2 года назад

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

@pepelsbey 2 года назад

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

@TheBubaololo 2 года назад

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

@clleoweb4083 Месяц назад

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

@pepelsbey Месяц назад

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

@user-bp5lj1fj1y 2 года назад

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

@pepelsbey 2 года назад

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

@omnomnom1323 2 года назад

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

@pepelsbey 2 года назад

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

@mrakcw 2 года назад

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

@pepelsbey 2 года назад

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

@dimovich85 2 года назад

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

@CzarOfScripts 2 года назад

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

@pepelsbey 2 года назад

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

@StonHenge 7 месяцев назад

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

@pepelsbey 7 месяцев назад

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

@Beyond-the-transcendent Год назад

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

@pepelsbey Год назад

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

@Beyond-the-transcendent Год назад

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

@antonmanin3521 2 года назад

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

@pepelsbey 2 года назад

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

@svet0v 2 года назад

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

@pepelsbey 2 года назад

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

@svet0v 2 года назад

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

@pepelsbey 2 года назад

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

@svet0v 2 года назад

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

@lvivduncan 2 года назад

6:50 picture -- class?

@ag_main 2 года назад

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

@EgorMoscowNeverSleep 2 года назад

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

@user-bi4vy7ut4w 2 года назад

авиф ауф

@AntonMorya 2 года назад

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

@oshurek-dev 2 года назад

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

@pepelsbey 2 года назад

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

@isvladxxe 2 года назад

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