Bei kleinen Grafiken ist der Verwaltungsaufwand beim Laden relativ groß, verglichen mit dem Datenvolumen. Hier bietet es sich an die Grafiken in eine Data-URL umzuwandeln, die direkt im Seitenquelltext angegeben wird.

Gegeben sei die folgende Grafik <img src=“sidebar_more.png“>

Ihre Größe beträgt hier 627 Bytes, was schon relativ viel ist. Mittels:

php -r "echo base64_encode(file_get_contents('sidebar_more.png'));"

wird daraus eine Zeichenkette aus 836 Zeichen, die direkt per Copy&Paste in den Link integriert werden kann (der Teil nach dem Komma):

 <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAMgAAAAaCAIAAAEKy7R7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhVJREFUeNpi1IqewEAlwPLz2yeqmfXt01uqmZWqdYBaZgEEEOOgCy8erh9fvnFQJ7zA7vlKzfACCCBG9fAuhsEHWL5/fj94XNORZ1kx6TgotERt0gZhaAEEEDUTPTUj8e+fX4PRWX9+/RgkTrmzrlYlqBnqrN8/vw+eQOJg+fD5KzsobUk65w/KSBxMoYVwVqbhyUHoLIAAYtSM7GMYBcQmrd8/RkNhaOfDAQf3NjUByaqp01bsfIEIrN8/v40GDSawSy6+/4QRPWX9Hk1Z2MCtu4O7TTP4AUAADdLm8iAt4P//+zcaCsQG1r9/f0ZDgejA+jsaWKOBRQFoyzbZefzywXM/MQLrz+/R0EEDf//8nVtT9u/fP5WABpTA+juasrCA/0BsHFv69y87StNBxq14NGzQgLUR9+Vb7z99YUPPhqMpCxMcOv2RgYGJgeHPaJk1WhuOBtagC6xsk7OjoUAkAAgwFs2o/tFQGAW0GHT4OxoKo4AGdeHoAM0ooEnC+jOasEYBUcBQneH5m+9fvjN8+cY52nofBVQDgQ7GkW4+QMbxK6eL+9d9+8Hw+SsHzoT19+/ogMMoIA78/w+hLXVMd0/RLOyfuuv4ZzxV4WjCGgVEAWYmpp+/foSWN9978g1zABkNMEq7FI4G2SigfuN9tCocBbTpFY423kfB6HDDKBgyCSvL+PRoKIwCqgOm">

Und hier als Data-Image eingebunden:

Damit entfällt das zusätzliche Laden der Datei.