Nur für den Fall, dass Sie eines benötigen. Sie können es nach Bedarf strecken, um Platz zu füllen.
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">Oder ein schwarzes
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">
Sehr sehr praktisch!
Wo sollte ich es verwenden?
Vielleicht HTML-E-Mails, aber nur eine Vermutung.
Dadurch wird die Anzahl der Netzwerkanfragen im Vergleich zur Verwendung einer separaten Bilddatei reduziert.
Die Verwaltung einer 1-Pixel-Breite auf einem Sprite-Sheet wird ärgerlich sein.
Funktioniert nicht in mehreren E-Mail-Clients, ist aber für andere Zwecke immer noch nützlich
http://www.campaignmonitor.com/blog/post/1761/embedding-images-in-email
Ich benutze es für ein Posterbild. Das erlaubt mir, mit CSS alles zu gestalten, was ich für das Video möchte, anstatt mich auf ein einzelnes Bild für das Poster zu beschränken.
Ich benutze es für klickbare transparente Ebenen in IE9/10
http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie
Ich benutze es, um einen quadratischen Block nach Höhe zu erstellen. Beispiel: https://jsfiddle.net/Vlad_IT/eme9c2ya/1/
Ich verwende ein transparentes Icon als Cursor für eine meiner Narrowcasting-Lösungen. Auf diese Weise verschwindet die Maus, wenn Sie das Browserfenster fokussieren. Ein sehr schöner Trick. Setzen Sie den Cursor auf 'none' mit einem Fallback auf ein transparentes Bild. Funktioniert plattformübergreifend, browserübergreifend.
Was ist der Zweck des Verbergens des Cursors?
Der Zweck könnte HTML5-Videos sein (Cursor-Verbergung wie bei YouTube).
Vielleicht wäre es nützlich, auch anzuschreiben, wo wir diesen Code verwenden können.
Kann ich ihn mit einem href-Link verwenden, um Klickstatistiken abzurufen?
http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever
Wow, danke, ich benutze es in Kombination mit dem Lazyload jQ-Plugin.
Gute Sache... Aber IE7 unterstützt keine Data-URIs, gibt es dafür eine Alternative?
IE tut es, wenn man es in einem MHTML bereitstellt.
http://www.phpied.com/the-proper-mhtml-syntax/
Danke, aber ich verstehe die Anwendung dieses Codes nicht. Icons von 1x1?
Ich denke, 2x1 wäre weitaus nützlicher.
Ja, der Punkt ist, eine Dateigröße zu erzielen. Jedenfalls können Sie die Datei immer mit den Attributen
heightundwidtherweitern. Dies wäre jedoch nur für HTML-E-Mails nützlich, da die Verwendung von Spacer-GIFs auf Webseiten kein gutes Webdesign ist.Gib eine Demo. Bitte.
Klingt, als gäbe es viele Noobs, die nicht miterlebt haben, wie notwendig der ehrwürdige 1px x 1px transparente GIF-Hack war.
Erinnert mich an die Vergangenheit. Meist schmerzhafte Erinnerungen. :-)
+1 für
Ich fühle deinen Schmerz :-D
Vielen Dank für diesen Code, Chris!!!
Danke!
Sehr geehrter Herr, ich bin mit den Codes hier nicht vertraut. Aber ich denke, dies ist ähnlich wie der CODE, der in FLICKR verwendet wird, wenn wir das Bild speichern, wird es als 1px-Bild gespeichert! Oder wie benutzt man sie?
Sehr sehr praktisch!
Vielen Dank!
Hallo Kumpel, unterstützt Outlook etc. das für EDMs?
Okay Chris, ich gebe nach.
Wie hast du das GIF so klein bekommen?
Ihr
„data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=”
Mein bestes GIF
„data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEHAAEALAAAAAABAAEAAAICTAEAOw==“
Und doppelt so groß meine beste PNG
„data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAA1JREFUeNoBAgD9/wAAAAIAAVMrnDAAAAAASUVORK5CYII=”
;o) s’moike
Hah! Das transparente GIF hat die gleiche Anzahl Bytes wie das, das ich seit 2007 benutze. Binäre Daten unterscheiden sich jedoch geringfügig.
Ein möglicher Verwendungszweck dafür: Ersetzen des transparenten GIFs in der ersten hier beschriebenen Methode hier, um Text vertikal in einem div zu zentrieren.
Obwohl sehr spezifisch, aber wirklich hilfreich.
Ich war gerade dabei, diesen Code zu generieren, aber ich bin froh, dass ich diesen Artikel gefunden habe. In meinem Fall habe ich eine mobile Anwendung, die ein Bild hat. Der Quellwert des Bildes wird dynamisch gesetzt, und ich muss auf ein Platzhalterbild verweisen, während die Anwendung die endgültige Bild-URL bestimmt. Wenn der Quellwert nicht gesetzt ist, zeigen einige Browser ein hässliches Symbol (kaputte oder fehlende Ressource), aber ein kleines transparentes Bild als Zeichenfolge verhindert das Symbol für ein kaputtes Bild und spart eine HTTP-Anfrage.
Ziemlich praktisch! Danke für das Posten.
Hallo, womit haben Sie die codierten GIFs generiert? Ich hätte gerne eines in einer anderen Farbe (#ccc), aber nachdem ich ein Online-Tool verwendet habe, um eine 1px GIF-Datei in eine Data-URI zu konvertieren, ist das Ergebnis viel größer als Ihr Beispiel.
Sie können diesen Online- Data URI Generator verwenden.
Ich verstehe es nicht ganz. Wo sollte ich es verwenden?
Dies kann auch zur Erkennung der Browserunterstützung für Data-URIs verwendet werden. Siehe http://weston.ruter.net/2009/05/07/detecting-support-for-data-uris/
Zum Beispiel verwenden Modernizr und Grunticon dies.
Falls jemand einen halbtransparenten Base64-kodierten PNG-Pixel als CSS RGBA-Fallback benötigt. Siehe http://px64.net
Nur um ein nützliches Anwendungsbeispiel zu teilen
Eigenständige Bilder! (+jQuery)
Stellen Sie sich vor, Sie möchten eine beliebige (!) Breite/Höhe für ein Bild festlegen, aber ohne das Bild zu dehnen?!
Einfach so:
img style="width:150px; height:150px;" class="self-contained" src="img.jpg"Was ich erstellt habe, war, das transparente PNG als Bild-
srcfestzulegen (um zu verhindern, dass der Browser das Symbol für ein fehlendes Bild anzeigt), dann den Bild-srcauf denIMG-backgroundzu übertragen undbackground-sizeaufcoverzu setzen.Hier ist eine Demo zum Testen und Ausprobieren: http://jsbin.com/self-contained-images/1/edit
Es tut mir leid, aber ich verstehe nicht, wofür das gut ist?
Sehr hilfreich ..
Ich habe es als Quelle für meine CSS-Sprites verwendet...
:)
Ich habe PNG auf 41 Bytes für 1x1px optimiert.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQ
Habe eine Weile versucht, ein GIF unter 14 Bytes zu bekommen, aber ich habe das Gefühl, es ist so klein wie möglich. Hier sind einige Tests:
data:image/gif,GIF89a,%C2%B3%00%C3%BF%C3%BF
1px mal 8256
data:image/gif,GIF89a%01%00@%20%FC%87%E4%10
16.684 × 16.705
data:image/gif,GIF89a,AAAAAAE
16.684 × 16.705
data:image/gif,GIF89a,AAAAAAEAAQAA
11.265 × 16.705
data:image/gif,GIF89a,AAAAAAEAAQAA
257 × 11.265
data:image/gif,GIF89a%01,AAAAAAEAAQAA
257 × 257
data:image/gif,GIF89a%01%01%01,AAAAAAEAAQAA
Ich mag es, wenn die Breite 100% und die Höhe automatisch sind, damit sich die Dinge einfach skalieren. Ich wollte kein GIF mit den richtigen Abmessungen für die automatische Skalierung erstellen, also hier, Leute.
https://github.com/sebringj/jquery-transparent-gif
Ich habe herausgefunden, dass es mit CSS-Padding auf einem leeren Element für das Seitenverhältnis einfacher ist https://css-tricks.de/easier-aspect-ratio-elements/
doh!
Hier ist ein kostenloser Base64 CSS-Generator aus einem Bild.
http://www.base64css.com
Ich denke, es wird jemandem helfen.
Es wäre nett und menschlich, wenn einer von Ihnen Profis den Noobs helfen würde. Denken Sie daran, dass Sie selbst einmal ein Noob waren, es ist nicht nett, über Noobs zu lachen, oder? Bitte erklärt den Noobs jemand, was diese Funktion tut, eine freundliche Tat hat eine große Wirkung.
Welche Funktion?
Schöner Artikel, sehr hilfreich.
Ich habe diese Website zum Kodieren/Dekodieren verwendet.
zum Testen.
http://www.ebase64encode.org
Cool, sehr nützlich.
In welchen Fällen haben Sie es verwendet?
Sehr gut!
Ich verwende eine transparente 1x1-GIF-Datei als Dummy-Bild, um das Google Structured Data Testing Tool zufriedenzustellen, auch wenn ein Blogbeitrag wirklich kein Bild hat. :)
Die Leute wollen ein weißes.
Gebt uns ein weißes! :)
Oh, egal... Ich mache mir eins... :-(
Großartig zum Tracking, oder? BlueGriffon generiert sie auch (obwohl ich mir nicht sicher bin, wie effizient).
Leute! Es ist jetzt 2016 und eingebettete transparente Pixel? Wie, wo? CodePen, vielleicht?
Das PNG Pixel Tool http://png-pixel.com/ generiert die Base64-kodierte Darstellung eines benutzerdefinierten transparenten Bildes.
Großartig!
Falls jemand diesen Artikel noch besucht und neugierig auf einen Anwendungsfall ist...
Ich verwende es als Inline-HTML-Platzhalter für asynchrone Bilder. Ich setze 'data-src' auf die tatsächliche URL, die ich möchte, und 'src' auf dieses kodierte GIF.
Es ist winzig und Inline, sodass ich mir keine Sorgen um kaputte Links machen muss, wenn die Seite zuerst geladen wird, bevor JavaScript übernimmt und 'src' durch 'data-src' ersetzt.
Ich hätte es auch auf ein kodiertes Lade-GIF setzen können.
Hier ist der Link
Hallo
Meine Seite läuft im HTTPS-Protokoll und sendet mir die folgende Fehlermeldung. Kann ich Sicherheit zum src hinzufügen?
Gemischter Inhalt: Die Seite unter 'https://www.page.com/home' wurde über HTTPS geladen, hat aber ein unsicheres Bild angefordert 'data: image / gif; base64, R0lGODlhAQABAAAAACw ='. Dieser Inhalt sollte auch über HTTPS geladen werden.
Dies ist meine Aussage:
<img class = “lb-image” src = “http: // data: image / gif; base64, R0lGODlhAQABAAAAACw =” /
Hallo!
Das Problem ist der Teil 'http' in Ihrem
<img>'src'-Attribut, denn obwohl die Seite sicher geladen wurde, versucht der Browser, eine Bildquelle zu laden, die es nicht ist.Aber! Das Großartige an diesem GIF ist, dass Sie kein 'http' oder 'https' benötigen, da alle Bilddaten in diesem String enthalten sind.
Versuchen Sie dies (Ihre bereitgestellte Kodierung):
<img class = “lb-image” src="data:image/gif;base64,R0lGODlhAQABAAAAACw =">Oder dies (das Beispiel-GIF von oben):
<img class = “lb-image” src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">