Informationen für CMS/made simple

cyberman · 09. September 2016 07:42

Vor einigen Jahren wurde hier mal ein Plugin veröffentlicht, mit dem sich Bilder in Data URLs konvertieren lassen.

https://www.cmsmadesimple.de/forum/view … 2859#p2859

Hab es gerade mal für ein Kundenprojekt rausgekramt, etwas aktualisiert und zu einem vollwertigen CMS/ms-Plugin transformiert (also mit Hilfe-Text wink ).

https://dl.orangedox.com/vxbbHwE9nAwkB1 … _image.zip

Einfach auf den Server in das /plugins Verzeichnis hochladen und gut ist.

Und für alle, die nicht wissen, wofür das Plugin gut ist, hier mal ein kleiner Auszug aus der Hilfe

Das Plugin erzeugt aus einem beliebigen Bild in den Formaten JPEG, PNG und GIF eine Base64 kodierte Variante (=String). Damit lässt sich die Performance einer Webseite erhöhen, da nicht mehr für jedes einzelne Bild eine Anfrage beim Server erforderlich ist, sondern die Bilder in den regulären HTTP-Datenstrom eingebettet werden (siehe Data URL's).

owr_web · 18. September 2016 12:35

Hätte da mit einer Zeile Änderung und anschließendem Test die '(bei mir) funktionierende Version für V2.x:

Hab sie der Übersichtlichkeit halber im Code auch als V2.0 tituliert mit Hinweis auf die Anpassung:

https://dl.orangedox.com/ZzuADW2vfrj8FtRBUg

Janl · 19. September 2016 08:58

Danke!

Wenn das ebenso mit SVG möglich wäre, könnte bei grösseren Grafiken viel gewonnen werden.

Was glaubt ihr, geht das oder gibt es dann Probleme mit Versionen in SVG und Browser-Unterstützung?

MfG
Jan

NaN · 19. September 2016 12:14

Lies mal hier: https://css-tricks.com/probably-dont-base64-svg/ (english)
SVG muss nicht Base64 kodiert werden. Es ist ja bereits XML - also "plain Text".
D.h. das hier sollte ausreichen:

... data:image/svg+xml;utf8,<svg ...> ... </svg> ...

IE 10/11/Edge sollen damit aber Probleme haben (wegen XML in HTML), soll sich aber mit einem Trick umgehen lassen, indem man die SVG-Daten URL-Kodiert:

... data:image/svg+xml;utf8,%3Csvg ... %3E ... %3C/svg%3E ...

cyberman · 19. September 2016 12:27

Der Name des Plugins ist in gewisser Weise irreführend - grundsätzlich sollte sich damit jede Datei base64-kodieren lassen.

Von daher sollte es auch mit SVG-Dateien funktionieren, siehe die hier angegebene Alternative

https://wiki.selfhtml.org/wiki/SVG/Einb … ung_in_CSS

Grrmmll, zu langsam gewesen ...

Beitrag geändert von cyberman (19. September 2016 12:30)

cyberman · 19. September 2016 12:34

NaN schrieb:

IE 10/11/Edge sollen damit aber Probleme haben (wegen XML in HTML), soll sich aber mit einem Trick umgehen lassen, indem man die SVG-Daten URL-Kodiert:

Würde nicht auch eine base64 Kodierung IE & Co "austricksen"?

NaN · 19. September 2016 12:55

Würde nicht auch eine base64 Kodierung IE & Co "austricksen"?

Ja schon, aber wie im Artikel schon steht, wären die SVG-Daten dann ca. um 1/3 größer als nötig. Und wenn man bedenkt, dass man diese ganze base64-Sache ja größtenteils aus Performancegründen macht, warum also etwas base64 kodieren, was nicht kodiert werden muss. Die URL-Kodierung macht das SVG zwar auch etwas größer, aber das ist m.M.n. zu vernachlässigen. Dafür funktionert es aber bei allen Browsern.

#1 09. September 2016 07:42

Re:

#2 18. September 2016 12:35

Re:

#3 19. September 2016 08:58

Re:

#4 19. September 2016 12:14

Re:

#5 19. September 2016 12:27

Re:

#6 19. September 2016 12:34

Re:

#7 19. September 2016 12:55

Re:

Fußzeile des Forums