HTML: srcset зачем нужен?

Посмотрим зачем нужно свойство srcset и как оно поможет в оптимизации изображений.
🍪 Курс по HTML и CSS: purpleschool.ru

[@PurpleSchool]

Посмотрим зачем нужно свойство srcset и как оно поможет в оптимизации изображений. 🍪 Курс по HTML и CSS: purpleschool.ru

[@chorny33]

Хм, впервые вижу такое. Подожду видео

[@PurpleSchool]

👍

[@keksinjo]

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

[@PurpleSchool]

Да, это только часть

[@hollow.one.w]

Вопрос, почему эсэрце, но сорссет?

[@mr_adw]

Если я не ошибаюсь как раз в Next.js они этот атрибут используют и это очень здорово оптимизирует загрузку.

[@PurpleSchool]

Да, верно

[@bbnowhat]

Буквально только что увидел этот атрибут и пришло уведомление

[@PurpleSchool]

👍

[@unknown-im8kj]

теперь как мы видим загрузилась.. не видим, все за оверлеем

[@PurpleSchool]

Жаль

[@vanyayakovlev3051]

Не для тех, кто выводит картинку через div

[@cdeblog]

Альт тоже хорошо бы с головой использовать, а не всегда, да ещё и с бессмысленным текстом 😊

[@PurpleSchool]

Конечно

[@spirinegor832]

А как некст это сам делает? При чем загружать картинки разных качеств не надо. Автоматом сам конвертит ?

[@PurpleSchool]

Да, сам конвертирует

[@ИванПомидоров-н3н]

Для начала нужно собрать весь зоопарк этих картинок с различным разрешением.

[@PurpleSchool]

Да, можно легко сгенерить через CLI

[@daniil2704]

Ех, на сайте и так 100500 картинок, езе прижется их множить на 3 😵 :)

[@Shakhrom-b7d]

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

[@PurpleSchool]

Так как грузится будет только оптимальная для текущего разрешения.

[@daniil2704]

@@PurpleSchool та я не про это, а про то что нужно картинки в разном разрешении на сервере валятся будут

[@PurpleSchool]

Да, это так

[@via754]

Нужно все картинки сайта дублировать в четырех разных разрешениях? Этот Геморой того стоит?

[@PurpleSchool]

Не все, а тяжелые и большие, которые можно оптимизировать для мобильных устройств.

[@via754]

@@PurpleSchool нужно ли это делать на этапе верстки? Ведь зачастую в макетах текст рыба и картинки тоже не те, что пойдут в продакшн

[@PurpleSchool]

Нужно делать на верстке, чтобы картинки там были финальные

[@vladimirpospelov2702]

@@PurpleSchool как понять финальные. По сути все прицепится к какой то админке и будет динамично вставляться. Смысла что то сжимать тем же галп нет. Пытаться что то там тестировать тем же Гуглом на скорость опять же нет. Это все должно решаться на сервере автоматом. Разная генерация, разное качество, разные пропорции и тд. Все это баловство ради цифр в верстке ерунда.

[@user-hruser]

Если на сервере нет этих картинок, хоть усрись, будешь грузить то что есть

[@PurpleSchool]

Так твоя же задача обеспечить там их наличие.

[@user-hruser]

@@PurpleSchool как моя задача может обеспечить?))) я что аналитик? Один размер на сервер и все