selfhtml.de - Alles für den Webmaster!

Anzeige: united-domains - Die ganze Welt der Domains

Tinymce wandelt bilder in code um!

Autor: das
Datum: 27.12.2011 13:12:05

hallo liebes forum,

habe für einen Freund eine Homepage gebaut und ein kleines CMS mit Tinymce. Er wollte dann Bilder einbinden und hat die Bilder von seiner Festplatte ins Tinymce Fenster gezogen. Dabei ist folgender Code entstanden:

[code lang=html]
<img src="data:image/gif;base64,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" alt="" height="123" width="123" />
[/code]

Bedeutet das, dass Tinymce die Bilder in Codes umwandelt? Im Browser werden die Bilder nämlich richtig dargestellt.
Und kann ich ihn das so machen lassen? Oder verlängert das die Ladezeiten und macht den Code "kaputt"?

Danke für Eure Hilfe!

Re: Tinymce wandelt bilder in code um!

Autor: kicia
Datum: 27.12.2011 19:02:49

> Bedeutet das, dass Tinymce die Bilder in Codes
> umwandelt? Im Browser werden die Bilder nämlich
> richtig dargestellt.
> Und kann ich ihn das so machen lassen? Oder
> verlängert das die Ladezeiten und macht den Code
> "kaputt"?

Die Bilder sind base64 codiert in den html code eingefügt. (Du hast uns also gerade das vollständige logo gepostet)
Base64 macht binärdaten (glaub ich) um 50% größer, die datenmenge wäre mit base64 also ein-einhalb mal so groß wie binär.

Ich könnte mir vorstellen, dass die Dateien zusätzlich gefühlt langsamer laden, weil die Seite erst fertig aufgebaut wird, wenn alle bilder geladen sind.
Wenn die bilder verlinkt wären, könnte der Browser die Seite fertig aufbauen, und die Bilder nachträglich laden.

Vorteilhaft wäre diese codierung, wenn man eine einzelne Datei haben will, die alle Daten (incl. bilder) enthält.

Ich vermute, dass das CMS das so macht, weil die Bilder in einer Datenbank gespeichert sind, und der Umweg über das Dateisystem gespart werden soll (das Bild muss so nicht zwischengespeichert und später gelöscht werden, was einiger organisatorischer aufwand ist).

Re: Tinymce wandelt bilder in code um!

Autor: das
Datum: 27.12.2011 19:50:27

> > Bedeutet das, dass Tinymce die Bilder in
> Codes
> > umwandelt? Im Browser werden die Bilder
> nämlich
> > richtig dargestellt.
> > Und kann ich ihn das so machen lassen? Oder
> > verlängert das die Ladezeiten und macht den
> Code
> > "kaputt"?
>
> Die Bilder sind base64 codiert in den html code
> eingefügt. (Du hast uns also gerade das
> vollständige logo gepostet)
> Base64 macht binärdaten (glaub ich) um 50%
> größer, die datenmenge wäre mit base64 also
> ein-einhalb mal so groß wie binär.
>
> Ich könnte mir vorstellen, dass die Dateien
> zusätzlich gefühlt langsamer laden, weil die
> Seite erst fertig aufgebaut wird, wenn alle
> bilder geladen sind.
> Wenn die bilder verlinkt wären, könnte der
> Browser die Seite fertig aufbauen, und die Bilder
> nachträglich laden.
>
> Vorteilhaft wäre diese codierung, wenn man eine
> einzelne Datei haben will, die alle Daten (incl.
> bilder) enthält.
>
> Ich vermute, dass das CMS das so macht, weil die
> Bilder in einer Datenbank gespeichert sind, und
> der Umweg über das Dateisystem gespart werden
> soll (das Bild muss so nicht zwischengespeichert
> und später gelöscht werden, was einiger
> organisatorischer aufwand ist).

ok. wusste gar nicht, dass solche Codes als Bilder dargestellt werden können..
Vielen Dank für die ausführliche Antwort!