Как вы верстаете img под смартфоны?

Всем привет.
Возник вопрос о верстке картинок в img под смартфоны, а именно как Вы это делаете? С одной стороны в туториалах все пишут, мол на мобилках отдавайте маленькую картинку чтоб грузилось быстрее примерно так:

<picture>
  <source media="(max-width: 799px)" srcset="small.jpg">
  <source media="(min-width: 800px)" srcset="big.jpg">
  <img src="big.jpg" alt="picAlt">
</picture>

НО у практически всех мабилок CCS-RATIO более 1, https://www.mydevice.io/ там внизу список 99% моделей от 1.5 и до 4, т.е. под эти устройства я должен/могу давать картинки по формуле: размер картинки в пикселях * на коэффицент pixel
ratio.
Возникает несколько проблем:
Во-первых, если мы берем картинку которая на макете 300 пикс и верстаем под мобильник с 4x css-ratio то нам необходима картинка 1200 пикс, а не каждый дизайнер готов такую дать...
Во-вторых а как же скорость загрузки контента на этой мобилке. Если пользователь на не быстром мобильном интернете а ему всеравно качать картинку 1200 пикс, а то и более то а какой высокой производительности может идти речь.

p.s. использовать svg не вариант, есть только jpg и png

Вообщем как вы справляетесь с этим, может вы забиваете на все эти css-ratio и отдаете картинки 1 в 1? Может я что-то не понимаю в этом css-ratio?