Load image cho các loại màn hình khác nhau

Bạn muốn load 3 image khác nhau (Ý mình ở đây là dùng <img> tag không phải background nhé) cho 3 loại màn hình khác nhau (small, medium, large). Bạn sẽ làm thế nào?
Mình thấy có một số bạn sử dụng show, hide element. Theo mình đó là cách làm không tốt đối với Responsive.
Mình sẽ hướng dẫn các bạn một cách làm của mình:
HTML:

<img class="image" alt="">

CSS

@media only screen and (max-awidth: 640px) { 
  .image {
    content: url('image-small-screen.jpg')
  }
}

@media only screen and (min-awidth: 640px) and (max-awidth: 1024px) {
  .image {
    content: url('image-medium-screen.jpg')
  }
}

@media only screen and (min-awidth: 1024px) { 
 .image {
    content: url('image-large-screen.jpg')
  }
}

Xong rồi đó, các bạn hãy áp dụng thử xem.