Base64 Promt

Baut per Prompt eine clientseitige Base64-Bild-Konverter-Webapp ganz ohne Backend und Bild-Upload.

Der Prompt

You are a senior front-end web developer with strong expertise in Base64 image encoding, HTML rendering, and UI/UX design. Create a single-page, fully client-side web application using pure HTML, CSS, and vanilla JavaScript only (preferably in one HTML file, no backend, no external libraries) with a modern, fully responsive, dark black theme. The site must correctly convert images (JPG/PNG/WEBP) to Base64 and ensure the output works in any HTML editor preview, meaning the app must provide both the raw Base64 Data URL and a ready-to-use HTML <img> tag output (e.g. <img src="data:image/jpeg;base64,..." />) so that pasting the HTML snippet into an editor visually renders the image instead of showing plain text. Include two main flows: Image to Base64 (upload or drag-and-drop image, instant in-app preview, correct MIME detection, copy buttons, optional download as .txt) and Base64 to Image Preview (users paste a Data URL or raw Base64, click a Preview button, and see the image rendered, with automatic MIME correction and clear validation errors). The header must display the title “Convert images ↔ Base64 with HTML-ready output”, and directly underneath it show “prompts.chat” in bold, phosphor green color, linking to https://promts.chat. The footer must replace any default text with “2026” in bold, phosphor green, linking to https://promts.chat . The overall UI should be dark black, while all primary buttons use a dark orange color with subtle glow/hover effects, smooth transitions, rounded cards, clear section separation (tabs or cards), accessible contrast, copy-success feedback, handling of very long Base64 strings without freezing, and perfect usability across desktop, tablet, and mobile.

So nutzt du es

Den Prompt-Text kopieren (Button oben) und als System-Prompt bzw. erste Nachricht in ChatGPT, Claude oder einem lokalen Modell einfügen. In ChatGPT lässt er sich unter „Anweisungen für ChatGPT“ dauerhaft hinterlegen.

Der Prompt-Text ist englisch — er funktioniert trotzdem in deutschen Unterhaltungen. Für deutsche Antworten einfach am Ende ergänzen: „Antworte auf Deutsch.“

Im Detail

Detaillierter Entwickler-Prompt für eine einzige, backend-lose HTML-Datei mit reinem HTML/CSS/JavaScript, die Bilder zu Base64-Data-URLs konvertiert und umgekehrt Base64 wieder als Bild anzeigt – inklusive Drag-and-Drop, MIME-Erkennung, Kopier-Buttons und dunklem Theme. Der eigentliche Mehrwert gegenüber x-beliebigen Online-Convertern: Da alles clientseitig im Browser läuft, verlassen die Bilder nie das Gerät, was ein echter Datenschutzvorteil ist. Praktisch für Entwickler, die Bilder direkt in HTML oder E-Mails einbetten wollen, ohne externes Hosting. Zu bedenken: Base64-kodierte Bilder werden rund ein Drittel größer als das Original, was bei vielen eingebetteten Bildern die Ladezeit spürbar erhöht.

Praxis-Tipp

Lassen Sie sich zusätzlich eine Größenwarnung einbauen, da Base64 Bilder etwa 33 % größer macht als das Originalformat.

Lizenz & Quelle

• Lizenz: CC0-1.0 (Public Domain)
• Quelle: awesome-chatgpt-prompts (GitHub)

Lade …