Стоит ли использовать конструкцию picture в современной верстке?

Question

[Corvo Attano]

Дело в том что я думал что picture это крутая штука. Я думал что с помощью нее можно загружать пользователю
изображения размер которого оптимален для его экрана, что ускоряет загрузку фото. Вначале уходило много времени чтоб уменьшать размер изображения . Потом я нашел сервис который это делает за меня. В итоге я дошел до того что изображения в мой верстке исходная ширина которого составляет 2560px я уменьшаю с интервалом 20kb до разрешения 320px в ширину. И у меня получается около 35 изображений вес которых отличает от предыдущего на 20kb с одной стороны это хорошо как я думал, но так ли это на самом деле?
Но такой способ тоже не увеличивал скорость мне приходилось эти 35 фото пережимать дабы еще уменьшить вес, а после еще и массово переименовывать так как сервисы добавляют к имени свои суффиксы и приставки. Вопрос в том стоит ли так заморачиваться и стоит ли вообще в современной верстке использовать конструкцию picture.
Пример такой конструкции из моей верстки:

<picture>
   <source srcset='img/free/ibg-320.jpg' type='image/jpeg' media='(max-width:320px)'>
   <source srcset='img/free/ibg-510.jpg' type='image/jpeg' media='(max-width:510px)'>
   <source srcset='img/free/ibg-660.jpg' type='image/jpeg' media='(max-width:660px)'>
   <source srcset='img/free/ibg-788.jpg' type='image/jpeg' media='(max-width:788px)'>
   <source srcset='img/free/ibg-916.jpg' type='image/jpeg' media='(max-width:916px)'>
   <source srcset='img/free/ibg-1019.jpg' type='image/jpeg' media='(max-width:1019px)'>
   <source srcset='img/free/ibg-1117.jpg' type='image/jpeg' media='(max-width:1117px)'>
   <source srcset='img/free/ibg-1198.jpg' type='image/jpeg' media='(max-width:1198px)'>
   <source srcset='img/free/ibg-1277.jpg' type='image/jpeg' media='(max-width:1277px)'>
   <source srcset='img/free/ibg-1361.jpg' type='image/jpeg' media='(max-width:1361px)'>
   <source srcset='img/free/ibg-1431.jpg' type='image/jpeg' media='(max-width:1431px)'>
   <source srcset='img/free/ibg-1496.jpg' type='image/jpeg' media='(max-width:1496px)'>
   <source srcset='img/free/ibg-1564.jpg' type='image/jpeg' media='(max-width:1564px)'>
   <source srcset='img/free/ibg-1627.jpg' type='image/jpeg' media='(max-width:1627px)'>
   <source srcset='img/free/ibg-1687.jpg' type='image/jpeg' media='(max-width:1687px)'>
   <source srcset='img/free/ibg-1746.jpg' type='image/jpeg' media='(max-width:1746px)'>
   <source srcset='img/free/ibg-1803.jpg' type='image/jpeg' media='(max-width:1803px)'>
   <source srcset='img/free/ibg-1858.jpg' type='image/jpeg' media='(max-width:1858px)'>
   <source srcset='img/free/ibg-1912.jpg' type='image/jpeg' media='(max-width:1912px)'>
   <source srcset='img/free/ibg-1965.jpg' type='image/jpeg' media='(max-width:1965px)'>
   <source srcset='img/free/ibg-2016.jpg' type='image/jpeg' media='(max-width:2016px)'>
   <source srcset='img/free/ibg-2062.jpg' type='image/jpeg' media='(max-width:2062px)'>
   <source srcset='img/free/ibg-2111.jpg' type='image/jpeg' media='(max-width:2111px)'>
   <source srcset='img/free/ibg-2159.jpg' type='image/jpeg' media='(max-width:2159px)'>
   <source srcset='img/free/ibg-2205.jpg' type='image/jpeg' media='(max-width:2205px)'>
   <source srcset='img/free/ibg-2250.jpg' type='image/jpeg' media='(max-width:2250px)'>
   <source srcset='img/free/ibg-2297.jpg' type='image/jpeg' media='(max-width:2297px)'>
   <source srcset='img/free/ibg-2346.jpg' type='image/jpeg' media='(max-width:2346px)'>
   <source srcset='img/free/ibg-2389.jpg' type='image/jpeg' media='(max-width:2389px)'>
   <source srcset='img/free/ibg-2429.jpg' type='image/jpeg' media='(max-width:2429px)'>
   <source srcset='img/free/ibg-2473.jpg' type='image/jpeg' media='(max-width:2473px)'>
   <source srcset='img/free/ibg-2515.jpg' type='image/jpeg' media='(max-width:2515px)'>
   <source srcset='img/free/ibg-2533.jpg' type='image/jpeg' media='(max-width:2533px)'>
   <source srcset='img/free/ibg-2560.jpg' type='image/jpeg' media='(max-width:2560px)'>
   <img src='img/free/ibg-2560.jpg' alt='' />
</picture>

Как видите она очень массивная, недавно я делал слайдер где на заднем фоне были разные фото, и приходилось для каждого фото прописывать это(слайдов было 13).
В таких фото разрешения 2560px и я не хочу уменьшать их стоковый размер потому что я считаю что за большими разрешениями стоит будущие, поэтому я стараюсь поддерживать свою верстку до 4K экранов.
Также не использую node.js потому что у меня Windows 7 и на нее не получается накатить новую версию, потом я почитал инфу об этом, оказывается она не поддерживает новую версию node.js
Повтор конечного вопроса: Стоит ли так заморачиваться и стоит ли вообще в современной верстке использовать конструкцию picture или же использовать конструкцию с меньшим интервалом размера изображений?

Comments

[mahmudchon]

На самом деле, тут уже вам решать. Этот элемент дает возможности. Как их применять - зависит от конкретного случая. В том числе случая, когда вам некогда так заморачиваться, или же наоборот времени вагон для такого.
Могу сказать только то, что за 10 лет работы он мне пока не пригодился и я очень надеюсь, что так оно и останется)

Answer 1

[SagePtr]

Проще делать так: целая, половинная, четвертинная, и т.д. (до 320 пикселей, к примеру, более мелкие уже не делать). И цифры получатся красивые, и интерполяция более ровная (засчёт степеней двойки), и изображений получится не так много.
Другой вариант - отобрать самые популярные разрешения экрана и под них подгонять размеры (при условии, что слайдер на полную ширину окна и составляет 100vw) - тогда у большинства пользователей изображение не будет растягиваться, а будет выбираться соответствующее текущему разрешению экрана (но тут вертикальная полоса прокрутки может испортить весь перфекционизм).