Anleitungen/Inhalte erstellen/Medien/Bildoptimierung

Bildoptimierung

Um deinen Website-Besuchern das beste Erlebnis zu bieten, ist es wichtig, dass die Bilder deiner Website schnell geladen werden. In diesem Ratgeber erfährst du, wie du deine Bilder optimieren kannst, indem du die Dateigröße reduzierst und dabei die Bildqualität beibehältst.

Empfohlene Bildgröße

Eine WordPress-Website kann eine beliebige Anzahl von Themes, Layouts und anderen Faktoren enthalten, die die empfohlene Bildgröße bestimmen. Daher gibt es keinen einheitlichen Ansatz, den wir hier empfehlen können. Im Allgemeinen kannst du festlegen, dass deine Bilder so groß wie nötig sein sollen, aber nicht größer sein dürfen.

Moderne Digitalkameras und Smartphones zeichnen hochwertige Bilder mit großen Dateigrößen auf. Wenn du diese Bilder auf einer Website anzeigst, kannst du die Dateigröße um 50 % oder mehr reduzieren, ohne die Qualität für die Leser zu beeinträchtigen.

Du kannst die Dateigröße und die Bildabmessungen im Bedienfeld „Bild bearbeiten“ in der Mediathek wie folgt überprüfen:

  1. Rufe die Mediathek im Dashboard deiner Website auf.
  2. Klicke auf das Vorschaubild des Bildes, dessen Dateigröße und Abmessungen du überprüfen möchtest.
  3. Das Vorschaubild ist eingerahmt und unten rechts wird eine Zahl angezeigt.
  4. Klicke auf den Button „Bearbeiten“.
  5. Die Dateigröße und die Bildabmessungen werden dann im Bedienfeld „Bearbeiten“ angezeigt.
Screenshot des Bedienfelds „Bild bearbeiten“ mit Dateigröße, Abmessungen und anderen Bilddetails.

Sieh dir das Bild auf deiner Website an. Wird es in hoher Qualität angezeigt, aber langsam geladen? Wenn es beispielsweise 5000 px breit ist, kannst du es auf 2500 px verkleinern. Wenn es immer noch gut aussieht, verringere die Bildgröße weiter auf 2000 px oder 1800 px, bis du das richtige Gleichgewicht zwischen Bildqualität und Größe gefunden hast.

In den folgenden Abschnitten dieses Ratgebers wird gezeigt, wie du die Bildgröße mit verschiedenen Tools verringern kannst.

Reduzierung der Bildgröße mit kostenloser Software

Es gibt viele Methoden, mit denen du die Größe von Bildern ändern kannst. In den folgenden Abschnitten behandeln wir die auf Computern verfügbaren Tools, Onlineprogramme und erweiterte Software.

Windows

Auf einem Windows-Computer kannst du Microsoft Paint verwenden. Öffne das Bild mit diesem Programm und klicke dann oben im Paint-Fenster auf Größe ändern. Du kannst die Größe des Bildes um einen Prozentsatz verringern und die neue, kleinere Version speichern.

Mac

Auf einem Mac-Computer kannst du die App „Vorschau“ verwenden. Öffne das Bild mit der App, klicke dann auf „Werkzeuge“ und anschließend auf „Größenkorrektur“.

Online-Tools

Wenn du die Bildgröße schnell verringern möchtest, kannst du eines der vielen verfügbaren kostenlosen Online-Tools verwenden. Einige Beispiele:

Mit diesen Diensten kannst du dein Bild hochladen, eine neue Größe auswählen und die neue Version exportieren. Bitte beachte, dass diese Dienste nicht mit WordPress.com in Verbindung stehen.

Jetpack-Mobil-App

Wenn du Beiträge mit der Jetpack-App auf deiner Website veröffentlichst, kann die App Bilder optimieren. Standardmäßig ist die Option „Bilder optimieren“ aktiviert. Du kannst einen Wert für „Max. Bildgröße für Upload“ festlegen, sodass die Größe der Datei beim Hochladen automatisch angepasst wird.

