Wie man skalierte Bilder in WordPress einfach serviert (Schritt für Schritt)

Möchten Sie skalierte Bilder auf Ihrer WordPress-Website anzeigen?

Anfänger verlangsamen ihre Websites oft, indem sie Bilder hochladen, ohne auf deren Größe zu achten.

Die Bereitstellung von Bildern mit den richtigen Abmessungen verbessert die Leistung von WordPress, ohne die Qualität zu beeinträchtigen.

In diesem Artikel zeigen wir Ihnen, wie Sie skalierte Bilder in WordPress einfach darstellen können.

Warum skalierte Bilder in WordPress servieren?

Auf Ihrer WordPress-Website benötigen Sie Bilder für Ihre Blogbeiträge, Miniaturansichten, Seitenkopfzeilen, Titelbilder und vieles mehr.

Je nach Ihrem Thema nehmen diese Bilder eine bestimmte Anzahl von Pixeln ein. Zum Beispiel könnte Ihr Hauptbild 680×382 Pixel und ein Thumbnail von 100×100 Pixel haben.

Es ist wichtig, dass Sie Bilder verwenden, die so skaliert wurden, dass sie die richtigen Abmessungen für Ihre Website haben. Wenn Ihre Bilder zum Beispiel 680×382 Pixel groß sind, sollten Sie sie in genau dieser Größe speichern.

Andernfalls kann Ihre Website verlangsamt werden, oder die Qualität der Benutzererfahrung wird verringert. Hier sind einige der häufigsten Gründe dafür:

• Ihre Besucher müssen größere Dateien als nötig herunterladen, was die Ladezeiten verlängert.
• Wenn Sie Bilder mit weniger Pixeln verwenden, als der Platz erlaubt, sehen sie bei einer größeren Darstellung unscharf aus.
• Ihre Website muss die Bildgrößen im laufenden Betrieb ändern, was bedeutet, dass sie mehr Prozesse ausführen muss, bevor sie den Nutzern den Inhalt zeigen kann.

In jedem Fall werden Ihre Nutzer eine schlechte Erfahrung machen, und es kann sich auch negativ auf die Suchmaschinenoptimierung Ihres Images auswirken.

Wenn Sie die Leistung Ihrer Website mit dem GTMetrix-Scan testen, wird daher oft empfohlen, skalierte Bilder zu verwenden, um Ihre Website zu beschleunigen.

Schauen wir uns also an, wie man skalierte Bilder in WordPress einfach darstellen kann. Wir werden zwei Methoden behandeln:

Methode 1: Skalierte Bilder mit einem Plugin bereitstellen

Die einfachste Methode, Bilder skaliert darzustellen, ist die Verwendung eines Plugins, das die Bilder Ihrer Website automatisch in der richtigen Größe anzeigt. Diese Methode ist die einfachste, bietet aber nicht so viel Flexibilität wie die zweite Methode.

Das kostenlose Optimole-Plugin ist eines der besten WordPress-Plugins zur Bildkomprimierung und skaliert Ihre Bilder automatisch. Wenn Sie jedoch mehr als 5.000 Besucher pro Monat haben, benötigen Sie die Premium-Version.

Zunächst müssen Sie das Optimole-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Nach der Aktivierung werden Sie automatisch auf die Seite Media “ Optimole weitergeleitet und aufgefordert, sich für einen API-Schlüssel anzumelden oder Ihren bestehenden API-Schlüssel einzugeben. Dies ist sehr einfach.

Vergewissern Sie sich einfach, dass Ihre E-Mail-Adresse korrekt ist, und klicken Sie dann auf die Schaltfläche „Create & Connect Your Account“. Die Verbindung zu Optimole wird dann automatisch hergestellt. Sie müssen nicht einmal eine andere Website besuchen oder den Schlüssel manuell einfügen.

Optimole wird nun im Hintergrund mit der Optimierung Ihrer Bilder beginnen. Es wählt automatisch die richtige Bildgröße für das Gerät und den Browser jedes Besuchers und liefert die Bilder aus dem schnellen Optimole Cloud Service CDN.

Wenn Sie auf die Registerkarte „Einstellungen“ klicken, werden Sie sehen, dass die Bilder in Ihren Beiträgen und Seiten automatisch durch die von Optimole optimierten und skalierten Bilder ersetzt werden.

Dies geschieht nicht im laufenden Betrieb, sondern über ein CDN, so dass die Leistung Ihrer Website nicht beeinträchtigt wird.

Außerdem hat das Plugin “ Lazy Load“ aktiviert, was bedeutet, dass Bilder auf der Seite, die derzeit nicht sichtbar sind, erst geladen werden, wenn sie benötigt werden. Dies ist eine weitere effektive Möglichkeit, die Ladezeit der Seite zu verkürzen und die Leistung der Website zu verbessern.

Diese Einstellungen sind für die meisten Websites gut geeignet. Sie können Optimole jedoch weiter anpassen, indem Sie die Einstellungen im Menü „Erweitert“ verwenden, um zu sehen, was für Ihre Website am besten funktioniert.

Wenn Sie Änderungen an den Einstellungen vornehmen, vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ am unteren Rand der Seite zu klicken.

