Wie Sie skalierte Bilder in WordPress einfach und Schritt für Schritt bereitstellen

Wenn Sie einen Geschwindigkeitstest für Ihre WordPress-Site durchgeführt haben, haben Sie wahrscheinlich eine Warnung bezüglich „serving scaled images“ (Skalierte Bilder bereitstellen) gesehen. Tools wie Google PageSpeed und GTmetrix kennzeichnen dies oft, erklären es aber nicht klar.

Das bedeutet lediglich, dass Ihre Bilder größer sind als der Platz, in dem sie angezeigt werden. Das kann Ihre Seiten verlangsamen, sich negativ auf SEO auswirken und mobile Nutzer frustrieren.

Wir haben WordPress-Benutzern geholfen, dieses Problem zu beheben, ohne jedes Bild von Hand bearbeiten oder im Code wühlen zu müssen. Mit dem richtigen Ansatz können Sie es schnell lösen und verhindern, dass es erneut auftritt.

In diesem Leitfaden zeigen wir Ihnen Schritt für Schritt, wie Sie skalierte Bilder in WordPress ausliefern, ganz ohne technische Kenntnisse.

Warum skalierte Bilder in WordPress ausliefern?

Auf Ihrer WordPress-Website verwenden Sie wahrscheinlich Bilder für Blogbeiträge, Thumbnails, Seitenkopfzeilen, Titelbilder und mehr. Jedes Bild erfüllt einen Zweck und trägt dazu bei, ein visuelles Erlebnis für Ihre Besucher zu schaffen.

Abhängig von Ihrem Theme werden diese Bilder in bestimmten Pixelabmessungen angezeigt. Zum Beispiel kann Ihr Beitragsbild bei 680×382 Pixeln angezeigt werden, während ein Miniaturbild 100×100 Pixel groß sein kann.

Es ist wichtig, Bilder in den genauen Abmessungen zu speichern, die für Ihre Website benötigt werden. Wenn Ihr Vorschaubildbereich beispielsweise 680 x 382 Pixel beträgt, sollte die Bilddatei diesen Abmessungen entsprechen.

Wenn Bilder nicht skaliert werden, kann dies zu langsameren Ladezeiten oder einer schlechteren Benutzererfahrung führen. Hier sind einige Gründe dafür:

• Größere als notwendige Dateien verlangsamen die Ladezeiten, da Besucher zusätzliche Daten herunterladen müssen.
• Die Verwendung von Bildern mit weniger Pixeln als benötigt kann dazu führen, dass sie bei größeren Anzeigegrößen unscharf oder verpixelt erscheinen.
• Ihre Website muss Bilder bei Bedarf in der Größe ändern, was mehr Verarbeitungszeit erfordert, bevor der Inhalt für die Benutzer angezeigt wird.

All dies kann zu einer weniger zufriedenstellenden Erfahrung für Ihre Besucher führen und sogar Ihre Bild-SEO beeinträchtigen.

Deshalb sehen Sie, wenn Sie die Leistung Ihrer Website mit Tools wie GTMetrix testen, oft Empfehlungen, skalierte Bilder für bessere Geschwindigkeit bereitzustellen.

Nun wollen wir uns ansehen, wie man skalierte Bilder in WordPress ausliefert. Wir behandeln zwei einfache Methoden zur Optimierung Ihrer Bilder für die Leistung.

• Methode 1: Ausliefern skalierter Bilder mit einem Plugin (einfacher)
• Methode 2: Manuelles Ausliefern skalierter Bilder
• Häufig gestellte Fragen zur Skalierung von Bildern in WordPress
• Bonus-Ressourcen

Methode 1: Ausliefern skalierter Bilder mit einem Plugin (einfacher)

Der einfachste Weg, skalierte Bilder in WordPress auszuliefern, ist die Verwendung eines Plugins, das Bilder automatisch in den richtigen Abmessungen für das Gerät jedes Besuchers neu skaliert und liefert.

Wir empfehlen diese Methode für die meisten Anfänger, da sie alles im Hintergrund erledigt. Die Einrichtung ist schnell und funktioniert gut für typische Websites.

Das kostenlose Optimole-Plugin ist eines der besten WordPress-Bildkomprimierungs-Plugins, die wir getestet haben. Es skaliert Bilder automatisch für Sie. Beachten Sie jedoch, dass Sie die Premium-Version benötigen, wenn Ihre Website mehr als 5.000 Besucher pro Monat hat.

