Responsive: como usar imagenes de distinto tamaño, como fondo según el dispositivo

[z3r0]

Tengo una página cuyo css tiene esto:

#banner {
background-attachment: scroll, scroll, scroll, fixed;
background-color: #645862;
background-image: url("images/light-bl.svg"), url("images/light-br.svg"), url("images/overlay.png"), url("../../images/banner.jpg");
background-position: bottom left, bottom right, top left, top center;
background-repeat: no-repeat, no-repeat, repeat, no-repeat;
background-size: 25em, 25em, auto, cover;
color: #fff;
cursor: default;
padding: 6em 0;
text-align: center;
}

La que importa es "banner.jpg" que es la imagen grande de fondo (las otras son unas rayitas que se superponen.

El asunto es que esa imagen tiene 1600x815 px y pesa 191kb. Para verla en una pc desktop no está mal. Pero me preocupa el tamaño y peso para una tablet o un celular.

Hice versiones de distinto peso de la misma imagen banner.jpg a saber:

1) banner.jpg (1600x815)
2) banner1200.jpg (1200x611)
3) banner640.jpg (640x326)
4) banner320.jpg (320x163)
5) bannerhd.jpg (1600x815 pero esta con mejor calidad que la original)

En la página .html el código tiene un tag
<section id="banner"></section> que entiendo es lo que invoca a esa parte del código css.

La pregunta es: como hago para poder "servir" banner640.jpg, o banner320.jpg etc según la página sea visualizada desde un celular, una tablet, etc.