assets/images以下にフォルダを作成した時の呼び出し方

#実現したいこと

Railsのproduction環境で，cssを使ってパソコンとスマートフォンで画像を切り替えられるようにしたいと思っています．

#現在考えられる対応方法
assets/images配下に名前を変えた2種類の画像を両方置けば

css
1@media only screen and (max-width: XXXpx) {
2    .exsample {
3        image-url("exsample_ps.png")
4        もしくは
5        image-url("exsample_sp.png")
6    }
7}

のような形で取得，切り替えできるのですが,画像ファイルが50ほどあるのでスマートじゃないのかなと思いました．

#やってみたこと
そこでassets/images以下にpcとspというフォルダを作成し，それぞれに対応した画像を入れてcssから呼び出そうとしましたがうまく行きませんでした．

css
1@media only screen and (max-width: XXXpx) {
2    .exsample {
3        image-url("pc/exsample.png")
4        もしくは
5        image-url("sp/exsample.png")
6    }
7}

色々と調べて見たのですがあまりいい情報がなく解決方法がわからなかったのでどなたかご教示頂けると助かります。
また，「それやる意味ない」や「もっとこんな方法がある」などといったご意見もあればいただけると嬉しいです．
よろしくお願いいたします．
#補足
ruby:2.3.3
rails:5.0.7
production環境(heroku)