Etwas off-topic: Base64-Bilder

    Joomla Version
    Joomla 6 aktuellstes
    PHP Version
    PHP 8.4.x
    Hoster
    IONOS

    Meine folgende Frage ist nicht Joomla-spezifisch, ich vertraue einfach darauf, dass sich hier viele erfahrene Menschen herumtreiben.

    Ich transferiere für einen Verein eine uralte Website-Baker Installation nach Joomla. Dabei sind mir sehr viele Bilddateien untergekommen, zu denen es keine Datei gab. Ich konnte sie nur von der alten Webseite auf den Desktop ziehen, um sie fassbar zu machen.
    Sie entpuppten sich schließlich als "Base64"-codiert, also als riesiger Buchstaben- & Zahlenhaufen.

    Laut Betreuerin der Website stammen sie wohl inkl. Texten von Vereinsmitgliedern und wurden von ihr per Kopieren & Einfügen in den Website-Baker übertragen.

    Meine Fragen sind:

    • Hä? Wer verschickt denn Texte mit Base64-Bildern und warum?
    • Passiert das automatisch, z.B. beim Einbetten in eine Textverarbeitung (Win oder Mac)?
    • Oder beim Versand über Mail, Whatsapp und Co?
    • Konnte das der Website-Baker vor Jahren nicht besser?
    • Oder klickt der Versender der Datei absichtlich auf irgendetwas, was er z.B. für besonders richtig hält?

    Klärt mich bitte auf!

    Liebe Grüße
    Ute

    Vielleicht auch noch eine Idee, wo du fragen könntest.

    forum.websitebaker.org

    Im Detail von einer KI.
    Für große Bilder oder normale Webseiten gilt aber:
    klassische Bilddateien sind fast immer die bessere Wahl.

    Spoiler anzeigen

    Base64-Bilder sind Bilder, die nicht als „normale“ Datei (z. B. JPG oder PNG) gespeichert oder übertragen werden, sondern als reiner Text codiert sind. Das hat ein paar konkrete Vorteile – aber auch Nachteile.

    Vorteile von Base64-Bildern

    1. Einfach in Text integrierbar
    Du kannst ein Bild direkt in HTML, CSS oder JSON einbetten, ohne separate Datei:

    Code
    <img src="data:image/png;base64,..." />

    → Praktisch für kleine Icons oder eingebettete Assets.

    2. Weniger HTTP-Requests
    Da kein extra Datei-Download nötig ist, kann das Laden einer Webseite schneller werden (vor allem bei vielen kleinen Bildern).

    3. Unabhängig von Dateipfaden
    Keine Probleme mit relativen/absoluten Pfaden oder fehlenden Dateien – alles steckt direkt im Code.

    4. Leichter Transport
    Base64 ist reiner Text → funktioniert problemlos in APIs, E-Mails oder Datenbanken, die keine Binärdaten mögen.

    Nachteile (wichtig!)

    1. Größer als Original
    Base64 bläht Daten um etwa ~33 % auf → mehr Speicher und Bandbreite.

    2. Kein Caching durch Browser
    Normale Bilder können vom Browser zwischengespeichert werden – Base64-Bilder nicht separat.

    3. Schwerer zu warten
    Der Code wird schnell unübersichtlich, wenn große Base64-Strings drin sind.

    4. Performance kann leiden
    Bei großen Bildern ist Base64 meist langsamer als normale Dateien.

    Fazit

    Base64 lohnt sich vor allem für:

    • kleine Bilder (Icons, Logos)
    • Inline-Verwendung (z. B. in CSS)
    • spezielle Fälle wie APIs oder E-Mails

    Für große Bilder oder normale Webseiten gilt aber:
    👉 klassische Bilddateien sind fast immer die bessere Wahl.

    Wenn du willst, kann ich dir zeigen, wann genau man Base64 sinnvoll einsetzt (z. B. konkrete Beispiele aus Webprojekten).

    Nunja, die Geschichte hat mehrere Aspekte - historische und auch aktuelle:

    Base64 – Wikipedia

    Konvertieren und Einbauen - Phlow
    Dieser Artikel erklärt Dir was Base64-Bilder sind, wie Du es in CSS und HTML-Dateien direkt einbauen kannst und wie Du die Bilder selbst erstellst.
    phlow.de
    Was ist Base64 und was bringt es? » fastWP
    Im folgenden Artikel erklären wir euch um was es sich bei "Base64" handelt, was es bringt und wie Ihr es einsetzen könnt.
    fastwp.de

    | Gruss von {CurlY BracketS} aka Chris | JUG Zürich |

    Zu mindest bis noch gar nicht so lange her: Wenn du in einen Joomla-Editor per Drag&Drop ein Bild fallen lässt, wirds so ein Monster-Code. Viele fanden das suuuuperpraktisch und deshalb gibts auch noch reichlich(meist alte) so Seiten.

    Ich persönlich bin dann so nett, bei dem Kunden die Monster-Code-Bilder runterzuladen und als echte Bilder abzuspeichern/anzulegen. Dann deaktiviere ich das Drag&Drop-Feature und harre der Dinge, obs wer merkt, sozusagen und bin natürlich präpariert, was meine Argumente sind. Meist reicht schon dieser unübersichtliche HTML-Code, der in bestimmten Situationen einfach kaum zu handeln ist..

    Danke an Stef und CurlY BracketS! Wieder was zugelernt.

    Re:Later Das klingt sehr wahrscheinlich! Es passt genau zu der beschriebenen Arbeitsweise der Web-Beauftragten.

    Die lästigen MS-Office-Formate kann der JCE-Editor ja glücklicherweise wegputzen.

    Zitat von Re:Later

    Ich persönlich bin dann so nett, bei dem Kunden die Monster-Code-Bilder runterzuladen und als echte Bilder abzuspeichern/anzulegen. Dann deaktiviere ich das Drag&Drop-Feature und harre der Dinge, obs wer merkt, sozusagen und bin natürlich präpariert, was meine Argumente sind.

    Cool! Mache ich beim Transfer derzeit auch so, aber es ist doch viel Zusatzarbeit.

    Wie / wo kann man Drag&Drop deaktivieren?

    LG, Ute