И вообще может уже что-то появилось, чтобы не ставить жирные картинки в качестве бекграунда?
Таки да, называется SVG. Там только сам квадрокоптер скорее всего жирный, а круги с градиентами вполне можно в векторе сделать - они вообще ничего занимать не будут.
Как верстают такой фон?
Можно по-разному подходить к вопросу. Как вариант три слоя:
1. Левый контент, у него фон в виде левого круга (чтобы не париться с его размером на разных размерах экрана - ведь там по идее контент должен помещаться в круг). Тут главное все аккуратно расположить и не забывать про critical css.
2. Коптер (поскольку он жирный, его можно подгружать асинхронно и выдвигать с помощью CSS-анимации из-за правого края экрана - будет и красиво и производительно; я бы еще какой-нибудь эффект к тексту добавил, но это уже другая история). Его размер видимо должен зависеть от ширины экрана и размера контента слева. Надо заранее сообразить, как это все должно адаптивиться.
3. Меню, которое справа вверху, оно должно быть поверх коптера (опять вопрос про адаптивность).
4*. Фон, который самый-самый большой фон можно просто поставить на background у хидера. Поскольку он в векторе, его можно сделать гораздо выше, чем на картинке, чтобы опять же не париться, что он вылезет из скругления внизу секции на телефоне. Само это скругление можно сделать тысячей способов, на тостере уже не раз спрашивали.
Такой подход требует больше времени, чем просто поставить все на фон у одного элемента, но и результат будет немного другого уровня.
Простой