Installieren und aktivieren Sie zunächst das Optimole-Plugin. Sie können unserer Anleitung zum Installieren eines WordPress-Plugins folgen, wenn Sie Hilfe benötigen.

Nach der Aktivierung gehen Sie zu Medien » Optimole. Sie werden aufgefordert, sich für einen API-Schlüssel anzumelden oder Ihren vorhandenen einzugeben. Der Vorgang ist einfach.

Bestätigen Sie einfach Ihre E-Mail und klicken Sie auf die Schaltfläche „Konto erstellen & verbinden“. Optimole verbindet Ihre Website automatisch, ohne dass Sie Schlüssel einfügen oder das Dashboard verlassen müssen.

Optimole beginnt nun mit der Optimierung Ihrer Bilder im Hintergrund. Es wählt die richtige Größe basierend auf dem Bildschirm jedes Besuchers aus und liefert Bilder über sein globales CDN aus, sodass Ihre Website schnell bleibt.

Auf der Registerkarte „Einstellungen“ sehen Sie, dass Ihre Bilder jetzt durch optimierte und skalierte Versionen ersetzt werden. Dies geschieht automatisch und verlangsamt Ihren Server dank des CDN nicht.

Optimole ermöglicht standardmäßig auch Lazy Loading. Das bedeutet, dass Bilder, die nicht auf dem Bildschirm sichtbar sind, erst geladen werden, wenn sie benötigt werden – was die Ladezeit der Seite reduziert und die Leistung verbessert.

Die Standardeinstellungen funktionieren für die meisten Websites gut, aber Sie können die Einstellungen im Menü „Erweitert“ feinabstimmen. Stellen Sie einfach sicher, dass Sie auf die Schaltfläche „Änderungen speichern“ klicken, wenn Sie Aktualisierungen vornehmen.

Diese Methode ist ideal, wenn Sie eine Lösung zum Einrichten und Vergessen wünschen. Sie ist schnell, anfängerfreundlich und erfordert keine manuelle Bearbeitung jedes Bildes.

Das gesagt, es ist nicht die flexibelste Option. Wenn Sie die volle Kontrolle über die Bildabmessungen benötigen oder die Optimierung selbst durchführen möchten, dann ist das manuelle Bereitstellen skalierter Bilder möglicherweise eine bessere Wahl.

Methode 2: Manuelles Ausliefern skalierter Bilder

Manuelles Skalieren von Bildern gibt Ihnen die volle Kontrolle darüber, wie Ihre Bilder aussehen und funktionieren. Es erfordert etwas mehr Aufwand, aber die Ergebnisse können präziser und konsistenter auf Ihrer Website sein.

Hier ist, warum dieser Ansatz mehr Flexibilität bietet:

• Sie können genaue Abmessungen und Bildformate vor dem Hochladen auswählen.
• Sie können Dateigrößen reduzieren, ohne auf Tools von Drittanbietern zurückzugreifen.
• Sie vermeiden Plugin-Beschränkungen oder monatliche Besucherlimits.
• Sie erhalten konsistentere Ergebnisse über verschiedene Themes und Layouts hinweg.

Deshalb ist diese Methode ideal für Designer, Fotografen und alle, die eine präzise Kontrolle wünschen. Es gibt drei Möglichkeiten, dies zu tun:

1. Durch die Verwendung einer Bildbearbeitungssoftware (empfohlen)
2. Die WordPress-Mediathek
3. In Ihren WordPress-Medieneinstellungen.

Beginnen wir mit dem Ansatz der Bildbearbeitungssoftware.

1. Bilder mit Bildbearbeitungssoftware skalieren

Dies ist die Methode, die wir auf unseren Websites verwenden. Mit Tools wie Adobe Photoshop oder Affinity Photo können Sie die Größe Ihrer Bilder ändern, bevor Sie sie hochladen.

Sie können die richtigen Pixelabmessungen auswählen, das benötigte Format wählen und die Datei mit einer kleineren Größe speichern – alles in einem Schritt.

Hier ist ein Beispiel für das Zuschneidewerkzeug von Affinity Photo in Aktion:

Neben der Wahl der richtigen Abmessungen gibt es weitere Möglichkeiten, Bilder vor dem Hochladen leichtgewichtig und schnell ladend zu halten.

