Wie man Bilderpfade in CSS basierend auf base64 kodiert?

habe ich mit Standorten vor kurzem festgestellt, die ihre Website Vermögen (Logo, Ressourcen Fotos) wie unten sind:Wie man Bilderpfade in CSS basierend auf base64 kodiert?

background: url("data:image/gif;base64,R0lGODlhbAAbAMQAADRNU////8PAvwCq3KunpYeCf+fm5RSGp3BpZgDW7tvZ2WRdWaCbmVhQTRSltPPy8re0sszMzHt1cgDs9xTBwJOOjBCNsgC/5TRZWBDOzd7e1vf39xCduYiCgEA3MwAAACH5BAEHAB4ALAAAAABsABsAAAX/oCeKDaEEaGBA0ui+cCzPdG3fM5HuqYHgQBtvNAzCeClZ44REdozQV9EzjVKbMl2zubBGp9UvFtZAKgiQCBLihYJ37SsyxuD9RgheJB58J9tbMWopbC55O3t8gHCKYSKDKAwvDQ87kopejlaakCoNLwsGKASYi398mlo9LUANDBGVKixHcx4VTAoMn3IoRFsBChW7SgSivzELTQbCNqpIBqwiTUtr0oy8Ww9PMc7HMQK /AndkTL8B29go5UV+5gGXLhDup5PrSBHjI90BEcY7u /N6WDsVEAU6D3UK0tjHg9SIMjsI7JLQ0EWTfpYG9tLo7sEuSgUD1Ggg71chD84E/7igiMgijwoeGoBb5ovgtQYSOr0TUYGHAgldON5oUMGfHRHrhnlgSchlCngx2ol8YdTAox0epVy7saDkDpW8FMBYl0+T043YYCT8EwvFyZpoXWhRcFAEgrYbW05KEyGaUBpSYRz6wwPqXxdrgcXowC6FWCBm4U5N+6Ino4paUTwYq2nwxnVBb0Q+7MirCqQ7HjtVoJTjZBeW/zhjjWM05dsiku0oZDqA3ytZMVDIQAGDB6P8JOxakDgAWM8BHhDIJ8N24BEd8Aa4wxgrM2ukMEwYPx5D83nodHpLt5X95JBgRSBv8sNBgvv3HVArmIiE9kCutQege0hkNQJTv/zAwV8FDDLIQUzqNUGbC6HMI1kYAwb0QGgjxLbFDwcMIKKIB4xQwHwRKdFbLQS+5t6F97SG3X9PeQDAiCIC8IIEBEBigADfzUCUACjCSM+LAWomQF1kVIAREjABcIAFB+gYAgA7") no-repeat scroll 0 0 transparent;

Wie kann das? und wie können wir diese Kodierung auf unserer Seite machen?

EDIT
Am nicht wirklich an diesem Punkt gut, wenn es möglich ist, bitte ein wenig mehr helfen, die Antwort zu bekommen, codierte ich mein Bild ein bekam den Code, der zu lang ist ca. 2 Seiten jetzt habe ich hinzugefügt das in css aber keinen erfolg bekommen !! (hilft das übrigens bei der Verbesserung der Leistung?)

Quelle

2012-04-15 ALH

Es ist base64-Codierung. Es ist keine Verschlüsselung. –

und wie können wir das für uns selbst tun? – ALH

-1

Die Quelle des Bildes wird nur mit BASE-64 codiert. Es ist schneller. Wenn Sie diese Verwendung decodieren möchten, z.B. http://www.motobit.com/util/base64-decoder-encoder.asp und wählen Sie Export nach .bin Datei. Speichern Sie die Erweiterung in .gif und voila. :)

Wie ich schrieb, ist es schneller, aber weniger bequem meiner Meinung nach.

Quelle

2012-04-15 03:21:23 Kobra

was? Warum müssten Sie die Erweiterung zu .gif ändern? base64-codierte Daten können in den Kontext oberhalb von –

eingebettet werden. Ich weiß, aber wenn Sie nur kopieren, dass das Bild beschädigt wird (es gibt Zeichen, die Sie nicht wie NULL kopieren können). Sie müssen also die gesamte Datei exportieren - mit diesen Zeichen. aber warten .. worüber sprichst du? : D – Kobra

Die Behauptung, dass es schneller ist, nehme ich an, basiert auf der Tatsache, dass es weniger HTTP-Anfragen gibt ... aber weiß jemand, ob base64 Bilder vom Browser zwischengespeichert werden? Wenn nicht, wäre das ein sehr ernstes Leistungsproblem. – sethcall

Wie oben erwähnt, ist es nicht Verschlüsselung, sondern Kodierung; Im Grunde ist es die gleiche Ressource, auf die Sie normalerweise verweisen würden, die extern in das css eingebettet wird. Sie können versuchen, eine selbst zu machen oder one of the numerous tools available online zu verwenden; wiki article ist überraschend gründlich.

Obwohl es keinen Inhaltsschutz bietet (d. H. Jeder kann die Datei noch speichern), bietet es bei korrekter Anwendung einige Vorteile. Das wichtigste sind weniger http-Anfragen - anstatt jede einzelne Bildressource anzufordern, werden sie bereits alle heruntergeladen! Nur nicht dump alle Ihre Website-Grafiken in die CSS-Datei und bleiben Sie mit den Elementen, die auf fast jeder Seite verwendet werden.

IMO, ein weiterer großer Vorteil ist eine einfachere Ressourcenverwaltung. Anstatt kleine Symbole zu verwenden, arbeiten Sie effektiv mit einzelnen Grafikdateien (keine Hintergrund-Artefakte usw.) - aber Sie werden nicht dafür mit erheblichen Dateigrößen-Overhead bestraft (empfohlen wird, dass nur 3% mit gzip aktiviert sind).

Grundsätzlich unterstützen alle Browser außer IE7 die Methode zu einem gewissen Grad. Es gibt einige weitere Einschränkungen hinsichtlich des Inhaltstyps/der Größe (z. B. max. 32kb für IE8).

Quelle

2012-04-15 03:33:51

Wie man Bilderpfade in CSS basierend auf base64 kodiert?

Antwort

Verwandte Themen