This page has been robot translated, sorry for typos if any. Original content here.

Speichern Sie kleine Bilder in CSS

Halten Sie kleine Bilder, die nicht in Sprites gesetzt werden können, in Daten: image base64 in CSS - es speichert eine Menge Anfragen an den Webserver.

Wir kodieren das Bild in base64 mit Online-Diensten , wie dem Dienst von DailyCoding (sehr praktisch, nichts überflüssig).

Setze die resultierende Zeile in die CSS-Datei und ersetze den "TYPE" durch den MIME-Typ deines Bildes - jpeg / png / gif oder (OMG!) Bmp und "CODE" in der gewünschten Zeile in base64:
.some_background {
background-image: url("data:image/ТИП;base64,КОД");
}

Jetzt können Sie sicher das gewünschte Element some_background style verbinden und zwei Anfragen an den Webserver (html + css) statt drei (html + css + image) genießen.

Beispielimplementierung mit Bildern :

  • images.html - 361 Bytes
  • images / images.css - 305 Bytes
  • Bilder / test1.png - 1.600 Bytes
  • images / test2.png - 1 143 Bytes
  • Gesamt - 3 409 Bytes


* Wenn Sie darauf klicken, wird das Bild vergrößert

Beispielimplementierung mit base64 :

  • base64.html - 361 Bytes
  • images / base64.css - 3.991 Bytes
  • Gesamt - 4.352 Bytes


* Wenn Sie darauf klicken, wird das Bild vergrößert

