Cita:
Iniciado por JUMASOL 
Ya entiendo, y he leído las referencias de Mozilla.
Pero entonces no me sirve, porque de lo que se trata es de ahorrar carga al navegador haciendo que se cargue la imagen2 en lugar de la imagen que estaba por defecto. Pero si tiene que esperar a que se cargue y parsee todo el contenido, entonces ya se ha cargado.
Entonces habría que establecer una condición para cargar una u otra en función del width, pero no quitar una y poner otra a medida que el width.
¿Estoy en lo cierto?
Gracias.
en realidad no posteé para darte una opción, sino en respuesta a la sugerencia de dardosmania de usar el evento load. para que entiendas la diferencia entre ambos eventos, te dejo este ejemplo
Cita: <!DOCTYPE html>
<html dir="ltr" lang="es-es">
<head>
<title></title>
<meta charset="utf-8">
<style>
div {
font-size: 2rem;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('div').textContent = 'se ha disparado DOMContentLoaded y la imagen no ha empezado a cargar';
}, false);
window.addEventListener('load', function() {
document.querySelector('div').textContent = 'se ha completado la carga de todos los elementos de la página';
}, false);
</script>
</head>
<body>
<div></div>
<img src="http://cdn2.wallpapersok.com/uploads/picture/449/111/111449/loshadi-beg-trava-oblaka-515.jpg?width=7510&height=5350&crop=true">
</body>
</html>
y para darte una opción al caso que ocupa - supeditada a la compatibilidad con los navegadores - tienes la etiqueta <picture> de html5