Cambiar imagen dependiendo de resolucion

[omar10594]

Hola.

Apenas andamos empezando en lo que son los Sitios Web en la Universidad asi que solo se hacer cosas basicas, tenemos que hacer un sitio que se adapte dependiendo de la resolucion, todo bien, puedo hacer que todo se adapte y vea bien en diferentes resolucion.

Ahora, las imagenes se adaptan al tamaño de la resolucion, asi que cambian constantemente, pero supongo (Pues no estoy seguro de esto), si la imagen pesa 1mb, entonces siempre carga esa imagen de 1mb, y si debe ser mas pequeña, la redimenciona, pero aunque es mas pequeña sigue descargando la imagen de 1mb, asi que pensando en celulares, donde las imagenes son muy pequeñas, tener que descargar 1mb y luego redimensionarla, hara que tarde en cargar la web, y peor aun que puede contener muchas imagenes un sitio web.

Asi que mi duda es: ¿como hacer que dependiendo del la resolucion, carge una imagen u otra? (Tendria varias imagenes, de diferentes resoluciones, por lo que las mas pequeñas al pesar menos, cargaran mas rapido, o bien, consumiran menos datos)

Crei que se haria con html pues es ahi donde cargo las imagenes, en CSS3 hago que se adapte con @media's , pero son pocas cosas las que cambio, basicamente los tamaños, o la posicion de algunas cosas, pero no sabria como controlar con eso, que imagen cargar.

Uso HTML5 y CSS3.

~saludos~