gfx.less

gfx.less ist ein kleines Tool und kombiniert zwei tolle Sachen: in CSS eingebettete Bilder und LESS Variablen. Für alle, die Performance tunen möchten, aber bitte automatisch!

Grundlagen

Bilddateien können im Base64-Format direkt ins CSS eingebettet werden:

.someClass
{
  background: url('data:image/jpg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/...lP2z//Z');
}

Das ist eine gängige Performance-Optimierung, da für dieses Bild nun kein separater HTTP-Request nötig ist.

LESS ist eine mittlerweile sehr verbreitete Super-Sprache für CSS. Als eines von vielen Features bietet LESS Variablen:

@fg1: 'red';

.someClass
{
  color: @fg1;
}

Außerdem ist es möglich, aus LESS-Dateien andere Dateien zu inkludieren:

@import 'myLib.less';

Kombination

Die Idee ist einfach. Eine Datei, sinnvollerweise gfx.less, enthält alle Bilddateien als Variablen abgelegt:

@gfx-svg1-svg: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR...IA0KPC9zdmc+IA==');

Diese Variablen können dann bei Bedarf verwendet werden, z.B. in der Datei all.less:

@import 'gfx.less';

body { 
    background: @gfx-svg1-svg;
}

.img1 {
    width: 250px;
    height: 250px;
    background: @gfx-business-jpg;
    background-repeat: no-repeat;
}

Das CSS-Kompilat enthält nur den Inhalt von Variablen, die verwendet werden. Nun muss die gfx.less nur noch generiert werden.

Dazu habe ich ein kleines Kommandozeilen-Tool geschrieben, welches alle Bilddateien eines Ordners in die gfx.less Datei zusammenstellt. Ich habe dies als externes Tool in Visual Studio eingebunden und kann alles mit einen Klick erzeugen:

ExternalTool

Als erstes Argument muss der Quellordner und als zweites Argument die Zieldatei angegeben werden. Natürlich kann es auch in den Buildprozess eingebunden werden.

Das obige Beispiel funktioniert bestens:

TestResult

Übrigens kann gfx.less neben PNG, JPEG und GIF auch SVG inkludieren, wie man am obigen fabelhaften Hintergrund sieht.

Download

Download Gfx4Less