Tengo 4 imagenes en mi HTML, todas con mas de 1000px de ancho. Quiero que estas imagenes se cambien por otras más pequeñas cuando alguien ingrese con un movil. Esto no lo puedo hacer con media queries, porque yo necesito la etiqueta html IMG y NO una imagen como fondo de un contenedor. No sé si esta forma de agregar imagenes (con js) sea la correcta, porque he leido que Google prefiere que se agregue el contenido HTML directamente (y no con js), pero es la unica manera que me queda, puesto que mi diseño se basa en contenedores que se estiran segun el contenido (no tienen tamaño fijo), y para poner una imagen de fondo necesitaria establecerle un tamaño a mis contenedores, cosa que me haria renovar mucho codigo, y a estas alturas no puedo.
estoy pensando en hacer algo asi:
//css
@media (max-width : 480px) {
img {
display : none
}
}
//js
if ( window.innerWidth < 481 ) {
//jq
$( '<img src="img/.jpg" />' ).appendTo( 'body' );
}
Lo que necesito saber es si esta es la forma de hacerlo. Si es correcto, o si no es recomendado. Gracias.