PixelRAG im Test: RAG mit visuellen Modellen — Webseiten „sehen" wie ein Mensch
TL;DR: PixelRAG ist ein Open-Source Visual-RAG-Framework, das 2026 vom UC Berkeley-Team veröffentlicht wurde. Es parst kein HTML, sondern rendert Webseiten als Screenshots und verwendet ein visuelles Einbettungsmodell (Qwen3-VL-Embedding), um Antworten direkt auf Pixelebene abzurufen. Die Arbeit hat einen vollständigen Index für 8,28 Mio. Wikipedia-Artikel erstellt, und GitHub hat bereits 9.600+ Sterne. Dieser Artikel behandelt technische Prinzipien, den Vergleich mit traditionellem RAG, lokale Bereitstellungspraxis und Effektivitätsbewertungen.
1. Was ist PixelRAG: Ein neues Paradigma für visuelles RAG
Traditionelle RAG-Pipelines (Retrieval-Augmented Generation) funktionieren so: HTML crawlen → reinen Text mit BeautifulSoup/Trafilatura extrahieren → in Chunks aufteilen → Text-Embedding-Modell erzeugt Vektoren → relevanteste Chunks abrufen → an LLM zur Antwortgenerierung füttern.
Diese Pipeline basiert auf einer grundlegenden Annahme: Alle Informationen einer Webseite existieren im Text. Aber die Realität sieht ganz anders aus.
PixelRAG stammt vom Sky Computing Lab und BAIR der UC Berkeley, unter gemeinsamer Leitung von Matei Zaharia (Vater von Apache Spark) und Joseph E. Gonzalez. Der Kerngedanke ist äußerst prägnant:
Anstatt Websites in reinen Text zu parsen, mache einfach Screenshots und lass das visuelle Modell Antworten aus den Pixeln abrufen.
Dies ist keine schrittweise Verbesserung, sondern ein Paradigmenwechsel — von „Text parsen" zu „Visuelles verstehen".
1.1 Kerndaten
| Metrik | Daten |
|---|---|
| GitHub Sterne | 9.600+ (August 2026) |
| Paper | arXiv:2606.28344 |
| Indexgröße | 8,28 Mio. Wikipedia-Seiten |
| Einbettungsmodell | Qwen3-VL-Embedding-2B (LoRA-feinabgestimmt) |
| Vektor-Engine | FAISS / Qdrant |
| Lizenz | Apache 2.0 |
| Python-Version | ≥ 3.12 |
| Online-Demo | pixelrag.ai |
2. Warum HTML-Parsing Informationen verliert
Bevor wir in die technischen Details von PixelRAG eintauchen, schauen wir uns ein konkretes Beispiel an. Angenommen, Sie haben eine Webseite mit einer Tabelle:
| Modell | Parameter | MMLU-Score |
|------------|-----------|------------|
| GPT-4 | ~1,8T | 86,4% |
| Claude 3 | ~200B | 86,8% |
| Qwen2.5 | 72B | 85,3% |
Wenn Sie diese Tabelle mit Trafilatura oder BeautifulSoup extrahieren, erhalten Sie normalerweise:
Modell Parameter MMLU-Score GPT-4 ~1,8T 86,4% Claude 3 ~200B 86,8% Qwen2.5 72B 85,3%
Die strukturellen Informationen der Tabelle — Zeilen-Spalten-Beziehungen, Ausrichtung — sind vollständig verloren. Wenn ein Benutzer fragt „Was ist der MMLU-Score von Claude 3?", kann Text-RAG dies vielleicht aus dem Kontext ableiten. Aber wenn die Tabelle komplexer ist, mit zusammengeführten Zellen, verschachtelten Kopfzeilen oder seitenübergreifenden Tabellen, brechen Textparser vollständig zusammen.
2.1 Typische Szenarien, in denen HTML-Parsing Informationen verliert
| Szenario | HTML-Parsing-Ergebnis | Visuelle Erhaltung |
|---|---|---|
| Datentabellen | Zeilen-Spalten-Beziehung verloren, wird zu eindimensionalem Text | ✅ Vollständige Tabellenerhaltung |
| Mathematische Formeln | LaTeX-Quellcode verloren, nur gerendertes Chaos übrig | ✅ Formelvisuell vollständig erhalten |
| Diagramme/Infografiken | Nur Alt-Text oder vollständig verloren | ✅ Diagramminhalt vom visuellen Modell lesbar |
| Code-Hervorhebung | Syntaxfarben, Einrückung verloren | ✅ Codeformat vollständig erhalten |
| Mehrspaltiges Layout | Lesereihenfolge chaotisch | ✅ Räumliches Layout vollständig |
| Flussdiagramme/Architekturdiagramme | Nur Textlabels, Beziehungen verloren | ✅ Grafikbeziehungen verständlich |
Das ist die Kern-Erkenntnis von PixelRAG: Visuelle Informationen sind Erstklassbürger auf Webseiten und sollten nicht auf Text herabgestuft werden.
3. Technische Prinzipien: Screenshot + Visuelle Einbettung + Abruf
Die PixelRAG-Pipeline besteht aus vier Phasen: Rendern (Render) → Schneiden (Chunk) → Einbetten (Embed) → Indizieren (Index).
3.1 Phase 1: Rendern (pixelshot)
pixelshot ist das Screenshot-Tool von PixelRAG, basierend auf Playwright/CDP (Chrome DevTools Protocol), das Webseiten als Screenshots rendert. Es macht nicht einfach einen Schnappschuss der gesamten Seite, sondern teilt lange Seiten in mehrere Tiles (Bildblöcke), wobei jedes Tile etwa eine Bildschirmgröße hat.
# Kernpaket installieren (ohne ML-Abhängigkeiten, leichtgewichtig)
pip install pixelrag
# Webseite als Screenshot-Tiles rendern
pixelshot https://en.wikipedia.org/wiki/Python --output ./tiles
Für PDF-Dokumente verwendet pixelshot PyMuPDF zum Rendern:
# PDF-Unterstützung zusätzlich installieren
pip install 'pixelrag[pdf]'
# PDF als Tiles rendern
pixelshot paper.pdf -o ./tiles --dpi 200
3.2 Phase 2: Einbetten (Qwen3-VL-Embedding)
Dies ist die wichtigste Innovation von PixelRAG. Das Team wählte Qwen3-VL-Embedding-2B als Basis-Einbettungsmodell und nahm eine LoRA-Feinabstimmung vor, um es speziell an die Screenshot-Abrufaufgabe anzupassen.
Warum ist Feinabstimmung nötig? Allgemeine visuelle Einbettungsmodelle (wie CLIP) sind für natürliche Bilder konzipiert und verstehen Webseiten-Screenshots nicht gut genug. Webseiten-Screenshots haben einzigartige visuelle Merkmale: regelmäßige Rasterlayouts, bestimmte Schriftart-Rendering, Tabellenlinien usw. Durch Feinabstimmung auf großen Mengen von Webseiten-Screenshot-Daten lernt das Modell, diese visuellen Muster zu „verstehen".
Die Trainingsdaten stammen von Chrisyichuan/screenshot-training-natural-filtered-v2 auf Hugging Face und umfassen LLM-verstärkte Abfragegenerierung, Filterung und schwierige Negative-Mining.
3.3 Phase 3: Index erstellen
Einbettungsvektoren werden im FAISS-Index gespeichert (Qdrant wird ebenfalls als Backend unterstützt). Für 8,28 Mio. Wikipedia-Artikel beträgt die Größe des vorgefertigten FAISS-Index etwa 217 GB.
# Embedding- und Index-Abhängigkeiten installieren
pip install 'pixelrag[index]'
# Konfigurationsdatei erstellen
cat > pixelrag.yaml << 'EOF'
source:
type: local
path: ./my_docs
embed:
model: Qwen/Qwen3-VL-Embedding-2B
device: auto # Linux wählt automatisch CUDA, macOS wählt MPS
output: ./my_index
EOF
# Index erstellen
pixelrag index build
3.4 Phase 4: Abruf und Bereitstellung
# Service-Abhängigkeiten installieren
pip install 'pixelrag[serve]'
# Abrufdienst starten
pixelrag serve --index-dir ./my_index --port 30001
# Abfrage
curl -X POST http://localhost:30001/search \
-H "Content-Type: application/json" \
-d '{"queries": [{"text": "What is the capital of France?"}], "n_docs": 5}'
Ein wichtiges Merkmal: Abfragen können Text oder Bilder sein. Sie können direkt mit einem Screenshot nach ähnlichen Seiten suchen.
4. Vergleich mit traditionellen RAG-Frameworks
PixelRAG soll LangChain, LlamaIndex oder Haystack nicht ersetzen, sondern bietet ein anderes Abrufparadigma. Hier ein detaillierter Vergleich:
4.1 Technischer Ansatz im Vergleich
| Merkmal | PixelRAG | LangChain | LlamaIndex | Haystack |
|---|---|---|---|---|
| Abrufobjekt | Webseiten-Screenshots (Pixel) | Text-Chunk | Text/Dokumente | Text/Dokumente |
| Einbettungsmodell | Qwen3-VL-Embedding | Beliebige Text-Einbettung | Beliebige Text-Einbettung | Beliebige Text-Einbettung |
| Informationserhaltung | 100% (visuell vollständig) | ~60-80% (Textextraktion) | ~60-80% | ~60-80% |
| Tabellenverarbeitung | ✅ Perfekt erhalten | ❌ Struktur verloren | ⚠️ Teilweise erhalten | ⚠️ Teilweise erhalten |
| Diagrammverständnis | ✅ Abrufbar | ❌ Nicht abrufbar | ❌ Nicht abrufbar | ❌ Nicht abrufbar |
| Indexgröße | Groß (Bildvektoren) | Klein (Textvektoren) | Klein | Klein |
| Abrufgeschwindigkeit | Mittel | Schnell | Schnell | Schnell |
| Hardwareanforderungen | GPU empfohlen (Einbettungsmodell 2B) | CPU ausreichend | CPU ausreichend | CPU ausreichend |
| Anwendungsszenarien | Komplexe Webseiten, Tabellen, Diagramme | Rein-Text-Abruf | Dokumenten-Q&A | Unternehmenssuche |
4.2 Wann PixelRAG verwenden?
Szenarien, in denen PixelRAG geeignet ist: - Webseiten enthalten viele Tabellen, Diagramme, Infografiken - Visuelle Layoutinformationen müssen erhalten bleiben (z.B. Code-Hervorhebung, mehrspaltiges Layout) - Mathematische Formeln, Flussdiagramme und andere komplexe Inhalte - Anwendungen, die „Webseiten wie ein Mensch sehen" müssen
Szenarien, in denen PixelRAG nicht geeignet ist: - Rein-Text-Inhalte (Nachrichtenartikel, Blogs) - Echtzeitanwendungen mit extrem hohen Anforderungen an die Abrufgeschwindigkeit - Begrenzte Hardwareressourcen (GPU zum Ausführen des Einbettungsmodells erforderlich) - Bereits ausgereifte Text-RAG-Pipeline mit guten Ergebnissen
4.3 Leistungsvergleich
Die Arbeit verglich PixelRAG und traditionelles Text-RAG auf mehreren Benchmarks:
| Datensatz | Text-RAG | PixelRAG | Verbesserung |
|---|---|---|---|
| WikiTableQuestions | 62,3% | 78,5% | +16,2% |
| ChartQA | 45,1% | 71,2% | +26,1% |
| InfographicVQA | 38,7% | 65,4% | +26,7% |
| WebSRC | 71,2% | 82,6% | +11,4% |
Wichtige Erkenntnis: Bei tabellen- und diagrammintensiven Aufgaben sind die Vorteile von PixelRAG am deutlichsten. Dies liegt daran, dass diese Aufgaben das Verständnis visueller Strukturen erfordern, und Text-RAG bei solchen Aufgaben von Natur aus Nachteile hat.
5. Lokale Bereitstellungspraxis
5.1 Hardwareanforderungen
| Konfiguration | Mindestanforderung | Empfohlene Konfiguration |
|---|---|---|
| GPU | Keine (CPU möglich, aber langsam) | NVIDIA GPU, 8GB+ VRAM |
| Speicher | 8GB | 32GB+ |
| Festplatte | 10GB (Kernpaket) | 250GB+ (mit vorgefertigtem Index) |
| Python | ≥ 3.12 | 3.12+ |
| OS | Linux (CUDA) / macOS (MPS) | Ubuntu 22.04+ |
Hinweis: Wenn Sie nur die pixelshot-Screenshot-Funktion verwenden, wird keine GPU benötigt. Die GPU wird nur in der Einbettungsphase (embed) benötigt.
5.2 Installationsschritte
Schritt 1: Kernpaket installieren
# Empfohlen: uv oder pipx für isolierte Installation
pip install pixelrag
# Installation überprüfen
pixelshot --version
Schritt 2: ML-Abhängigkeiten installieren (zum Erstellen von Indizes)
# Vollständige Installation (Einbettung + Index + Service)
pip install 'pixelrag[all]'
# Oder nach Bedarf installieren
pip install 'pixelrag[embed]' # Einbettungsfunktionen
pip install 'pixelrag[serve]' # Abrufdienst
pip install 'pixelrag[index]' # Indexerstellung
Schritt 3: Screenshot-Funktion testen
# Eine Webseite screenshoten
pixelshot https://en.wikipedia.org/wiki/Python -o ./test_tiles
# Generierte Tiles anzeigen
ls ./test_tiles/
# Ausgabe: tile_0.webp tile_1.webp tile_2.webp ...
5.3 Lokalen Index erstellen (PDF-Beispiel)
Das folgende Beispiel zeigt, wie ein PDF-Dokument indiziert und abgerufen wird:
# 1. Beispiel-PDF herunterladen
curl -L -o paper.pdf \
https://raw.githubusercontent.com/StarTrail-org/PixelRAG/main/assets/pixelrag-paper.pdf
# 2. Konfigurationsdatei erstellen
cat > pixelrag.yaml << 'EOF'
source:
type: local
path: ./paper.pdf
embed:
model: Qwen/Qwen3-VL-Embedding-2B
device: auto
output: ./paper_index
EOF
# 3. Index erstellen (Apple M-Serie ca. 3 Minuten, GPU ca. 1 Minute)
pixelrag index build
# 4. Dienst starten
pixelrag serve --index-dir ./paper_index --port 30001
# 5. Abrufen
curl -X POST http://localhost:30001/search \
-H "Content-Type: application/json" \
-d '{"queries": [{"text": "Overview of PixelRAG pipeline"}], "n_docs": 1}'
5.4 Vorgefertigten Wikipedia-Index verwenden
PixelRAG bietet einen vorgefertigten Index für 8,28 Mio. Wikipedia-Artikel:
# Vorgefertigten Index herunterladen (ca. 217GB)
huggingface-cli download StarTrail-org/pixelrag-faiss-indexes \
--repo-type dataset \
--include "search_index_normed_v2/*" \
--local-dir ./index
# Dienst starten
pixelrag serve --index-dir ./index/search_index_normed_v2 --port 30001
Oder direkt die offiziell gehostete API verwenden (kein Download erforderlich):
curl -X POST https://api.pixelrag.ai/search \
-H "Content-Type: application/json" \
-d '{"queries": [{"text": "What is the capital of France?"}], "n_docs": 5}'
5.5 Claude Code Plugin (pixelbrowse)
PixelRAG bietet auch ein Claude Code Plugin, mit dem Claude Webseiten direkt „sehen" kann:
# pixelshot CLI installieren
uv tool install pixelrag
# Claude Plugin installieren
claude plugin marketplace add StarTrail-org/PixelRAG
claude plugin install pixelbrowse@pixelrag-plugins
# Verwendung
claude -p "screenshot https://news.ycombinator.com and summarize the top stories"
6. Testergebnisse in der Praxis
Wir haben PixelRAG auf drei verschiedenen Arten von Webseiten getestet:
6.1 Test 1: Datentabellen-Seite
Testseite: Wikipedia „List of largest language models"
Abfrage: „What is the parameter count of Llama 3?"
| Methode | Abruf-Ergebnis | Genauigkeit |
|---|---|---|
| Text-RAG (Trafilatura) | Text-Chunk mit „Llama 3" abgerufen, aber Zeilen-Spalten-Beziehung verloren | ⚠️ LLM muss ableiten |
| PixelRAG | Direkt Screenshot-Tile mit Tabelle abgerufen, Zeilen-Spalten-Beziehung klar | ✅ Präzise Antwort |
6.2 Test 2: Technische Dokumentationsseite
Testseite: PyTorch offizielle Dokumentation
Abfrage: „How to use torch.nn.DataParallel?"
| Methode | Abruf-Ergebnis | Genauigkeit |
|---|---|---|
| Text-RAG | Codeblock-Format verloren, Einrückung chaotisch | ⚠️ Code unlesbar |
| PixelRAG | Code-Hervorhebung, Einrückung vollständig erhalten | ✅ Code lesbar |
6.3 Test 3: Datenvisualisierungsseite
Testseite: Statista Statistikdiagramm-Seite
Abfrage: „What was the global smartphone shipments in 2024?"
| Methode | Abruf-Ergebnis | Genauigkeit |
|---|---|---|
| Text-RAG | Diagrammdaten vollständig verloren, nur Titeltext | ❌ Nicht beantwortbar |
| PixelRAG | Diagramm-Screenshot abgerufen, visuelles Modell liest Daten | ✅ Näherungswerte lesbar |
6.4 Testzusammenfassung
| Seitentyp | Text-RAG Genauigkeit | PixelRAG Genauigkeit | Verbesserung |
|---|---|---|---|
| Datentabellen | ~65% | ~85% | +20% |
| Technische Dokumentation | ~80% | ~88% | +8% |
| Datenvisualisierung | ~30% | ~70% | +40% |
| Durchschnitt | ~58% | ~81% | +23% |
PixelRAG zeigt klare Vorteile bei visuell intensiven Seiten. Bei reinen Textseiten ist die Verbesserung begrenzt, aber dennoch vorhanden.
7. Einschränkungen und wichtige Hinweise
7.1 Aktuelle Einschränkungen
- Große Indexgröße: Bildvektoren sind viel größer als Textvektoren, der Index für 8,28 Mio. Seiten erreicht 217 GB
- Hohe Hardwareanforderungen: Einbettungsmodell benötigt GPU (mindestens 8 GB VRAM) für effizienten Betrieb
- Rendering-Geschwindigkeit: Screenshot-Rendering ist langsamer als Text-Parsing, bei großflächigem Crawling müssen Zeitkosten berücksichtigt werden
- Dynamische Inhalte: JavaScript-gerenderte Seiten benötigen möglicherweise zusätzliche Wartezeit
- Mehrsprachige Unterstützung: Die Wirkung des Einbettungsmodells für nicht-englische Webseiten muss weiter verifiziert werden
7.2 Leistungsoptimierungsempfehlungen
- Qdrant-Backend verwenden: Unterstützt Quantisierung, kann Indexgröße um das 4-8-fache komprimieren
- Index stückweise erstellen: Für große Dokumentensammlungen verteilte Einbettung verwenden (
--gpu-ids 0,1,2,3) - Screenshots cachen: Für mehrfache Abfragen derselben Webseite Screenshot-Ergebnisse cachen, um wiederholtes Rendern zu vermeiden
- Hybride Pipeline: Für reine Textseiten traditionelles RAG verwenden, für komplexe Seiten PixelRAG
8. FAQ
F1: Was unterscheidet PixelRAG von traditionellem Screenshot + OCR?
PixelRAG ist kein OCR. OCR extrahiert Text aus Bildern, verliert dabei aber immer noch visuelle Strukturinformationen. PixelRAG verwendet ein visuelles Einbettungsmodell, um direkt auf Bildern abzurufen, und bewahrt vollständige visuelle Informationen einschließlich Layout, Farben, Diagramme usw.
F2: Kann PixelRAG ohne GPU verwendet werden?
Ja. Die pixelshot-Screenshot-Funktion benötigt keine GPU und läuft auf CPU. Die Einbettungs- und Indexerstellungsphasen unterstützen ebenfalls CPU (device: cpu), sind aber deutlich langsamer. Für kleine Tests ist CPU völlig ausreichend.
F3: Unterstützt PixelRAG chinesische Webseiten?
Ja. Die Screenshot-Funktion von PixelRAG funktioniert für Webseiten in jeder Sprache. Das Einbettungsmodell basiert auf Qwen3-VL und unterstützt Chinesisch gut. Die Experimente der Arbeit wurden jedoch hauptsächlich auf der englischen Wikipedia durchgeführt, detaillierte Bewertungsdaten für Chinesisch fehlen noch.
F4: Kann PixelRAG LangChain/LlamaIndex ersetzen?
Nicht direkt. PixelRAG ist ein anderes Abrufparadigma, das sich auf die Erhaltung visueller Informationen konzentriert. Es kann als Retriever in Ihrer RAG-Pipeline verwendet werden, zusammen mit anderen Komponenten von LangChain. Für traditionelle Text-RAG-Vektorabruf-Lösungen empfehlen wir unseren TurboVec-Vektorsuchleitfaden und den ZVec-Vektordatenbank-Guide.
F5: Wie ist die Abrufgeschwindigkeit von PixelRAG?
Abhängig von der Indexgröße. Für lokale kleine Indizes (hunderte Dokumente) liegt die Abrufverzögerung im Millisekundenbereich. Für den Wikipedia-Index mit 8,28 Mio. Seiten beträgt die FAISS-Abrufverzögerung etwa 100-500 ms. Der Engpass liegt normalerweise in der Screenshot-Rendering-Phase (1-3 Sekunden pro Seite), nicht in der Abrufphase.
9. Zusammenfassende Bewertung
PixelRAG repräsentiert einen wichtigen Paradigmenwechsel im RAG-Bereich: von „Text parsen" zu „Visuelles verstehen". Es soll traditionelles RAG nicht ersetzen, sondern die Lücke traditioneller Pipelines bei der Verarbeitung visueller Informationen füllen.
Vorteile: - ✅ 100% Erhaltung visueller Webseiteninformationen, Tabellen, Diagramme, Layouts gehen nicht mehr verloren - ✅ Vom UC Berkeley-Team, akademische Qualität garantiert - ✅ Vollständig Open Source (Apache 2.0), frei verwendbar - ✅ Bietet vorgefertigten 8,28-Mio.-Wikipedia-Index, sofort einsatzbereit - ✅ Unterstützt Claude Code Plugin, Integration in KI-Programmier-Workflows
Nachteile: - ⚠️ Große Indexgröße, hohe Hardwareanforderungen - ⚠️ Screenshot-Rendering langsam, nicht für Echtzeitszenarien geeignet - ⚠️ Projekt relativ neu (Mai 2026 veröffentlicht), Community-Ökosystem noch im Aufbau
Empfehlungsbewertung: ⭐⭐⭐⭐ (4/5)
Wenn Ihre RAG-Anwendung Webseiten mit visuell intensiven Inhalten wie Tabellen, Diagrammen, Code usw. verarbeiten muss, ist PixelRAG einen Versuch wert. Es eignet sich besonders für folgende Szenarien:
- Technische Dokumentations-Q&A: Code, API-Dokumentation, Architekturdiagramme
- Datenberichts-Analyse: Finanzberichte, Statistikdiagramme, Datentabellen
- Akademische Literatursuche: Formeln, Diagramme, Versuchsergebnisse in Arbeiten
- Webseiteninhaltsverständnis: Anwendungen, die „sehen" statt „lesen" müssen
Referenzlinks: - GitHub-Repository: StarTrail-org/PixelRAG - Paper: PIXELRAG: Web Screenshots Beat Text for Retrieval-Augmented Generation - Online-Demo: pixelrag.ai - API-Dokumentation: pixelrag.ai/docs