EPS-zu-PNGrechner

Ratgeber · 10 Min. Lesezeit

EPS-Grafiken für das Web optimieren und als PNG ausspielen

EPS-Grafiken fürs Web optimieren: Warum EPS im Browser nicht angezeigt wird, wann PNG das richtige Webformat ist, wie du Größe, Transparenz und Dateigewicht steuerst und welche ehrliche Grenze beim Umwandeln gilt. Mit Schritt-für-Schritt-Anleitung und Vergleichstabelle.

Jan-Tristan Rudat
Jan-Tristan Rudat Veröffentlicht Geprüft

Kurz gesagt

EPS ist ein Druckformat und kein Webformat, deshalb zeigt kein Browser eine EPS-Datei direkt an. Wer eine EPS-Grafik im Web verwenden will, muss sie in ein Bildformat umwandeln, das Browser verstehen. Für Logos, Icons und Grafiken mit klaren Kanten oder transparentem Hintergrund ist PNG meist die richtige Wahl, weil es verlustfrei ist und Transparenz unterstützt. Wichtig zu wissen: Eine PNG ist ein Pixelbild und nicht mehr beliebig skalierbar wie das Vektor-Original, du legst die Größe beim Erzeugen fest. Auf eps-png.de läuft die Umwandlung lokal im Browser, ohne Upload und ohne Konto, allerdings nur für EPS mit eingebetteter Vorschau.

Du hast ein Logo oder eine Grafik als EPS-Datei bekommen, etwa von einer Agentur oder aus einem Markenhandbuch, und sollst sie jetzt auf einer Webseite einbinden. Beim Versuch, die Datei in den Browser zu ziehen, passiert nichts, oder es erscheint nur ein Download-Dialog. Das ist kein Fehler, sondern erwartbar: EPS gehört nicht ins Web. In diesem Ratgeber erfährst du, warum das so ist, welches Format du stattdessen brauchst, wie du eine EPS-Grafik sauber fürs Web aufbereitest und worauf du bei Größe, Transparenz und Dateigewicht achten solltest. Am Ende kannst du deine Grafik mit dem EPS-zu-PNG-Konverter webtauglich machen.

Warum EPS im Web nicht funktioniert

EPS steht für Encapsulated PostScript. Es ist eine gekapselte Variante der Seitenbeschreibungssprache PostScript, die ursprünglich für den professionellen Druck und den Austausch zwischen Grafikprogrammen entwickelt wurde. Eine EPS-Datei beschreibt eine Grafik als Folge von Zeichenanweisungen, also als Vektoren: Linien, Kurven, Flächen und Text werden als mathematische Pfade gespeichert, nicht als Pixel. Mehr zu den technischen Hintergründen findest du im Ratgeber Was ist eine EPS-Datei?.

Genau dieser Charakter macht EPS fürs Web unbrauchbar. Webbrowser rendern keine PostScript-Anweisungen. Sie zeigen Bilder in Formaten an, die für das Web gedacht sind: PNG, JPG, WebP, GIF und das Vektorformat SVG. Ein EPS gehört nicht dazu. Bindest du eine EPS-Datei über ein img-Tag ein, bleibt die Stelle leer oder zeigt das Symbol für ein defektes Bild. Es hilft auch nicht, die Datei einfach umzubenennen, denn der Inhalt bleibt PostScript. Die Grafik muss tatsächlich in ein anderes Format überführt werden.

Vektor gegen Pixel: was beim Umwandeln passiert

Beim Umwandeln einer EPS-Grafik in PNG verlässt du die Welt der Vektoren und landest bei einem Pixelbild, einer sogenannten Rastergrafik. Das Vektor-Original lässt sich verlustfrei auf jede Größe bringen, von der Visitenkarte bis zum Messestand, ohne dass Kanten ausfransen. Eine Rastergrafik dagegen besteht aus einem festen Gitter von Bildpunkten. Vergrößerst du eine PNG über ihre native Auflösung hinaus, werden die Pixel sichtbar und das Bild wirkt unscharf oder klötzchenartig.

Das ist die zentrale, ehrliche Grenze, die du verstehen musst: Eine PNG ist nicht mehr beliebig skalierbar. Du legst die Auflösung im Moment der Umwandlung fest, und dabei sollte sie bleiben. Für das Web ist das in der Regel kein Nachteil, weil eine Grafik dort ohnehin in einer festen Anzeigegröße erscheint. Du solltest aber zwei Dinge beherzigen: Erstens, das EPS als Master sicher aufbewahren, falls du später eine größere Version brauchst. Zweitens, die PNG eher etwas zu groß als zu klein erzeugen, damit sie auch auf hochauflösenden Displays scharf bleibt. Wer den Unterschied zwischen den beiden Bildwelten vertiefen will, findet ihn ausführlich im Ratgeber EPS und PNG im Vergleich.

PNG, JPG oder SVG: das richtige Webformat wählen

Nicht jede Grafik gehört zwingend in eine PNG. Welches Zielformat optimal ist, hängt vom Motiv ab. PNG spielt seine Stärken bei Grafiken mit klar abgegrenzten Farbflächen, scharfen Kanten und Transparenz aus, also bei Logos, Symbolen, Diagrammen und Illustrationen. Es speichert verlustfrei und kann Bereiche durchsichtig lassen, sodass dein Logo auf jedem Hintergrund sitzt. Wie das praktisch aussieht, zeigt der Ratgeber EPS mit transparentem Hintergrund.

JPG dagegen ist für Fotos gemacht. Es komprimiert verlustbehaftet und sehr effizient, erzeugt aber an harten Kanten sichtbare Artefakte und kann keine Transparenz speichern. Ein Logo als JPG bekommt oft einen unschönen, leicht verwaschenen Rand und einen weißen Kasten statt eines durchsichtigen Hintergrunds. Für Grafiken aus einer EPS-Datei ist JPG deshalb selten die richtige Wahl. SVG schließlich wäre das ideale Webformat für echte Vektorgrafiken, weil es wie EPS skalierbar bleibt, es entsteht aber nicht automatisch aus einer eingebetteten EPS-Vorschau. Die folgende Tabelle fasst die Entscheidung zusammen.

Welches Format wofür

Format Stärke Transparenz Gut für
PNG verlustfrei, scharfe Kanten ja Logos, Icons, Grafiken
JPG kleine Dateien bei Fotos nein Fotos, Farbverläufe
WebP moderne Kompression ja beides, wenn unterstützt
SVG skalierbar, klein ja echte Vektorgrafiken

Für den typischen Fall, ein Logo aus einer EPS-Datei auf einer Webseite zu platzieren, ist PNG die solide Standardwahl. Den ausführlichen Vergleich zwischen EPS und dem Vektorformat SVG behandelt der Ratgeber EPS und SVG im Vergleich.

Die richtige Größe und Auflösung fürs Web

Beim Erzeugen der PNG entscheidest du über die Pixelmaße, und die solltest du an der späteren Anzeigegröße ausrichten. Soll ein Logo im Seitenkopf etwa 200 Pixel breit dargestellt werden, reicht eine PNG mit 200 Pixeln Breite für normale Bildschirme. Für hochauflösende Displays, etwa Retina-Geräte und moderne Smartphones, lohnt es sich, das Doppelte zu erzeugen, also 400 Pixel Breite, und die Anzeige per CSS oder über das width-Attribut auf 200 Pixel zu begrenzen. So bleibt die Grafik überall gestochen scharf, ohne unnötig groß zu werden.

Vermeide den umgekehrten Fehler: Eine zu klein erzeugte PNG, die im Browser hochgezogen wird, sieht unscharf aus, und nachträgliches Vergrößern bringt keine Details zurück. Da das EPS-Original ein Vektor ist, kannst du die PNG ohne Qualitätsproblem in der benötigten Auflösung neu erzeugen, solange die eingebettete Vorschau groß genug ist. Wie Auflösung und Qualität bei EPS zusammenhängen, erklärt der Ratgeber EPS, Auflösung und Qualität.

Dateigewicht im Griff behalten

Für schnelle Ladezeiten und gute Core Web Vitals zählt jedes Kilobyte. PNG ist verlustfrei und kann bei großflächigen, farbintensiven Motiven entsprechend groß werden. Drei Hebel helfen, das Gewicht klein zu halten, ohne die Optik zu opfern. Erstens: nur so groß erzeugen wie nötig, also keine 2000-Pixel-PNG für ein 200-Pixel-Logo. Zweitens: bei Grafiken mit wenigen Farben, etwa einem zweifarbigen Logo, lässt sich eine PNG mit reduzierter Farbpalette deutlich verkleinern. Drittens: nach dem Umwandeln einen verlustfreien PNG-Optimierer einsetzen, der überflüssige Metadaten entfernt und die Kompression verbessert.

Wenn du moderne Browser bedienst, kannst du die PNG zusätzlich in WebP überführen, das bei gleicher Qualität oft kleiner ausfällt, und über das picture-Element mit PNG als Rückfallebene ausliefern. Für die meisten Logos und Icons reicht jedoch eine sauber dimensionierte PNG völlig aus, und du sparst dir den zusätzlichen Aufwand.

