アップロードした画像のファイル名をカスタマイズしたい

nobita さん、ありがとうございます。
このページ、実は見たのですがこれでいいのかどうかわからなくて…。

1. image.jpg をアップロードする
2. image.jpg が add_image_size で定義されたものも含め、image-name1.jpg image-name2.jpg image-name3.jpg …とサイズの名前が付加されて、 uploads ディレクトリに保存される
3. サイト内で表示する際は jQuery で画面サイズに応じた画像ファイル名にリネームして使う

とか便利かなぁ…と思った次第です。

フィルタは実はよくわからなかったので今まで手を付けていなかったのですが、そちらに手を出す必要があるのかもしれませんね。

nobita さん、ありがとうございます。
色々チャレンジしているのですが、動いてくれないのでお返事遅くなってすみません。

サイト内で表示する際は jQuery で画面サイズに応じた画像ファイル名にリネームして使う

今考えているのは

1. ブラウザに表示する画像はあらかじめ最小のものを指定しておく
   ex) image-thumbnail.jpg
2. jQuery を使ってブラウザのサイズを取得し、body タグにブレークポイントに応じた class ( sp/tb/pc etc.) を追加する
3. ブラウザのサイズに応じて、jQuery の正規表現を使って -thumbnail 部分を -middle や -large 等に置換する
   大きい画像を読み込むよりも小さい画像を読み込んだ方が読込速度も向上し SEO 的にも有利かと…

こんなイメージです。
この時に、数字で -640×640 ( 1:1 ) -640×480 ( 4:3 ) -640×355 ( 9:5 ) -640×360 ( 16:9 ) 等バラバラになっていると jQuery で置換するのが大変なような気がしたのです。またこの例では正方形又は横長の場合ですが縦長になることもあり、計算で本来表示するサイズを求めるのは手間（不可能？）のように思えたからです。

raindrops の件、ありがとうございます。
また後で確認してみます。

nobita さん、お返事ありがとうございます。
また、色々とご意見いただき感謝しています。

無視しているわけでも、落胆しているわけでもなく、なんとかすべく奮闘しております。
プラグインなども色々探しながらですので、お返事がいつになるかわかりませんが…。

またうまくいけたらフィードバックします。
本当はどなたか心の優しい方が、ホレ、と答えをさっと出してくれたらうれしいのですが…。