画像の「DataURI」をCompassで一発生成してHTTPリクエストを削減する

画像の「DataURI」をCompassで一発生成してHTTPリクエストを削減する

· by · in

以前もDataURIについて書きましたが、Compassの関数一つで画像のDataURIを生成できると気づき、フロントデザイナーが扱う分にはこれが現状最適解に思えたのでメモします。

下記の記述だけで画像の参照パスだけ変えればあらゆる画像をDataURI化できます。

.image {
  @include inline-block;
  background-image: inline-image("../img/gazou.png");
  width: image-width("../img/gazou.png");
  height: image-height("../img/gazou.png");
  background-position: left top;
  background-repeat: none;
}

下記みたくmixin化するとさらに汎用性が高くなりますね。

@mixin dataUriImage($src) {
  @include inline-block;
  background-image: inline-image($src);
  width: image-width($src);
  height: image-height($src);
  background-position: left top;
  background-repeat: none;
}

.img-exapmle {
  @include dataUriImage("../img/example.png");
}

inline-block系など重複するプロパティが増えるので、画像クラスは「img-」で始めるのを統一する前提としてもう一歩最適化するなら下記になります。

@mixin dataUriImage($src) {
  background-image: inline-image($src);
  width: image-width($src);
  height: image-height($src);
}

[class*=img-] {
  @include inline-block;
  background-position: left top;
  background-repeat: none;
}
.img-exapmle {
  @include dataUriImage("../img/example.png");
}

筆者について

KaBuKi
ゲームとジョジョを愛するファミッ子世代。好きな言葉は「機能美」。
公私ともにWebサービスを作る系男子。
Tags: ,