Tutorial

🧠 Warum überhaupt Base64?

Base64-codierte Bilder kannst du direkt in dein HTML oder CSS einbetten – ganz ohne extra HTTP-Requests. Das spart Ladezeit bei kleinen Bildern und macht deine Seiten schneller. Ideal für:

•Einfache One-Page-Demos oder Mockups 🧩

•HTML-E-Mail-Signaturen, bei denen keine fiesen „Bilder anzeigen“-Meldungen mehr auftauchen 💌

•Kompakte Projekte, bei denen du alles in einer Datei brauchst

🖼️ Unterstützte Bildformate

Unser Tool kommt mit den gängigsten Bildformaten klar:

.jpg, .jpeg, .png, .gif, .webp, .svg und .bmp ✅

Wenn dein Bild eins davon ist – let’s go!

🚀 So einfach funktioniert’s

Du kannst ganz easy:

• Bilder per Drag & Drop ins Tool ziehen
• Oder auf den Upload-Button klicken

Sobald dein Bild hochgeladen ist:

✅ Grüner Balken = alles top, Bild erfolgreich in Base64 umgewandelt
❌ Roter Balken = irgendwas lief schief – Fehlermeldung kommt sofort

Du kannst bis zu 20 Bilder auf einmal verarbeiten – ganz entspannt 💪

🔗 Base64 als -Bildquelle nutzen

Den Base64-Code kannst du direkt in dein HTML einfügen – zum Beispiel für Logos, Icons oder kleine Bilder:

				
					
<img loading="lazy" decoding="async" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQE..." width="100" height="80" alt="Tooltastic Test">

🎨 Base64 als CSS-Background verwenden

Auch als CSS-Hintergrundbild macht sich der Base64-Code richtig gut. Zum Beispiel so:

				
					.my-tooltastic-class {
    background: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQE...');
}

Einfach kopieren, einfügen – fertig! 🧑‍🎨

Und auch hier: Ein Klick auf „Show Code“ bringt den passenden CSS-Schnipsel direkt zu dir 📋