画像ファイルのstaticとassetsの使い分け

フレームワークによくあるstaticとassets

フレームワークはいろんな言語のものがありますが、画像やCSSなどの静的ファイルを保存する場所として、staticとassetsの二つのフォルダが用意されていることが多いです。

プログラムに近いCSSやJavascriptはassetsに保存するとして、画像ファイルの保存はどのように使い分ければ良いのでしょうか？

staticとassetsの使い分け

プログラムに関連させるならassets

まずはassetsを使うケース。

多くのフレームワークで、assets内の画像ファイルについては、

1. キャッシュ対策のために、乱数を付与する
2. サイズをリサイズする
3. ファイルサイズを小さくする

といった処理を加えてくれます。

サイトの構成上、複数のサイズの画像ファイルを用意したい場合や、ビルドするタイミングで中身が変わるような画像はassetsに保存するのがベストです。

例えば、サイトのタイトルロゴを保存する場合、ロゴにイベントのイラストを付与したり、モバイルとPC向けで解像度が違う画像を用意する場合などがこのケースに当たります。

基本的に変更がないならstatic

逆に、一度公開したらよっぽどなことがない限り画像ファイルの変更がかからない場合はstaticに入れてしまうのが良いでしょう。

staticディレクトリは、ほとんどのフレームワークでビルド時にドキュメントルートに移動するので、CDNなどで「/imgs/以下をキャッシュ」など指定がしやすくなります。

CDNに保存するという意味では、assetsに保存した画像はビルドごとに乱数を付与することが多いので、CDNに最適な処理ともいえますが、ビルドが頻繁な場合はキャッシュの意味があまりなくってしまうというデメリットもあります。

悩んだらキャッシュの観点で決めるのもアリ

用途などを考えても切り分けが判断できない場合は、ブラウザやCDNにどれくらいキャッシュさせたいかで決めるのも良いでしょう。

ブラウザやCDNに長い間キャッシュさせるほど、サーバーへの負荷が減ってユーザーへのレスポンスも速くなるので、この辺りはサイトのキャッシュポリシーに合わせて決めるとベストです。

画像ファイルのstaticとassetsの使い分けを見てきました。

どちらを使うかは、フレームワークごとにルールが決まっているケースもあるので、しっかりとドキュメントを読んだ上で、サイトのキャッシュポリシーと比較して使い分けをすると良いと思います。