Bilder und Grafiken für WordPress aufbereiten

Nachfolgender Guide zeigt, wie Sie Größe, Abmessungen und Format von Bildern finden, die Sie in WordPress hochladen möchten. Die Grundprinzipien gelten auch für andere Content-Management-Systeme wie TYPO3.

Welche Dateigröße sollten Bilder haben?

Hier einige grobe Richtwerte für Dateigrößen von Bildern unter verschiedenen Einsatzzwecken:

• Banner- und Slider-Bilder: Ideal 100 kB, maximal 300 kB
• Logo: Ideal 10 kB, maximal 30 kB
• Bild im Inhaltsbereich einer Unterseite: Ideal 50 kB, maximal 300 kB
• Porträt einer Person: Ideal 50 kB, maximal 200 kB
• Produktbild: Ideal 100 kB, maximal 300 kB

Welche Auflösung sollten Bilder haben?

Nachfolgend einige Richtwerte für typische Auflösungen von Bildern in verschiedenen Situationen:

• Banner- und Slider-Bilder: Ungefähr 2.100 px Breite, Höhe zwischen 200 und 750 px je nach Banner-/Slider-Art
• Logo: Ungefähr 40 bis 100 px Höhe bei beliebiger Breite
• Bild im Inhaltsbereich einer Unterseite: Bei Darstellung über Inhaltsbreite rund 1.000 px Breite bei beliebiger Höhe
• Porträt einer Person: Üblicherweise maximal 500×500 px
• Produktbild: Normalerweise quadratisch mit 300×300 px bis 750×750 px

Die nachfolgenden Richtwerte können in Ihrem individuellen Fall unter Umständen stark abweichen. Sie können mit einem Trick die tatsächliche Darstellungsgröße auf Ihrer Website herausfinden, insofern Sie bereits Bilder eingebunden haben:

• In Chrome, Firefox oder Edge per Rechtsklick auf das gewünschte Bild klicken und Untersuchen im Kontextmenü wählen. Es öffnet sich eine Seitenleiste.
• Das Auswahl-Tool starten, hier am Beispiel in Chrome:

• Fahren Sie nun mit dem Cursor über das gewünschte Bild, im Kontextfenster zeigt Ihnen der Browser nun die Bildgröße an:

Diese Größe ist ein guter Richtwert für weitere Bilder, die Sie in ähnlicher Weise hochladen möchten.

Sollen Bilder im JPEG- oder PNG-Format erstellt werden?

Im Web begegnen Ihnen beide Formate, welche jeweils ihre spezifischen Vorteile haben.

• JPEG eignet sich ideal für Realbilder, wie beispielsweise Fotografien. Die Dateigröße kann sehr klein gehalten werden, ohne einen sichtbaren Qualitätsverlust. Werden Fotos als PNG exportiert, nimmt die Dateigröße häufig stark zu.
• PNG ist perfekt für Grafiken. Die Konturen grafischer Elemente bleiben im PNG-Format schärfer als bei JPEG. Insbesondere einfache Grafiken können im PNG-Format sehr kleine Dateigrößen haben.
• PNG unterstützt Transparenz. Wenn Sie also ein freigestelltes Bild ohne Hintergrund erstellen möchten, dann wählen Sie das PNG-Format.

In welchem Format sollen Icons erstellt werden?

Idealerweise erstellen Sie Icons im SVG-Format. Dieses ist vektorbasiert und hat den Vorteil, dass das Icon in beliebigen Größen ohne Qualitätsverlust dargestellt werden kann. Gerade bei Icons mit feinen Linien bleibt die Darstellung auf allen Endgeräten gestochen scharf.

Nicht alle Content-Management-Systeme erlauben den Upload und die Anzeige von SVG-Icons. Sprechen Sie im Vorfeld am besten mit Ihrer Webdesign-Agentur. Beispielsweise kann der Upload bei WordPress relativ einfach aktiviert werden.

Mit welchen Tools können Bilder verkleinert werden?

WordPress bietet beispielsweise direkt in der Mediathek über den Button Bild bearbeiten in der Detailansicht des Bildes die Möglichkeit, das Bild zuzuschneiden, zu drehen oder die Maße zu verkleinern.

Online gibt es außerdem jede Menge kostenfreier Tools wie den Resize IMAGE oder Compress Image.

Kann man nicht einfach ein Plugin für WordPress installieren?

Es gibt diverse Plugins für WordPress und auch andere Content-Management-Systeme, welche die Bilder automatisch verkleinern. Wir raten nach Möglichkeit davon ab. Durch die automatisierte Bearbeitung haben Sie das Endergebnis kaum unter Kontrolle.