Wenn du die Einstellungen in der Jetpack-App für iPhone und der Jetpack-App für Android anpassen möchtest, kannst du diese Schritte ausführen:

  1. Melde dich auf deinem Smartphone bei der Jetpack-App an.
  2. Klicke rechts unten auf dein Profil-Icon.
  3. Klicke auf „App-Einstellungen“.

Du kannst die Option „Bilder optimieren“ deaktivieren (nicht empfohlen) oder die Einstellung „Max. Bildgröße für Upload“ anpassen. Der Standardwert ist 2000 x 2000 px.

Die Einstellung „Max. Bildgröße für Upload“ ist hervorgehoben.
iOS-Einstellungen
Die Einstellung „Bilder optimieren“ ist aktiviert.
Android-Einstellungen

GIMP-Bildeditor

Wenn du mehr Kontrolle über die Bildoptimierung haben möchtest, kannst du die Bildgröße mit dem GNU Image Manipulation Program (GIMP) verringern. Diese kostenlose Alternative zu Photoshop kann unter Windows, Mac, Linux und weiteren Betriebssystemen installiert werden.

Reduzieren der Bildgröße mit GIMP:

  1. Öffne das Bild in GIMP.
  2. Klicke in der Werkzeugleiste auf Bild und wähle dann „Bild skalieren“ aus.
  3. Ändere bei der Bildgröße den Wert für die Breite in die gewünschte Größe.
  4. Klicke auf Skalieren.
  5. Wähle in der Werkzeugleiste Datei aus. Wähle dann „Exportieren als“ aus.
  6. Wähle als Dateierweiterung „.jpg“ aus.
  7. Wähle Exportieren aus.
  8. Ändere im angezeigten Dialogfeld die Qualität in 60 (bzw. den gewünschten Wert).
  9. Klicke auf Erweiterte Optionen.
  10. Ändere die Zwischenschritte (Subsampling) in 4:2:0 (Chroma geviertelt).
  11. Klicke auf Exportieren.

Hier siehst du einen Vergleich der Ergebnisse. Verwende den Slider, um jedes Bild vollständig anzuzeigen:

The left image has a file size of 1,072KB. The right image has a file size of just 384KB, yet there is no noticeable loss of quality!

Andere Bildbearbeitungssoftware

Andere Bildbearbeitungsprogramme haben möglicherweise einfache Optionen, um eine Reihe von Fotos schnell zu verkleinern und zu komprimieren:

Du kannst auch webbasierte Services nutzen:

Websites mit Plugins

Wenn dein WordPress.com-Tarif Plugins unterstützt, kannst du mit dem integrierten Website-Beschleuniger von Jetpack (CDN) die Ladezeiten von Bildern automatisch verkürzen.

  1. Rufe das Dashboard deiner Website auf.
  2. Navigiere zu Jetpack → Einstellungen.
  3. Klicke auf den Tab mit der Bezeichnung „Performance“.
  4. Scrolle nach unten zum Abschnitt „Performance und Geschwindigkeit“.
Der Abschnitt „Performance und Geschwindigkeit“ in den Performance-Einstellungen von Jetpack.
Website-Beschleuniger

Retina-Displays

Retina-Displays haben eine viel höhere Pixeldichte als normale Displays, was dazu führen kann, dass Bilder mit einer normalen Pixeldichte unscharf erscheinen. Um dies zu verhindern, wird bei der Erkennung eines Retina-Displays das Bild in doppelter Größe ausgegeben, damit es mit maximaler Schärfe angezeigt wird. Das funktioniert jedoch nur, wenn das Bild in deiner Mediathek größer als das Bild auf deiner Website ist.

Selbst bei der doppelten maximalen Anzeigegröße auf deiner Website sollte eine Bilddatei immer noch deutlich kleiner sein als bei der vollen Auflösung, die deine Kamera verwendet, sodass du deine Bilder optimieren und sie auf Retina-Displays gut aussehen lassen kannst.

Copied to clipboard!