アトラシエの開発ブログ

株式会社アトラシエのブログです

Railsでbase64エンコードされた画像を使う方法

例えば必須の入力フォームの左側に小さい※を画像で出したい時、画像を使ったほうが楽なケースがあります。ただ、小さい画像でも画像数が増えてしまうと当然Webサーバのリクエスト頻度が増えるので、このような画像はbase64エンコードした上でcssに埋め込みたいケースがあります。

https://github.com/rails/sass-rails のレポジトリでちゃんと書いてありますが、標準でasset-data-url(path)という便利なメソッドが用意されていました。

これを使えば

.hoge
  background: asset-data-url('shared/form-must-star.png') no-repeat 4px     8px

のようにBase64画像を扱えます。

欲を言えば画像サイズや画像数に応じて自動的にエンコードすべきかどうか判定してくれるといいかもしれません。