Weitere Tipps finden Sie in unserem Leitfaden zur Optimierung von Bildern für die Web-Performance.

2. Bilder in der WordPress-Mediathek skalieren

Sie können Bilder auch direkt in WordPress in der Größe ändern. Der integrierte Bildeditor ermöglicht es Ihnen, hochgeladene Bilder zuzuschneiden, zu drehen, zu spiegeln und zu skalieren.

Öffnen Sie dazu den Beitrag oder die Seite, auf der das Bild angezeigt wird. Klicken Sie auf das Bild, dann auf die Schaltfläche „Ersetzen“ und wählen Sie „Mediathek öffnen“.

Dies öffnet die Mediathek mit Ihrem ausgewählten Bild.

Auf der rechten Seite sehen Sie Felder für Alternativtext, Titel, Bildunterschrift und Beschreibung. Darunter klicken Sie auf den Link „Bild bearbeiten“.

Das bringt Sie zum Bildschirm des Bildeditors.

Von hier aus können Sie das Bild in der Vorschau anzeigen und grundlegende Bearbeitungswerkzeuge verwenden. Um die Bildgröße zu ändern, suchen Sie auf der rechten Seite nach der Option „Bild skalieren“.

Geben Sie Ihre gewünschte Breite ein, und die Höhe wird automatisch aktualisiert, um das Seitenverhältnis beizubehalten.

Zum Beispiel kann ein Bild mit einer Größe von 2560×1637 mit einem einzigen Klick auf 1200 Pixel Breite skaliert werden.

Nachdem Sie die neue Breite eingegeben haben, klicken Sie auf die Schaltfläche „Skalieren“, um die Änderung zu speichern.

Beachten Sie, dass Sie Bilder in WordPress nur verkleinern, nicht vergrößern können. Eine Vergrößerung kann die Qualität beeinträchtigen oder fehlschlagen.

Benötigen Sie Hilfe bei der Bildbearbeitung in WordPress? Sehen Sie sich unsere Tutorials zur grundlegenden Bildbearbeitung und zum Schneiden von Thumbnails an.

Bildgrößen in den Medieneinstellungen anpassen

Standardmäßig erstellt WordPress mehrere Versionen jedes Bildes in verschiedenen Größen. Sie können diese Standardgrößen ändern, indem Sie in Ihrem Dashboard zu Einstellungen » Medien gehen.

Hier können Sie die Abmessungen für Miniaturansicht, mittel und groß anpassen. Dies wirkt sich darauf aus, wie Bilder auf Ihrer gesamten Website skaliert und angezeigt werden.

Wenn Sie mehr Bildgrößen benötigen, können Sie zusätzliche erstellen, indem Sie ein paar Codezeilen oder ein Plugin verwenden.

Nachdem Sie Ihre Bildgrößen geändert haben, müssen Sie Thumbnails neu generieren für vorhandene Bilder, damit diese die neuen Einstellungen verwenden.

Beim Einfügen eines Bildes in einen Beitrag oder eine Seite können Sie im Blockeinstellungen-Panel auch die anzuzeigende Größe auswählen.

Häufig gestellte Fragen zur Skalierung von Bildern in WordPress

Nachfolgend finden Sie einige häufige Fragen, die Benutzer zu Bildskalierung und -verwaltung in WordPress haben.

update_option( 'medium_size_w', 0 );
update_option( 'medium_size_h', 0 );
update_option( 'large_size_w', 0 );
update_option( 'large_size_h', 0 );

Bonus-Ressourcen

Medien und Bilder machen eine WordPress-Website ansprechend. Im Folgenden finden Sie einige zusätzliche Ressourcen, die Ihnen helfen, die Medienfunktionen von WordPress voll auszuschöpfen.

• So fügen Sie ein Hero-Bild in WordPress hinzu
• Titelbild vs. Beitragsbild im WordPress Block Editor (Anfänger-Leitfaden)
• Warum Sie niemals ein Video auf WordPress hochladen sollten
• So erstellen Sie eine Bildergalerie in WordPress (Schritt für Schritt)
• So fügen Sie Ihre Social-Media-Feeds zu WordPress hinzu (Schritt für Schritt)

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie skalierte Bilder in WordPress bereitstellen. Möglicherweise möchten Sie auch unseren Leitfaden zur Optimierung der WordPress-Bild-SEO oder unseren Artikel zur Verwendung von KI zur Generierung von Bildern für Blogbeiträge lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.