картинка на фон под разные девайсы

прет народ! хочу на фон выставить картинку и чтоб она одинаково хорошо смотрелась на как можно большем количестве устройств, но вот проблема, не знаю каких размеров использовать картинки, дабы они не много весили для необходимого размера экрана. много текста надеюсь суть уловили)

На фон куда, на сайт, рабочий стол, куда?

Суть тоже не понял. Скорее всего изображение должно быть по размеру стандартным, например FullHD 1920х1080 и для второго позиционирования 1080х1920 (смартфоны)
На экраны с меньшим разрешение картинка должна подстроится сама. Если соотношение сторон экрана 16:9
разрешения

сори, фоновая картинка должна висеть на сайте

так на мобилке же долго прогружатся будет

А сама картинка уже имеется?
Есть беcшовные маленькие картинки которым нужно просто сделать background-repeat
Сам такого не пробовал, но думаю возможно трансформировать(изменять размер, поворачивать и т.п.) изображение также через CSS функцией transform
Также можно использовать разные изображения под разные устройства, т.е. изначально подготовить одну картинку с разным разрешением, сделать ее фиксированной и использовать перенаправление других устройств на мобильную версию сайта.

Css media screen в помощь, сделай три (n количество под распространенные размеры) картинки разных размеров, назначь на соответствующие разрешения экранов, если некоторые экраны будут отличаться от указанных, то наиболее подходящая картинка будет под него адаптироваться…

http://www.w3schools.com/css/css_rwd_mediaqueries.asp

я так и делаю, в том то и вопрос, при разрешении девайса в 320х480px, использую картинку такого же размера, а как быть с экраном в 320х568px ? если сделать картинку по максимальной высоте, тогда на экране с меньшим разрешением,картинка будет иметь лишний вес. может как-то можно в серверной части спрашивать у браузера разрешение экрана и отправлять соответствующую картинку и как оно будет влиять на скорость загрузки?

Эти “10” пикселей роли не сыграют, изображение будет растягиваться… но если прям ты хочешь определять ширину экрана, то Javascript в помощь. http://www.w3schools.com/jsref/prop_screen_width.asp

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

SVG