Methode 2: Manuelles Bereitstellen skalierter Bilder

Sie können Bilder auch ohne ein Plugin skalieren. Dazu gibt es drei Möglichkeiten: Sie können die Bildbearbeitungssoftware, die Bildbearbeitungsfunktion in der WordPress-Mediathek oder eine Änderung der Werte in den WordPress-Medieneinstellungen verwenden.

Skalieren von Bildern mit Bildbearbeitungsprogrammen

Sie können Ihre Bilder auf die richtigen Maße skalieren, bevor Sie sie auf Ihre Website hochladen, indem Sie eine Bildbearbeitungssoftware auf Ihrem Computer verwenden, z. B. Adobe Photoshop oder Affinity Photo.

Die Software ermöglicht es Ihnen, die richtige Pixelzahl für Ihr Bild zu wählen und es mit einer kleinen Dateigröße und in dem von Ihnen bevorzugten Dateiformat zu speichern.

Hier ist zum Beispiel ein Screenshot, der das Beschneidungswerkzeug von Affinity Photo zeigt.

Abgesehen davon, dass Sie die Bildgröße von Anfang an richtig wählen, gibt es noch andere Dinge, die Sie tun können, bevor Sie Ihre Bilder hochladen, um sicherzustellen, dass sie Ihre Website nicht verlangsamen.

Weitere Informationen finden Sie in unserem Leitfaden zur Optimierung von Bildern für die Webleistung.

Skalierung von Bildern in der WordPress-Mediathek

Wussten Sie, dass Sie in WordPress einfache Bildbearbeitungen vornehmen können? Mit der WordPress-Funktion „Bild bearbeiten“ können Sie Bilder zuschneiden, drehen, spiegeln und skalieren.

Wenn Sie einen Beitrag oder eine Seite bearbeiten, müssen Sie auf das Bild klicken, das Sie bearbeiten möchten. Als Nächstes sollten Sie auf die Schaltfläche „Ersetzen“ klicken und dann „Medienbibliothek öffnen“ aus dem Menü wählen.

Dadurch wird die WordPress-Mediathek mit dem ausgewählten Bild geöffnet.

Auf der rechten Seite befindet sich ein Bereich, in dem Sie einen Alt-Text, einen Titel, eine Beschriftung und eine Beschreibung für Ihr Bild hinzufügen können. Sie finden dort auch einen Link „Bild bearbeiten“.

Klicken Sie einfach auf diesen Link, um die Seite „Bild bearbeiten“ aufzurufen.

Hier finden Sie eine Vorschau des Bildes, Bearbeitungsschaltflächen und verschiedene andere Optionen, die beim Skalieren oder Zuschneiden des Bildes nützlich sind.

Um das Bild zu skalieren, ändern Sie einfach einen der Werte für „Neue Abmessungen“ unter Bild skalieren auf der rechten Seite.

Dieses Bild hat zum Beispiel eine sehr große Auflösung von 2560×1637 Pixeln. Wir können es auf eine Breite von 1200 Pixeln verkleinern, indem wir in das erste Feld „Bild skalieren“ tippen.

Sie müssen nur die Breite ändern, da die Höhe des Bildes automatisch angepasst wird, um die Proportionen des Bildes beizubehalten.

Danach klicken Sie einfach auf die Schaltfläche „Skalieren“, um die Auflösung des Bildes zu ändern.

Beachten Sie, dass Sie ein Bild in WordPress nur verkleinern können. Sie können Bilder nicht größer machen, indem Sie die Bildgröße erhöhen.

Detaillierte Anweisungen finden Sie in unseren Anleitungen zur grundlegenden Bildbearbeitung in WordPress und zum Zuschneiden und Bearbeiten von WordPress-Post-Thumbnails.

Anpassen der Bildgröße in den Medieneinstellungen

Wenn Sie Bilder auf Ihre Website hochladen, erstellt WordPress automatisch mehrere Kopien in verschiedenen Größen. Sie können diese Größen anpassen, indem Sie die Seite Einstellungen “ Medien im WordPress-Verwaltungsbereich aufrufen.

Hier können Sie ganz einfach die Abmessungen für Miniaturbilder, mittlere und große Bilder ändern.

Auf manchen Websites benötigen Sie möglicherweise mehr Bildgrößen als nur Thumbnail, Medium und Large. Wie Sie diese Größen erstellen können, erfahren Sie in unserer Anleitung zum Erstellen zusätzlicher Bildgrößen in WordPress.

Wenn Sie die Standardbildgrößen ändern oder zusätzliche Bildgrößen erstellen, sind nur neue Bilder davon betroffen. Sie müssen die Bildgrößen für vorhandene Bilder neu generieren.

Wenn Sie ein Bild zu einem Beitrag oder einer Seite hinzufügen, können Sie in den Blockeinstellungen links auf der Seite eine Bildgröße auswählen.

Wir hoffen, dass dieses Tutorial Ihnen geholfen hat, zu lernen, wie man skalierte Bilder in WordPress ausgibt. Vielleicht interessiert Sie auch unser Leitfaden zur Optimierung der Bild-SEO in WordPress oder unser Artikel über die Verwendung von KI zur Erstellung von Bildern für Blogbeiträge.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.