@MrCorvo
Молодой и целеустремленный но это не точно

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

Дело в том что я думал что 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 или же использовать конструкцию с меньшим интервалом размера изображений?
  • Вопрос задан
  • 112 просмотров
Пригласить эксперта
Ответы на вопрос 1
SagePtr
@SagePtr
Еда - это святое
Проще делать так: целая, половинная, четвертинная, и т.д. (до 320 пикселей, к примеру, более мелкие уже не делать). И цифры получатся красивые, и интерполяция более ровная (засчёт степеней двойки), и изображений получится не так много.
Другой вариант - отобрать самые популярные разрешения экрана и под них подгонять размеры (при условии, что слайдер на полную ширину окна и составляет 100vw) - тогда у большинства пользователей изображение не будет растягиваться, а будет выбираться соответствующее текущему разрешению экрана (но тут вертикальная полоса прокрутки может испортить весь перфекционизм).
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы