Das Konvertieren von PDF-Seiten in Bilder für eine Website erfordert bestimmte Pixelabmessungen und keine generische DPI-Einstellung. Eine mit 300 DPI konvertierte PDF-Seite erzeugt ein Bild mit einer Breite von Tausenden von Pixeln, weitaus größer, als jedes Website-Layout anzeigen kann. Das Hochladen dieses Bildes auf eine Website verschwendet Bandbreite und verlangsamt das Laden der Seite. Durch die Konvertierung mit genau den Pixelabmessungen, die für das Layout der Website erforderlich sind, entstehen Bilder, die schnell geladen und scharf angezeigt werden. PDF-zu-Bild Bei der Konvertierung für die Webnutzung geht es darum, die Ausgabeabmessungen an den spezifischen Platz anzupassen, den das Bild auf der Seite einnehmen wird.
Wichtige Erkenntnisse
Die Abmessungen von Website-Bildern werden in Pixeln und nicht in Zoll gemessen. Um eine PDF-Seite in die richtige Pixelgröße zu konvertieren, bestimmen Sie die maximale Anzeigebreite des Bildes auf der Website und stellen Sie dann die Konvertierungsausgabe auf diese Breite ein, während Sie das Seitenverhältnis der Seite beibehalten. Die Standardbreite des Website-Inhalts reicht von 720 Pixel für für Mobilgeräte optimierte Layouts bis zu 1920 Pixel für Desktop-Layouts in voller Breite. Die Konvertierung in diesen spezifischen Abmessungen erzeugt Bilder, die weder unnötig groß noch enttäuschend verschwommen sind.
Bestimmen Sie die genauen Pixelabmessungen, die Ihre Website benötigt
Bei Websites, die ein Content-Management-System mit automatischer Bildgrößenänderung verwenden, konvertieren Sie mit einer höheren Auflösung als der Anzeigegröße und überlassen Sie die Größenänderung dem CMS. Ein CMS, das aus einem einzigen Upload mehrere Größen generiert, benötigt ein Quellbild, das groß genug ist, um die größte generierte Größe zu unterstützen. Durch die Konvertierung mit der doppelten größten CMS-generierten Größe wird sichergestellt, dass alle generierten Varianten scharf sind.
Bei responsiven Websites ändert sich die Bildanzeigebreite bei unterschiedlichen Bildschirmgrößen. Konvertieren Sie mit der größten Breite, in der das Bild angezeigt wird. Dies ist normalerweise der Desktop-Haltepunkt von 1200 bis 1400 Pixel für Inhaltsbilder. Der Browser verkleinert Bilder effizient für kleinere Bildschirme. Die zusätzliche Dateigröße aus der größeren Konvertierung wird allen Benutzern angezeigt, auch mobilen Benutzern, denen eine verkleinerte Version angezeigt wird. Verwenden Sie für bandbreitenempfindliche Implementierungen responsives Bild-Markup, um unterschiedliche Bildgrößen an unterschiedlichen Haltepunkten bereitzustellen.
Messen Sie die Breite des Inhaltsbereichs Ihrer Website in Pixel. Öffnen Sie die Website in einem Browser, klicken Sie mit der rechten Maustaste auf den Inhaltsbereich und wählen Sie „Inspizieren“, um die Entwicklertools zu öffnen. Die berechnete Breite des Inhaltscontainers wird im Boxmodelldiagramm angezeigt. Dies ist die maximale Breite, die Ihre Bilder haben sollten. Wenn Ihre Website responsiv ist und sich an unterschiedliche Bildschirmgrößen anpasst, wählen Sie den breitesten Haltepunkt, normalerweise das Desktop-Layout mit einer Breite von 1200 bis 1400 Pixeln. Bilder mit dieser Breite sehen auf dem Desktop scharf aus und werden auf Tablets und Telefonen proportional verkleinert.
Konvertieren Sie Bildergalerien und Leuchtkästen mit einer höheren Auflösung, um die Vollbildanzeige zu unterstützen. Ein Galeriebild, das in einem Rasterlayout mit einer Breite von 400 Pixeln angezeigt wird, muss beim Klicken möglicherweise auf eine Breite von 1600 Pixeln erweitert werden, um es im Vollbildmodus anzuzeigen. Durch die Konvertierung in die Vollbild-Anzeigegröße wird sichergestellt, dass das vergrößerte Bild scharf ist. Die Rasteransicht lädt eine verkleinerte Version, die von Browsern gut verarbeitet wird. Die Konvertierung in die Galerie-Anzeigegröße und die Bereitstellung desselben Bildes für die Vollbildanzeige führt zu einer unscharfen Vergrößerung. Berücksichtigen Sie das maximale Anzeigeszenario Ihrer Website, nicht nur die Standardansicht.
Probieren Sie PDF to Image aus
Keine Installation erforderlich. Funktioniert direkt in Ihrem Browser.
PDF-Seiten mit exakten Pixelabmessungen konvertieren
Bei PDF-Seiten, die sowohl Text als auch Bilder enthalten, bleibt durch die Konvertierung mit der doppelten Anzeigebreite die Textschärfe auf Bildschirmen mit hoher DPI erhalten. Text, der mit der 1-fachen Anzeigebreite gerendert wird, kann auf Retina-Displays etwas weicher aussehen, da die feinen Striche von Buchstabenformen von der zusätzlichen Pixeldichte profitieren. Durch die 2-fache Konvertierung wird die Dateigröße ungefähr verdoppelt, was ein lohnender Kompromiss für Dokumentseiten ist, bei denen die Lesbarkeit des Textes im Vordergrund steht. Für Seiten, die hauptsächlich aus Fotos bestehen, ist eine 1-fache Konvertierung ausreichend, da das Auge weniger empfindlich auf Auflösungsunterschiede bei fotografischen Inhalten reagiert.
Öffnen Sie Ihr PDF-zu-Bild-Konvertierungstool und suchen Sie nach Einstellungen für die Ausgabegröße. Einige Tools verwenden Pixelabmessungen, beispielsweise 1200 Pixel breit. Andere verwenden DPI in Kombination mit der physischen Seitengröße. Wenn das Tool DPI verwendet, berechnen Sie den erforderlichen DPI, indem Sie die Zielpixelbreite durch die Seitenbreite in Zoll dividieren. Eine Seite im Letter-Format ist 8,5 Zoll breit. Um ein Bild mit einer Breite von 1200 Pixeln zu erzeugen, stellen Sie die DPI auf 1200 geteilt durch 8,5 ein, was ungefähr 141 DPI entspricht. Die Eingabe von 141 DPI ergibt genau die Breite von 1200 Pixeln, die für die Website benötigt wird.
Für Digital Publishing, bei dem Bilder in Artikel oder Blogbeiträge eingebettet sind, konvertieren Sie mit der doppelten Anzeigebreite, um Retina- und ähnliche Displays mit hoher DPI zu unterstützen. Ein Inhaltsbereich, der Bilder mit einer Breite von 800 Pixeln anzeigt, benötigt Quellbilder mit einer Breite von 1600 Pixeln. Der Browser stellt das 2x-Bild auf Bildschirmen mit hoher DPI bereit und verkleinert es auf den 800-Pixel-Anzeigebereich, wodurch schärfere Texte und Grafiken als bei einem 800-Pixel-Quellbild erzeugt werden. Die 2-fache Konvertierung verdoppelt die Dateigröße, führt aber auf modernen Bildschirmen zu einer sichtbar besseren Qualität. WukongPDFs PDF-zu-Bild-Konverter akzeptiert die Pixelbreite als direkte Eingabe, Sie geben also die Zielbreite ein und das Tool berechnet automatisch die entsprechende DPI.
Wählen Sie das richtige Bildformat für die Website-Bereitstellung
| Format | Am besten für | Komprimierung | Hinweise |
|---|---|---|---|
| PNG | Text, Diagramme, Strichzeichnungen | Verlustfrei | Größere Dateien, scharfer Text, unterstützt Transparenz |
| JPEG | Fotos, gescannte Seiten | Verlustbehaftet | Kleinere Dateien, fotorealistisch, keine Transparenz |
| WebP | Moderne Websites, alle Inhalte | Beide | Beste Komprimierung, wird von sehr alten Browsern nicht unterstützt |
| AVIF | Modernste Web-Performance | Beide | Kleinste Dateien, eingeschränkte Tool-Unterstützung für die PDF-Konvertierung |
Für die meisten PDF-zu-Website-Konvertierungen bietet WebP das beste Gleichgewicht zwischen Qualität und Dateigröße. Ein 1200 Pixel breites WebP-Bild einer typischen Dokumentseite ist 40 bis 60 Prozent kleiner als das entsprechende PNG und behält dabei optisch die gleiche Qualität. Wenn Ihre Website WebP nicht unterstützt, ist PNG die nächstbeste Wahl für Dokumentseiten mit Text und JPEG mit einer Qualität von 85 bis 90 Prozent die nächstbeste Wahl für Seiten mit Fotos.
Batch-Konvertierung mehrseitiger PDFs für Website-Galerien
Bei sehr großen PDFs mit Hunderten von Seiten teilen Sie die Stapelkonvertierung in Gruppen zu je 50 Seiten auf. Einige Konvertierungstools haben Speicherbeschränkungen, die bei sehr großen Stapeln zu Fehlern führen. Die Verarbeitung in kleineren Gruppen nimmt die gleiche Gesamtzeit in Anspruch, vermeidet jedoch die Frustration einer fehlgeschlagenen Konvertierung auf Seite 347 von 400, die einen Neustart des gesamten Stapels erfordert.
Konvertieren Sie für eine mehrseitige PDF-Datei, die in eine Website-Bildergalerie umgewandelt werden soll, alle Seiten in einem Stapelvorgang mit denselben Pixelabmessungen. Der Stapel erzeugt Bilder mit einheitlicher Größe, die im Galerielayout einheitlich angezeigt werden. Benennen Sie die Ausgabedateien mit einer konsistenten Namenskonvention, die die Seitenzahl enthält, z. B. Dokumentseite-01.webp, Dokumentseite-02.webp usw. Diese Namenskonvention lässt sich problemlos in Galerie-Plugins und benutzerdefiniertes JavaScript integrieren, das fortlaufend nummerierte Bilddateien erwartet.
Führen Sie die Bilder nach der Konvertierung durch ein Bildoptimierungstool, um die Dateigröße ohne sichtbaren Qualitätsverlust weiter zu reduzieren. Tools wie ImageOptim, TinyPNG und Squoosh wenden eine zusätzliche Komprimierung an, die der PDF-Konverter möglicherweise nicht angewendet hat. Der zweite Komprimierungsdurchgang kann die Dateigröße bei PNG- und JPEG-Dateien um weitere 20 bis 40 Prozent reduzieren. Bei einer Galerie mit 50 Dokumentseiten sind die kumulativen Bandbreiteneinsparungen sowohl für die Hostingkosten der Website als auch für die Seitenladezeit des Besuchers von Bedeutung.
Häufig gestellte Fragen
Sollte ich PDF-Seiten für die Webnutzung in Bilder im sRGB-Farbraum konvertieren? Ja. Die meisten Website-Bilder sollten im sRGB-Farbraum vorliegen, da dies der Standardfarbraum für Webbrowser ist. Durch die Konvertierung in sRGB wird eine einheitliche Farbdarstellung über verschiedene Browser und Betriebssysteme hinweg gewährleistet. Wenn das PDF einen CMYK- oder Adobe RGB-Farbraum verwendet, kann es bei der Konvertierung in sRGB zu leichten Farbverschiebungen kommen. Sehen Sie sich vor der Veröffentlichung eine Vorschau des konvertierten Bildes in einem Browser an, um sicherzustellen, dass die Farben akzeptabel sind.
Was passiert, wenn meine Website responsive ist und sich die Breite der Bildanzeige mit der Bildschirmgröße ändert?
Konvertieren Sie mit der größten Anzeigebreite, in der das Bild angezeigt wird, normalerweise am Desktop-Haltepunkt. Der Browser verkleinert das Bild automatisch für kleinere Bildschirme. Ein 1200 Pixel breites Bild, das auf einem Telefon mit 400 Pixeln angezeigt wird, sieht scharf aus, weil es verkleinert und nicht vergrößert wird. Die zusätzliche Dateigröße aus der Desktop-optimierten Konvertierung wird allen Benutzern zur Verfügung gestellt, was den Nachteil für die Unterstützung des gesamten Auflösungsbereichs darstellt. Verwenden Sie für bandbreitenempfindliche Implementierungen ein responsives Bild-Markup, das unterschiedliche Bildgrößen an unterschiedlichen Haltepunkten bereitstellt.
Kann ich eine PDF-Seite in ein Bild mit transparentem Hintergrund konvertieren?
Nur wenn die PDF-Seite selbst keinen Hintergrund hat. Die meisten PDF-Seiten haben einen expliziten weißen Hintergrund, der im Bild als weißer Hintergrund konvertiert wird. Um ein Bild mit transparentem Hintergrund zu erstellen, entfernen Sie vor der Konvertierung den Seitenhintergrund aus der PDF-Datei. Hierzu ist ein PDF-Editor erforderlich, der das Hintergrundobjekt aus dem Seiteninhaltsstrom löschen kann. Die resultierende PDF-Seite hat einen transparenten Hintergrund und bei der Konvertierung in PNG bleibt die Transparenz erhalten.
Soll ich PDF-Seiten für die Webnutzung in Bilder mit 72 DPI umwandeln, wie allgemein empfohlen?
Die 72-DPI-Empfehlung ist veraltet. Es entstand, als die meisten Computermonitore eine physische Pixeldichte von etwa 72 Pixel pro Zoll hatten. Moderne Monitore haben Pixeldichten von 100 bis 200 oder mehr Pixel pro Zoll. Das Konvertieren einer PDF-Seite mit 72 DPI und die Anzeige mit 100 Prozent Zoom auf einem modernen Monitor erzeugt ein sichtbar weiches Bild. Verwenden Sie die oben beschriebene Pixeldimensionsmethode anstelle einer festen DPI. Der richtige DPI-Wert ergibt die richtigen Pixelabmessungen für Ihr spezifisches Website-Layout.
Probieren Sie PDF to Image aus
Keine Installation erforderlich. Funktioniert direkt in Ihrem Browser.