TosterUserName

-есть мнение о том что фотография не должна быть не качественной и в то же время она не должна быть слишком весомой. Как с этим рабоать?

Я тег <picture>использую. В src кладу 600 пикселей шириной и пожатую, дальше в source по нарастающей для разных экранов 800px ширины если (min-width 768), 1200px (min-width 1024) и 1600px (min-width 1440). Если на картинке есть текст, то начиная с 1024 в png формате.

А вам с какой целью? Если просто чтобы под разные экраны нормально выглядело, то используйте тег <picture>. Я сам на блоггере делаю вот так картинки:

<picture>
 <source srcset="s1600" media="(min-width: 1024px)">
 <source srcset="s800" media="(min-width: 768px)">
 <img alt="Картинка" src="s600">
</picture>

Вот живой пример с решением Как оставлять в списке только выбранные варианты через чекбоксы?
Может это то, что вы искали.