Base64-Bilder in JSON-API-Antworten debuggen

Das Base64-Problem in JSON

Multimodale KI-APIs (Bildgenerierung, OCR, Sprachsynthese) liefern Medieninhalte häufig als Base64-kodierte Strings innerhalb von JSON-Antworten zurück. Herkömmliche JSON-Viewer behandeln diese als reinen Text – übrig bleiben endlose Zeichenketten ohne jede Möglichkeit, den eigentlichen Inhalt zu überprüfen.

Der übliche Ablauf ist umständlich: das Base64-Feld finden, den String kopieren, eine separate Decoder-Website öffnen, einfügen, dekodieren und herunterladen. Für ein einzelnes Feld bereits lästig; enthält die Antwort mehrere Base64-Werte, wird es zum echten Engpass.

Typische Struktur einer KI-API-Antwort

Hier ein vereinfachtes Beispiel einer DALL·E-Bildgenerierungsantwort mit mehreren Variationen:

{
  "created": 1709055842,
  "data": [
    {
      "b64_json": "iVBORw0KGgoAAAANSUhEUgAAA...",
      "revised_prompt": "A serene mountain landscape at sunset"
    },
    {
      "b64_json": "iVBORw0KGgoAAAANSUhEUgBBB...",
      "revised_prompt": "A serene mountain landscape at sunrise"
    },
    {
      "b64_json": "iVBORw0KGgoAAAANSUhEUgCCC...",
      "revised_prompt": "A serene mountain landscape at noon"
    }
  ]
}

Jedes "b64_json"-Feld enthält ein vollständiges PNG-Bild in Base64-Kodierung. In einem herkömmlichen JSON-Viewer sehen Sie drei riesige Textblöcke. Sie können sie weder betrachten noch vergleichen, geschweige denn sicherstellen, dass es gültige Bilder sind – ohne jeden einzelnen String separat zu dekodieren.

Ein besserer Weg: Automatische Erkennung und integrierte Vorschau

ViewJSON erkennt Base64-kodierte Medien in Ihrem JSON automatisch und rendert sie als integrierte Vorschauen: Bilder als Thumbnails, Audio als Player, Videos als eingebettete Player und PDF als Dokumentvorschauen.

Wie funktioniert die Erkennung?

ViewJSON rät nicht anhand von Feldnamen oder String-Längen. Stattdessen verwendet es die Magic-Number-Erkennung – dieselbe Technik, die Betriebssysteme zur Identifizierung von Dateitypen einsetzen.

Der Ablauf ist einfach:

1. Für jeden String-Wert in Ihrem JSON dekodiert ViewJSON nur die ersten 64 Bytes des Base64-Inhalts
2. Diese Bytes werden mit einer Bibliothek bekannter Dateiformatsignaturen (Magic Numbers) verglichen
3. Bei einem Treffer (z. B. 89 50 4E 47 für PNG oder FF D8 FF für JPEG) wird die entsprechende Vorschau gerendert

Diese Methode ist extrem schnell. Selbst ein 100-MB-Base64-String wird in unter einer Millisekunde identifiziert, da nur die ersten 64 Bytes zur Erkennung dekodiert werden. Der vollständige Inhalt wird erst beim Öffnen der Vorschau dekodiert.

Unterstützte Formate

ViewJSON erkennt und zeigt derzeit über 15 Medienformate in der Vorschau:

Schritt für Schritt: API-Antwort debuggen

1. ViewJSON öffnen — Besuchen Sie viewjson.net
2. JSON einfügen — Kopieren Sie die vollständige API-Antwort aus Ihrem Terminal, Postman oder Code und fügen Sie sie in den Editor ein. Fehlerhaftes JSON (abschließende Kommas, Kommentare, Schlüssel ohne Anführungszeichen) wird automatisch repariert.
3. Vorschauen prüfen — Base64-Felder werden automatisch erkannt. Klicken Sie auf das Augen-Symbol (👁) neben einem erkannten Medienfeld, um die integrierte Vorschau ein- oder auszublenden.
4. Ergebnisse vergleichen — Mit allen sichtbaren Vorschauen können Sie durch das JSON scrollen und mehrere Bilder nebeneinander vergleichen, ohne zusätzliche Werkzeuge.
5. Mit dem Team teilen — Nutzen Sie die Teilen-Schaltfläche, um eine komprimierte URL mit der JSON-Struktur zu erzeugen. Beachten Sie, dass sehr große Base64-Daten im geteilten Link aufgrund von URL-Längenbeschränkungen gekürzt werden können.

Wann ist es besonders nützlich?

• DALL·E- / Stable-Diffusion-Ausgaben prüfen — Bildgenerierungs-APIs liefern oft mehrere Variationen in Base64. ViewJSON zeigt alle Bilder nebeneinander, sodass Sie die beste auswählen können, ohne jedes einzeln zu dekodieren.
• OCR-Zuschnittbereiche inspizieren — Batch-OCR-Pipelines liefern dutzende zugeschnittener Bildregionen in Base64. Die integrierte Vorschau macht fehlerhafte Zuschnitte oder Verschiebungen sofort sichtbar.
• TTS-Stimmenvariationen vergleichen — Beim Testen verschiedener Stimmen oder Sprechstile in Sprachsynthese-APIs können Sie jeden Audioclip direkt im JSON abspielen und vergleichen.
• HTTP-Aufzeichnungen überprüfen — Fügen Sie JSON aus dem Anfrageverlauf von Postman oder Fiddler ein, um die tatsächlich gesendeten oder empfangenen Medien zu sehen, anstatt sich durch kodierte Zeichenketten zu scrollen.

Datenschutz

Die gesamte Verarbeitung findet in Ihrem Browser statt. Ihr JSON und Ihre Base64-Daten werden niemals an einen Server gesendet – das macht ViewJSON sicher für proprietäre API-Antworten und sensible Inhalte.