Beispiel für die Arbeit des fertigen Jammit- Werkzeugs:

  • (Google Chrome, ~ 60 Mbps):
  • Bis (102 Anfragen, 73,23 KB übertragen, 3,41 Sekunden):


    * Wenn Sie darauf klicken, wird das Bild vergrößert

    Nach (2 Anfragen, 153,88 KB übertragen, 0,94 Sekunden):


    * Wenn Sie darauf klicken, wird das Bild vergrößert

    Vorteile:

    • verringern Sie die Anzahl der Anfragen an den Webserver;
    • weniger Verstopfung des Cache des Benutzers;
    • Manchmal die Reduzierung des resultierenden Bildvolumens auf großen Dateien.

    Nachteile:

    • die Komplexität der Aktualisierung von Bildern;
    • manchmal ein leichter Anstieg des resultierenden Bildvolumens auf kleinen Dateien.

    Unverständlichkeit (es ist unklar, ob dies Plus oder Minus ist):

    • Internet Explorer 5, 6 und 7 haben Base64 nicht hinzugefügt, aber IE8 funktioniert einwandfrei. Es kann aktiviert werden , aber ich empfehle es nicht, es ist besser, mhtml zu verwenden

    Es scheint mir, dass die Vergrößerung der CSS-Datei besser ist als die überflüssige Abfrage an den Web-Server, weil Browser standardmäßig durchschnittlich 8 parallele Verbindungen zum Webserver aufbauen und 50-70 Bilder bereits in der Warteschlange stehen, und wer mag die Warteschlange? :)

    Verwenden Sie diese Methode bereits nach der Freigabe von Design und Layout, da Bilder auf diese Weise etwas länger als üblich aktualisiert werden.

    Für die automatische Bildverpackung in base64 gibt es einen Onlinedienst duris.ru , aber Sie können auch das PHP-Skript mit regulären verwenden:
    <?php
    echo preg_replace('/images\/[-\w\/\.]*/ie','"data:image/".((substr("\\0",-4)==".png")?"png":"gif").";base64,".base64_encode(file_get_contents("\\0"))',file_get_contents('style.css'));
    ?>

    Es geht von einer solchen CSS-Datei aus:

     * {
    	 Auffüllen: 0;
    	 Rand: 0;
     }
     html {
    	 Anzeige: Tabelle;
    	 Breite: 100%;
    	 Höhe: 100%;
     }
     Körper {
    	 Rand: Auto 0;
    	 Überlauf-y: scrollen;
    	 Hintergrund: hsl (0,0%, 30%) URL (Bilder / Hintergrund.svg) keine Wiederholung;
    
     }
     .px_sort_0 {Hintergrund: URL (Bilder / px / arrow-090-small.png)}
     .px_sort_1 {Hintergrund: URL (Bilder / px / arrow-270-small.png)} / * Rand: 0 5px;  * /
     .px_status_0 {background: url (Bilder / px / minus-circle-frame.png); Cursor: Zeiger}
     .px_status_1 {background: url (Bilder / px / plus-circle-frame.png); Cursor: Zeiger}
     .px_delete {Hintergrund: URL (Bilder / px / cross-circle-frame.png); Cursor: Zeiger}
     .px_help {Hintergrund: URL (Bilder / px / question-frame.png); Cursor: Hilfe}
     .px_info {Hintergrund: URL (Bilder / px / information-frame.png); Cursor: Hilfe}
     .px_return {Hintergrund: URL (Bilder / px / arrow-skip-180.png); Cursor: Zeiger}
     .px_watch {Hintergrund: URL (Bilder / px / eye.png); Cursor: Zeiger}
     .px_home {Hintergrund: URL (Bilder / px / home.png)}
     [data-beforeAddContent]: vorher {
    	 Inhalt: attr (Daten-beforeAddContent);
    	 Anzeige: Block;
    	 Farbe: rot;
    	 Breite: 100px;
    	 Höhe: 16px;
    	 Grenze: 10px solid schwarz;
     }
    

    solche:

     * {
    	 Auffüllen: 0;
    	 Rand: 0;
     }
     html {
    	 Anzeige: Tabelle;
    	 Breite: 100%;
    	 Höhe: 100%;
     }
     Körper {
    	 Rand: Auto 0;
    	 Überlauf-y: scrollen;
    	 Hintergrund: hsl (0,0%, 30%) url (Daten: image / gif; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KCTxkZWZzPg0KCQk8cmFkaWFsR3JhZGllbnQgaWQ9InN1biIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNDUlIj4NCgkJCTxzdG9wIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6aHNsKDIxMCwxMDAlLDUwJSk7Ii8 + DQoJCQk8c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOmhzbGEoMjEwLDEwMCUsNTAlLDApOyIvPg0KCQk8L3JhZGlhbEdyYWRpZW50Pg0KCTwvZGVmcz4NCgk8Y2lyY2xlIGN4PSI1MCUiIGN5PSIxNTBweCIgcj0iNzAwIiBzdHJva2UtZGFzaGFycmF5PSIxMDAiIHN0cm9rZT0idXJsKCNzdW4pIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjE0MDAiLz4NCjwvc3ZnPg ==) no-repeat;
     }
     .px_sort_0 {background: url (Daten: image / jpeg; base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8 / 9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQ5JREFUeNpi / P // PwMlgImBQjDwBrCgCxj1XGfg4OZmYGNnj2FgZCxg + P9 / wq + fP5f8 + PqV4VyJJnEuAAZsDFBTQZS7mDGIBvGJ9gJI8c9v3wri / OWMX / xgYIj2kzMG8XEZgmHAz + / fbb9 / + cIwcdbps4 + / MzBMmX36LIgPEicqDP7 / + 5f +++ dPht + / FP55 + JWB4dvnTwysbOwmrOzsxAXi148fGUA2gsDrn0ADPn0GsoD4zjYgbYo1wFAw2FRxLQbuyCVndA7 + / w + iQXxsakGYBZuz / ry8pvH / 8YVbN / q + Mfx / e + vW35fXjIDC14D4B7paRvS8wMjICKJEgJgN2aEgHwHV / iFowNDLCwABBgC9qJ54WqC2JwAAAABJRU5ErkJggg ==)}
     .px_sort_1 {background: url (Daten: image / jpeg; base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8 / 9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAP5JREFUeNpi / P // PwMlgImBQjDwBrCgC9jPfQGmGRkZZwIJY4b // 88CwykdJHYwWYKwC37 / + gXGv37 + NI5yFzMG0TAxolzw4dUrBg5ubjD7DVDPj69fwWwILUfYgK + fPgJt / 8HAysbOcB + o5 / uXL0DbfzL8 / vmTuED8 / + // TKDiM98 + f2J4CDQARIP4IHGiDPjx7dvhb58 + M1jEOhs // MbAoBPpbAzig8SxOgGUEpExl1EEA6dzTQx35JIzOgf // wfRID5IHF0tOBVjCECAArNJagmL / 6wzIBrI1wFiNmwGMKLnBWD8gygBIOZCEv4DxG + Bav + i + 4Bx6GcmgAADAAiPsgkULyM8AAAAAAEELFTkSuQmCC)} / * margin: 0 5px;  * /
     .px_status_0 {background: URL (data: image / PNG; Base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8 / 9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAvNJREFUeNp8k11MUmEYx / 9wQErIWaEoKjRtgqI1m9kszaGtqZu65SzXpJu2Ppbd1LzVzS7r0nnfRbKpiV554Y06q6m4RV8iRsgMooGBggJ6gJ73ZMtqdbYfh73n + f + fj / d9RW1tbRCJRBCLxcKbyCJKAKiIDPx4toivqVRqmfATSCaTYG8Jfj0yokqr1V7o6Oi4XlhYWM7zvPBBIpHA6XS + HRkZGXK73S9oaYGIs2 + cXq9nWZn4cktLS5fJZHrI22wq3 / AwvgwOIjA2hrDTCYVcrqq / dvUSVco5HA4mdhMJTqfTsVJqWltbu4xG4w1XXx + kc3PQUlZtbi7ylEootrawOTsLn3UJ5aau0xzH8WTiZybiRCKh0mg0tQ0N9SZnXy9yKDhHpcL29jYCgYDAzs4OVLSm3NjAWn8 / 6urqTHl5ebVMywwM7e1XOj9PTSHD44WIBuP1ehEMBn / D5 / NBxAblWoN / ZhrNzU2dTCuhH3VBQYHB8WwIJxQKeDweYXB7u7tC5h2qZJf + / xyoOj8fWLQi985tA9Myg8xwOIKozQY + KwvVMzNCBaFQCNQr5HI5FGSclpYmGExXVCBFsdFoDEwrIWfWBnja1 + jmJux2u5BNKpX + JRa2jaqJUaygIS0zCHOcBFJDGWLWRbiNRvzvSSczFguImUGYZfeurn60KyqrEIzFoJHJoGa9 / oMotZV + 5ixcrjU70zKDN2az2aKsqUO87BQ2KeAIHWsFBf9JmNpKUqKj1TWYmLBYmJbLzs6OBIPfpIDo8MV7D0o / vXsD / 7obclauUCgJiVVi + 9x5lDx6gvHx0efz8y8tdABfc / sXw7O8 / F5MsxE39vTqcbIYbk  6KJc86HBIp PpGqG + / + eRfGt zCbn46Pjg5ZotHoJJ0PXrSf5JBMJjtGEzfqdKVV3d09TZWV1UUHh2e1vnIODDyeXFn5sBCJRKbj8fgGLceYAUdkEsdZq7R9mXT7iujSZB28zlSln6bu3NvbC7FuiAAR + i7AAKjye47FnCxuAAAAAElFTkSuQmCC); cursor: pointer}
     .px_status_1 {background: URL (data: image / PNG; Base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8 / 9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAw5JREFUeNpMk01ME1EUhU9npqC1MVWEKrUQMVqQIC6ABBVIRYwYgURCokhduiKaaIwLja5cuQTcaWJi6AK0EKJEF8QQ0IAoUQIF2vKjIjTlp1BoO + 209d5BkJd8M3fezDn3vXfnampqaqDRaCAIgnonUokcAEZiLzbHGuFNJBJOwkcgHo D7xL + + + j2SiKDMz80xdXV19VlZWnqIo6gtJkuDxeEba2tpaZ2dn 2lqkJD5nZidnc1ZWXyhqqqqwWaz3e2XvxjtCw40zb9Am68L42suSDrJaCu / dp5WKk5OTrJ4loiJFouFl3K2urq6wWq13rjlfoghcQSJNAEpxgMwHNiHtV0bGAgMo2ehDzfzb + SLoqiQiY9NhFgsZszIyCgpLz9nu 16gEiKAoPBgGAwiFeHm1RCodDmnEHGnanHKCsrs5lMphLWskFube2Vqx2 + / + 3sKvCyBBtktLS1hfX98 HI6Xl5fV2Je0gnfeD7h0qfIqayW6pJvN5tznE3bsPqRTxTwi0QgWFxfV7M5xJ5TY5oEeTDPiG22x9FBxLmvZwBAIrGMkPIa0eDp6T3fC6 / WqWdlAq9Vi0PperQRT2FeBEc0YGYfBWolKxdtAjEq2Gl6D2 3erC99zOIt4RZRSUFMVlgM1rJBQBQl5IjH8T0ygZKx6u29Dxf1qKK8T6Xbc0k6LXKU4xQJbBDg7H9cLvf4qT35iPpDSDInAelQ2cq69cyIoQTydScxPT0zzlo2 + + + GG32x2VxoswBQ9CXE1A0AuAfocBxYw2oEGWnImKlAp0djocrBVoGfNTU 7ejo43r1vynsH824j4aBDYiCHnazGODRSqMUbDODJnQlNuC7q6Ol  9PT0 / 1slb81xhzTueoQP0hPLr8JDtV3g / MRPDTNQksyDgrF6M + 9Tru5z2E3f6yo7291UHl7V5ZWVE06mkAu5KTk / fr9XqrxXKiqLHxXmVBQfHRHY2GoaHPnubmp90TE2ODVOKPsizzDxNmA5EwECm8UyqdgfZ9lJomdWc70yp9tGRPNBr10 / MGsUj4 / wowAGfaiP6JIq6oAAAAAElFTkSuQmCC); cursor: pointer}
     .px_delete {background: URL (data: image / PNG; Base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8 / 9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAxhJREFUeNpUU11IU2EYfrazOdGjqSm2hq6mbUszK + ZC0kT7IQUVCivCdRVdRF2Ft0p2l7ciCN1E4CjnzzCw6MaGEdkK1t907sdRWuLEn6nb3FF735OQffCc853zfs / z / n6K5uZmKBQKKJVK + U3IIxwFkE / IxN + 1Spjf2dnxEhYI2N7eBr9V + Lc0BKterz / T0tJyw2AwlEmSJBtUKhUCgcCX / v7 + vnA4 / JZ + TRASbBPMZjN7ZfLFxsbGVpvNdl / yePJ / P3 + + OXz09iAwOIhoIQExPz6 7dvU8RSr4fD4mhwlbgslk4lCqmpqaWmtra2 + + GOjqgHh HnrzqtVrocnMhrq5ixeXCb / dHlNlaywVBkEhkgUWUW1tb + YWFhdXnztXZAh3tOECHT4yOYn19HZFIRMbGxgZOvnqF3MVFzHR2oqamxqbT6aqZywKlV65cvv7z9Wtkzs7B6HDIeR9 9gxLS0syeM + + + rxOmEJjSDhTdjaGiov85cFjhYUFBQuvp AqIowlFcLB + Ox + PQPX2K7N5e + P1 + BINBPM7JQXRlBdEPbmi12lLmskBWNLqGmMcDKZlERno6nlDeXq8X8 / ​​PzshC312WxyG2KkwCfjcXiYK6KWsUikKivMTJuzM1BpD0VCmq1GikpKTIydnstbG4iTnaZQ1wlPaKCoIK69BjilG8aGY6Mjf1H5jk4OzUFkQWIzGcBJQtE2fvc9LR / UrRYsUThaveQv1ZU4FN5uSzAsNI8xCiytFMVCIVmJpnLAp / tdvtQblUNEseOw3Phgkz2EfkQ WG4aVZ4vTAasU2Osiur4HQODTGXU + / + gVDPpdw8ODA aHXVBYTuMlFWwfj / AueN9nMEBh  rYTxwSOMjDgHQqGgi7nC7sWY9Xq / KSk95aW2dnNqsRFhQY2Psz / gU6kh1V2C4dYdGG / fg93 ZNjh6BuKxWKjNCOSQq4GkKrRaHJoDmpNphLr3btt9RZLZdGeiwa3 + + + 12gu7trdGrq 8Ta2tpYIpFY5K6ygEDIIuwniFTALCpYEV2avL3XmaJcoJADyWRymb7XCRHC8h8BBgBnQIpwMqgwawAAAABJRU5ErkJggg ==); cursor: pointer}
     .px_help {background: URL (data: image / PNG; Base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8 / 9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA0pJREFUeNpMk11ME1kUx / + dj07ZDhVYbKGGJdDE8rHKC6trXMXqrsYHPkzkhVg1QeKLMSZ + PBhj4sM + 7cPug8bsgyb6QJMFLcZE44NRY8RQIVYb7JcNFi22QD + YTillpoP3jq46yW / uvXPv / 5wz95xj6O3thcFgAMMw + khYT2gFYCNY8PmRCKm1tbUgYYEATdNARw7fHoGwpbGxcXt / f / 9Ac3PzJlVV9Q2O4xCLxQIjIyPD8Xj8GfnkI5ToHtvS0kK9UvHe7u7uQ263 + / RkGDbvoxyu35Vw96mMaLwAzmi2DRzs + p1EykYiESqOE8qs0 + mkofzW09NzyOVyHb5wNYXQ3A8wVdajrs6G2tparGhmvCSaJy / SOHLA2cGyrEqMLFAjXLlctjU1Ne3Ys2e3 + / yVFASLHVVCBXZ1cDiwy / zl78z45z8OU9M8Lv6bwsXBLrff74 / Mzs6GWIfDsXVo6NjZ8YBijaYqYTQKSKclSJKEQDiFVFpBa7MF8YSMUHwV0rIGRsvjl81228SEb4pGYG9oaGgffpiAKFqRTKZ1n68iCsYLy9jZkcFP1Un4 / UVW + XKw2614FS3j1776dqplyKsqn5fxZkZFuayhVFrF / GIWc8lFODZoGNi3DuFZBbefLIPlTSgUFf1ssbgCquVIqqgRqGoZcmEVmbxCcsyDE3hcOl6nR / PnzTSMFVX6fM3AkrN5fNaoDDWQZ1kOGxuAhKwSYeXXwug790EfTeKP36pFW8VGO50w1ECeep + LRT + GfnYIkHJZmCurYTSt03l6rUPn / zVFKclobzJiZuZdiGqpgdcej8f7x9Zakr4lrMhpCGYL + ArLV6d0TiktZ2ATZbg6q3  HnjtdLtazVapWz2QwPGCpODbraHjwO4mMyA8FkwfWxBG7cy5FK5TH / PoAaPom / z7RjbGz01sTEuJcUoJ / 90hiJYHCaIf3BXDjZ0yIai8h8DCMwHcRS + gPa6iX0ddXgzNE2eDw3xkZHh73FYvF + NptVDfptkHsSBKFGFEWX09m25cSJs / s7O7c5vms0TE4 + J12 + / Nf9cPiNT5blx6VSiRbMCjXAEmiO6FWLPM9Xke5zkKZZ / 307kygXyK3HFEXJkXWBsEjIfRJgAII6jzFPmgnBAAAAAElFTkSuQmCC); cursor: help}
     .px_info {background: URL (data: image / PNG; Base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8 / 9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAx5JREFUeNpMU1tIU2Ec / 23nnB1PZ9q0taUyLQVnruhFulAy1g0MvHQRQlwFPRUSQfaU9NRbQS9R9BL04h40pkhFUHSjwhK6iM5Lw0apU9vF7eh23NnW / zuG9cHvfN / 5 / t / V933 / m6GlpQUGgwFGo1GfCZsJ2wHYCUVYGwnCfD6fDxAWCcjlcmAzj39DJOyurKzc39bW1l5VVbVT0zTdwPM8gsHgSG9vb08oFHpHWx8JKrNxtbW17FZGPtrU1NTh9XqvDE / A7n8Zx4PBBAbfKpgKLYM3yfb2U + 7D9FJucnKSkUOELOd0OtlTDjQ3N3d4PJ4z3ffmMT67AQWFpdiyxQ6r1Yp0TsZn4rz FMHZ485dHMdpJLLIRIzZbNZeUVHRcOjQQe + + 1U / PgNthhsVgQja7g5gUZty7KiMdT + l5OsOL6 / Qjcbre3vLy8gXGZgOvkyROnH79ZQDpfSMEBwuEIFEVZDw5bLyxEdVtClfB8KIZjxxpPMy5PnzKHw HqeTEDs9mmk9nIZDJwNvaD7OAFAdm + / + AS0rs HrVBZ7W0tdjMsELMmkgrFpDVurclDVVSwll5FKpdFzw6Gntv16GJywlrDlVIbO5nQ74 / KUKuYGNC0LZXkV0WSGniqAFwWdLEkShIKidXfyBo7OJrHG0YxMIMlxPGocwIyiEbFw / bAkCeSWGSYp869acquoKWMLIxNIsttnp6a + j ++ oFpGIxyAXFsNUsFEHI8uyvP7PkFEVuLaZMD39Y5xxmcA3n8 / nP7LHCou4hLQSgSgXQZCKdDJzg60Z1JUo7GYFnvpiDAz4 / YzL2Ww2JRaLCoBBunzeU / fsVQBz4ShE8vvBwCwePomTiICFny  MoEcK43eVCf3 / fo6Gh934qwC / c38aYCQRGjZRnY / el5lqzKYXo3ARGRgNYivxCXWkCre4SdJ2rg8 / 3SL + vr8efSqWexmIxzaBHAygQRbGEfPY4nXW7OzuvNtbX76v r9EwPPwheOfOzacTE2MfqbBeqarKCibNBDiChbCJYBYEwULdV01Ns + / n / dqZXLlLUg1RgcVYOhN + E + B8BBgDs34KhINyuSwAAAABJRU5ErkJggg ==); cursor: help}
     .px_return {background: URL (data: image / PNG; Base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8 / 9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAgtJREFUeNqkU71rFEEUfzs3u5cLnsGcUS5oFb + Cic1cJdhYKSIWKhauhYWugoT9E + y1kFSmsjlIo4UJIimsxEqvMQmoEI1I0HCKya2X / Zqb8b3J3uUiXpoM / PbNm3nf81tLaw27WXz0 / LTW + vrAzucNuG0D59zFuzMY3GsbrtXrQMmUUsAYA8uyjM7 / E9SVUvrdB2EQ9KyAbdO0dmWa + jcuDAuUQNhoNIzs2UK3c5ok / u1rx0QQKEjjGJSUpuQdZ7Dpu + l81x0XS0shDAxwEwDXu + 0F6hoKD + UUSkE6N85x7N + 7WRGLi43MUMGls0dE + 4FIOg6D6Zn37Vjiyvkx8fTlAnBynrh1WszPr3UypWkL6r8k / AlD2EAkSQqlwQIkUdSxWVldNzpLo + jRw8lXtZGRPSZTs6VhBXtfZQrWCw7E + / ZCa6gEjf4iJBQsw + dEG2kdmpijfl1sxb / unRPVLxLKxRz8eDZX + 3DG + PY1 / ​​HiYaQrtBentIVZxiPBk8rl / 0rsqlpsACQ4xx3mFCNN58y0CeR1C0YVdHoP8qcsAg0dNJYfvuOLb4ypVUNGfXmzN5vuCAdkTKJjVXWLuwCiwExdda / 9xw0T5 kFF1T + / + syINcxsZ REk3f5bV1ze / dWEoVFHgqI zy3g + + + 3IWDiCLCoc4RLaqAYGeH WzPeiQkWhKviWUJ7a3d / s5 / BRgACwsSLXcLHWcAAAAASUVORK5CYII =); cursor: pointer}
     .px_watch {background: URL (data: image / PNG; Base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8 / 9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAdhJREFUeNrUk01LAlEUhu845QdRUxZBhIIWtFBso2AwRAVNLqKltHCb63b9A / 9AixZCELhyYdAmEyYCBcOlNa1CSQoxog / DMY3x9p5B27Zw1YGH8XrO + 55759wROOdsmLCwIWNoAwFh / ugfZQKsAQV4gbNf9woqIAeuQHOgGxgIMNix2Wx7iqIsxmKxWU3TxgqFgpWSsix3fT5fK5VKPedyuftOp5OE7oz60hHsYD8UCh3k83k5k8ksGYYx5XK5rK2WzgiIrPQf5aiGakljakVRjKDrZaPR6Oi6zglVVTlFMnnMZXmdK8o2x674IE + 1pCHtCFx2w GwE9u3drtd81yJRAKdDXZ4eGSuFxb87PHxjg3yVEsaNNolg5NSqTTVbDaX7Agq8Hg8TFWLbGVl0xTY7TY2Our5NfhCQPNAWtFisdSr1WqvWCwawWBwRpKkcZyXadoN83qXmSQ50V1jGxurpnGlUqnH4 + / + FzvItTmoo5ApjQNMIOh2MrEon4o9Gov1arzZXL5XHKBwKBT7fbXU n07fZbPa23W5f4BVd93o9TgYimATTMHHCbB5PN9ZSf0LmrsEHRDWInvB8w / oFvAv920iFDkBzF / 64fHTjvoFOxsL // 5h + BBgAwjbgRLl5ImwAAAAASUVORK5CYII =); cursor: pointer}
     .px_home {background: URL (data: image / PNG; Base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8 / 9hAAAAAXNSR0IArs4c6QAAAhJJREFUOMuNUktrE2EUPTPzfdP5Mkk25uFIoNHUCNUSm4hUKFpSX1AQ3KhY7aqLLgRBEEHduHPhwp8hoi1F1JWIivGFNhstbS1NbdpGM3lNZjpjM8m4cSFpk3i2597DOfceoAUGjyWHzl8cu4QOIK2I5cwSkSSmAOAAOK3m + FaExFyS2 + OWeV5o62ALSyjlkidOj4xPXLmXOHxkOBDwdy3Mz72zLLOO / 0FQCfV / Sn / bVItlp1CqOLMLGWfk7Lnbf6N0jtAdiQ6XqwbVDRO6YWI1l0c4Ej3Z6l7NApxlmfVcvgDDNLFhWsipRRjmprxd3C0CvCCIQ8njo15JgK5VYOgaZJHH3ki4L7Jv / 6mOAkqo iTxw8SXkYxOTWF69euIrjDi ++ + fTj6hA6B2AE9sK6FpF8wcVk1IKxlxgjIEIAhhzgeP5CuAIbd / 42zILhNCsEo6e2RX0I9YfR / rrPHjRnX3xdHK00WisN5eq bKWqv56H + + + vrRTikoEukqNVqeDj9rGrbtUUAjbYRJObi4vFDB4vlKmy7Dp7nUKpUwRHJv7sneqBtEwVC Atj4 / dv3Lx1d2fAx8myjLrDYV0twe / zuRIDg5fXcj9X134spbd1ULdt8iH1 + vvLV28yVX0DgAOREjBJQlnTnFTq7ezy4ly52XVzPSUAoT2RnoF4PBHzeD3ulZVsYebL548FNT8DIAeg9u / CHw3cvN / OkfEDAAAAAElFTkSuQmCC)}
     [data-beforeAddContent]: vorher {
    	 Inhalt: attr (Daten-beforeAddContent);
    	 Anzeige: Block;
    	 Farbe: rot;
    	 Breite: 100px;
    	 Höhe: 16px;
    	 Grenze: 10px solid schwarz;
     }
    

    Für Ruby on Rails gibt es Jammit , der Bilder in CSS packt und auch ein paar andere Brötchen macht.