サイトを作る上で画像の運用は結構悩ましい。というかサイトの運用が悩ましい。もっと気楽に画像を運用していきたい
あるある
htdocs/
product/
img/
unique.png # dir 配下でしか使わない想定の画像
index.html
しばらく経ったある日
htdocs/
product/
img/
unique.png # dir 配下でしか使わない想定の画像
index.html
qa/
index.html # このページで product/img/unique.png を参照
最初は特定のディレクトリ配下でしか使われない想定だったけど、色々事情もあって今ある画像を使って最短で qa ページを作ることになった場合とかにこうやりたくなってやむを得ずやったりすることあるよね。
でもまぁこういった状況は解決策はあって、他ディレクトリ配下のimgを使う場合は
- qa/img/ に使用する画像をコピーする
- common/img/ 等（共通で使用するディレクトリ）に移す
こういう対応がない訳じゃない。
ないわけじゃないんだけど、マジでかと。毎回毎回画像をコピーしたり移動したりする気かと。コピーしたら一括変更できない、共通に移す場合は同じ名前のファイルがないとも限らないわけで、そこまでケアできんわ。
そもそも「共有で使用するリソース」という意味でよく「/common/img/」みたいなディレクトリが使われることが多いけど画像・css・jsとかのリソースは html から呼び出されるものなので、それらリソースを「こいつは共通、こいつは1箇所だけで使われる」と分けること自体が辛くなる要因なんじゃないかなと思う。お前はいつからここでしか使われないと勘違いしてた？
根本的に解決したい
cssは設計を頑張ることで「この場所にはこういったスタイルを充てる」という htmlから考えるアプローチから離れて「こう定義されたスタイル（モジュール）をここで使う」という風に作る事が出来るようになってきたので、ある程度コントロールが効くようにはなってきた。
この手法を画像でも活かして
- 画像は1つのフォルダ配下に全て置く (/img/ とか)
- 基本画像は消さない
こんな感じのルールで運用していけばhtml側では好きな画像を呼び出せば良い、何も考えなくて良い。まぁ画像フォルダにはすげーいっぱい画像ファイルが貯まっていくことにはなるんだけども。
もう少し使いやすく
このルールだと、 /img/ 配下に凄い数の画像が配置されることになるので、少しは管理しやすくしたいので、画像の種類毎にディレクトリを作ってみる
img/
btn/
img/
txt/
caption/
thumb/
pic/
あとは、画像の修正する際は影響度等を考えた上で画像を差し替えるか modifier 画像を作成する、というルールにすれば良い。
img/
btn/
btn_submit01.png # 通常ボタン画像
btn_submit01-long.png # 大きいボタン画像
img/
まとめ
こういうルールで良い感じに運用できる
- 画像は1つのフォルダ配下に全て置く (/img/ とか)
- 種類毎にサブディレクトリを作成
- 基本画像は消さない
- modifier で画像毎の関連性を明示
という妄想。次にゼロから作る際にはこのやり方でやってみる