Schritt für Schritt: EPS-Grafik fürs Web als PNG ausspielen

  1. EPS auf Vorschau prüfen: Stelle sicher, dass deine EPS-Datei eine eingebettete Vorschau hat. Nur diese kann im Browser gerendert werden, eine reine PostScript-EPS ohne Vorschau nicht.
  2. Datei in den Konverter ziehen: Öffne den EPS-zu-PNG-Konverter und ziehe die Datei in das Fenster. Es wird nichts hochgeladen, alles bleibt auf deinem Gerät.
  3. Vorschau kontrollieren: Der Konverter liest die eingebettete Vorschau aus und zeigt sie an. Prüfe, ob die Grafik vollständig und korrekt dargestellt wird.
  4. Als PNG ausgeben: Starte die Umwandlung. Die Vorschau wird auf eine Canvas gezeichnet und als PNG erzeugt.
  5. Einbinden: Lade die PNG herunter und binde sie mit passenden width- und height-Angaben sowie einem aussagekräftigen alt-Text in deine Seite ein, zum Beispiel <img src="logo.png" width="200" height="80" alt="Firmenlogo">.

Was beim Umwandeln im Browser passiert

Auf eps-png.de läuft die gesamte Umwandlung lokal in deinem Browser. Der Konverter liest die EPS-Datei in den Arbeitsspeicher, extrahiert die im EPS eingebettete Vorschau, also entweder die TIFF-Vorschau einer DOS-EPS-Datei oder die hexadezimal kodierte EPSI-Vorschau, skaliert sie auf eine Canvas und gibt das Ergebnis als PNG aus. Die Datei verlässt dein Gerät zu keinem Zeitpunkt, es gibt keinen Upload, kein Konto und kein Limit.

Bewusst kommt dabei kein Ghostscript zum Einsatz, die verbreitete PostScript-Software steht unter der AGPL-Lizenz und würde rechtliche Pflichten nach sich ziehen, die ein schlanker, lokaler Browser-Konverter vermeiden will. Daraus folgt die wichtigste ehrliche Grenze: Nur EPS-Dateien mit eingebetteter Vorschau lassen sich umwandeln. Eine reine PostScript-EPS ohne Vorschau wird nicht gerendert, weil dafür ein vollständiger PostScript-Interpreter nötig wäre. Die meisten EPS aus Grafikprogrammen wie Illustrator enthalten eine solche Vorschau, sodass dieser Fall eher selten auftritt. Wenn deine Datei sich nicht öffnen lässt, hilft der Ratgeber EPS-Datei öffnen bei der Diagnose.

Direkt ausprobieren

Mache deine EPS-Grafik webtauglich: lokal im Browser als PNG ausspielen, ohne Upload und ohne Anmeldung.

Zum EPS-zu-PNG-Konverter

Häufige Fragen

Kann ich eine EPS-Datei direkt auf einer Webseite einbinden?

Nein. Browser zeigen EPS nicht an, weil es ein PostScript-Druckformat und kein Webformat ist. Für die Anzeige im Web brauchst du PNG, JPG, WebP oder SVG, die EPS-Grafik muss vorher umgewandelt werden.

Warum PNG und nicht JPG?

PNG ist verlustfrei und kann Transparenz speichern. Logos und Grafiken mit scharfen Kanten oder durchsichtigem Hintergrund sehen als PNG sauber aus, während JPG an Kanten Artefakte erzeugt und keine Transparenz kennt. JPG ist eher für Fotos gedacht.

Verliere ich beim Umwandeln Qualität?

Die PNG ist ein Pixelbild und nicht mehr beliebig skalierbar wie das Vektor-Original. Für eine feste Anzeigegröße im Web ist das unkritisch, solange die PNG groß genug erzeugt wird. Bewahre das EPS als Master für spätere, größere Versionen auf.

Welche EPS-Dateien lassen sich bei eps-png.de umwandeln?

Nur EPS mit eingebetteter Vorschau, also DOS-EPS mit TIFF-Vorschau oder EPS mit EPSI-Hex-Vorschau. Reine PostScript-EPS ohne Vorschau können nicht gerendert werden, weil der Konverter bewusst ohne Ghostscript arbeitet.

Quellen und Methodik

  • Adobe: Encapsulated PostScript File Format Specification, Aufbau von EPS und eingebetteter Vorschau (TIFF, EPSI).
  • W3C: Portable Network Graphics (PNG) Specification, verlustfreie Rasterkodierung und Alphakanal.
  • MDN Web Docs: unterstützte Bildformate in Browsern und Einbindung über img und picture.
  • Methodik: Die Formatempfehlungen beruhen auf den jeweiligen Spezifikationen sowie gängiger Webentwicklungs-Praxis zu Schärfe, Transparenz und Ladezeit.

Weiterführende Artikel

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige