WordPress Bildgrößen sind komplexer als du vielleicht erwartest. Es ist wichtig zu verstehen, wie Bildgrößen in WordPress funktionieren, was die Standard-Bildgrößen sind und wie man eigene Bildgrößen definiert, um deine Webseite effektiv zu verwalten.

Mit diesem Wissen kannst du sicherstellen, dass du die richtige Art von Bildern in den passenden Größen an den richtigen Stellen hast, damit du das Beste aus deiner visuellen Content-Strategie herausholen kannst.

Diese Taktiken werden auch die Share-Worthiness deiner Beiträge verbessern, was sich in mehr Sichtbarkeit und Traffic niederschlägt. Statistiken zeigen, dass sich Leser nach drei Tagen nur an 10% der gelesenen Textinhalte erinnern, aber diese Zahl schießt auf 65% hoch, wenn du visuell ansprechende Bilder zu deinen Inhalten hinzufügst.

In diesem ausführlichen Guide erfährst du alles, was du über WordPress-Bildgrößen wissen musst.

Aufgeregt? Los geht’s!

Willst du lieber die Video-Version sehen?

Wie WordPress die Bilder verwaltet, die du hochlädst

Das Hochladen von Bildern in WordPress ist ziemlich einfach, aber im Backend von WordPress geht eine Menge vor sich, während es sie verarbeitet.

Das erste, was WordPress macht, wenn du ein Bild hochlädst, ist drei verschiedene Größen deines Bildes zu erstellen. Das bedeutet, dass du am Ende vier Bilder für jedes Bild hast, das du hochlädst:

  • Thumbnail
  • Mittel
  • Groß
  • Original Größe

WordPress erstellt all diese verschiedenen Größen, um deine Bilder in der am besten geeigneten Größe für jeden Besucher bereitzustellen. Deine Webseite zeigt deinen Lesern immer die richtigen Bilder an, basierend auf dem Gerät, das sie benutzen, was ihre Erfahrung beschleunigt und verbessert.

Du könntest deine Bilder immer manuell bearbeiten, um diese zusätzlichen Größen bereitzustellen, aber dies in einem Tool wie Photoshop genau zu tun, ist kein kleines Unterfangen. Es wird eine Menge mühsamer Arbeit bedeuten, weshalb WordPress dir diese Mühe erspart.

WordPress Bildgrößen: Wichtige Dinge, die du beachten solltest

Bevor wir uns mit den technischen Aspekten der WordPress Bildgrößen beschäftigen, solltest du ein paar wichtige Hinweise kennen.

Wir haben besprochen, wie WordPress drei Standard-Bildgrößen für dich erstellt, aber was ist, wenn du eine andere Größe als die Standardwerte von WordPress haben musst? Was ist, wenn du insgesamt mehr Größen möchtest?

Gute Nachrichten! Du kannst das ganz einfach tun. WordPress erlaubt es dir, die Standard-Bildgrößen zu ändern und so viele zusätzliche Größen hinzuzufügen, wie du möchtest. Wir werden das in Kürze genauer erklären.

Aber bevor wir dazu kommen, solltest du wissen, dass es bestimmte Voraussetzungen gibt, damit dies so funktioniert, wie du es möchtest.

Eine davon ist, dass du versuchen solltest, deine Bilder in der größten Größe hochzuladen, die du benötigst. Während WordPress es für kleinere Geräte kleiner macht, wird es die volle Größe (Originalgröße) verwenden, wo das Bild am größten sein muss.

Angenommen, du lädst ein Bild hoch, das kleiner ist als die größte Größe, die du in WordPress definiert hast. In diesem Fall wird WordPress dieses Bild nicht in der größten Größe korrekt anzeigen. Außerdem wird es einen deutlichen Qualitätsverlust geben.

Das heißt, du musst auch darauf achten, dass du keine Bilder hochlädst, die größer sind als das, was die größte Größe sein muss. WordPress wird solche Bilder niemals verwenden, da sie zu groß sind und unnötig Platz auf deinem Server fressen.

Daher solltest du die Größe des Bildes, das du hochlädst, überprüfen und sicherstellen, dass es die größte Größe hat, die es haben muss, bevor du es zu WordPress hochlädst, aber nicht größer als das.

Wo und wie speichert WordPress deine Bilder?

Soweit es dein Admin-Panel betrifft, speichert WordPress deine hochgeladenen Bilder in der Medienbibliothek. Du kannst alle deine hochgeladenen Bilder sehen, indem du mit der Maus auf die Option Medien gehst und auf Bibliothek klickst.

Die WordPress Medienbibliothek
Die WordPress Medienbibliothek

Du kannst sie nach Medientyp (Bild, Video, Audio, etc.) und Datum sortieren. Beachte jedoch, dass du die Bilder nur nach Datum sortieren kannst, wenn du diese Funktion in den Einstellungen nicht deaktiviert hast.

Es gibt auch ein Suchfeld auf der rechten Seite, das dir hilft, dein hochgeladenes Bild aufzuspüren. Gib einfach ein Wort ein, das du im Titel, in der Bildunterschrift oder in der Beschreibung deines Bildes verwendet hast, um es zu finden.

Deine Bilder werden in den Uploads-Ordnern deiner Seite gespeichert (wp-content/uploads/). Um auf diesen Ordner zuzugreifen, musst du einen FTP/SFTP Client verwenden. Es gibt mehrere Unterverzeichnisse im Uploads-Ordner deiner Seite, in denen deine Bilder nach Upload-Datum sortiert sind (vorausgesetzt, du hast die Option zum Sortieren nach Datum in deinen Einstellungen aktiviert).

Du kannst auch eigene Ordner für deine Mediendateien erstellen, aber wir empfehlen dies nur, wenn du ein fortgeschrittener Nutzer bist.

Was sind die Standard WordPress Bildgrößen?

Wenn es um WordPress und Bildgrößen geht, haben wir es immer mit vier verschiedenen zu tun, mit deiner Original-Bilddatei und den drei verschiedenen Größen, die WordPress standardmäßig erstellt:

  • Thumbnail Größe: 150px (quadratisch)
  • Mittlere Größe: Maximale Breite und Höhe von 300px
  • Große Größe: Maximale Breite und Höhe von 1024px
  • Volle Größe: Die Originalgröße deines Bildes

Wie wir bereits erwähnt haben, solltest du deine Bilder in 1024px hochladen, wenn du nur diese Standardgrößen verwenden willst. Das ermöglicht es dir, deine Bilder auch in der größten Größe korrekt auszuliefern, was nicht möglich ist, wenn dein Bild kleiner ist als die größte Größe, die WordPress verwendet (die standardmäßig 1024px beträgt).

Was ist die ideale Größe für ausgewählte WordPress-Bilder?

Ausgewählte WordPress-Bilder sind entscheidend für die Leserbindung. Ähnlich wie der Einband eines Buches gibt das ausgewählte Bild einen Vorgeschmack auf den Inhalt des Artikels.

Sie werden am häufigsten in WordPress-Beiträgen angezeigt, können aber auch in Seiten und benutzerdefinierten Beitragstypen eingefügt werden. Da das ausgewählte Bild auch von Suchmaschinen und Websites für soziale Medien angezeigt wird, ist es wichtig, die richtige Größe zu wählen.

Es gibt zwar unterschiedliche Meinungen zu diesem Thema, aber allgemeiner Konsens ist, dass die ideale Größe für ein ausgewähltes Bild in WordPress etwa 1200 × 630 Pixel beträgt. Ein Bild mit diesen Maßen sollte gut auf deine Seite passen, unabhängig davon, wie groß oder klein der Bildschirm deines Lesers ist.

Außerdem weist Google darauf hin, dass dein ausgewähltes WordPress-Featured Image mindestens 1.200 Pixel breit sein muss, damit deine Seiten für den Google Discover Feed geeignet sind (eine großartige Quelle für zusätzlichen Traffic von Google).

Aber ist das die Standardgröße für ausgewählte Bilder in WordPress?

Es wird dich vielleicht überraschen, aber WordPress bietet von Haus aus keine Einstellung für die Größe ausgewählter Bilder. Stattdessen werden die ausgewählten Bilder standardmäßig in ihrer ursprünglichen Upload-Größe angezeigt, es sei denn, sie werden durch das Design der Seite eingeschränkt oder du wählst eine der anderen Standardgrößen von WordPress (wie „Mittel“ oder „Groß“).

Viele WordPress-Themes – darunter auch das Standard-Theme von WordPress, Twenty Twenty-One – legen jedoch eigene Größen für ausgewählte Bilder fest, also überprüfe die Einstellungen deines Themes.

Was ist die ideale Größe für WordPress-Header-Bilder?

Ähnlich wie ausgewählte Bilder können auch Header-Bilder deinen Lesern einen kleinen Einblick in das Thema und die Stimmung der Seite geben. Auch wenn sie nicht so häufig über Suchergebnisseiten oder Social Media Feeds geteilt werden, ist es für die Geschwindigkeit und Integrität deiner Seite wichtig, dass sie die richtige Größe haben.

Da Header-Bilder oft vom Design einer Seite abhängen, können sie in ihren Abmessungen stark variieren. Es gibt keine Einheitsgröße, daher solltest du das Design und die Responsiveness deiner Seite berücksichtigen, bevor du die Größe deines WordPress-Headerbildes wählst.

Die Theme-Entwickler empfehlen jedoch, dass WordPress-Header-Bilder ein 16:9-Verhältnis haben sollten, z. B:

  • 1920 × 1080 Pixel
  • 1280 × 720 Pixel
  • 1152 × 648 Pixel

Wie bei den ausgewählten Bildern gibt WordPress auch für Header-Bilder keine Standardgröße vor. Möglicherweise verfügt dein Theme jedoch über eine Option, mit der du die Größe der Kopfzeile in den Einstellungen des Themes im Menü Erscheinungsbild anpassen kannst.

Wenn dein gewähltes Theme keine Möglichkeit bietet, die Größe des WordPress-Headerbildes zu ändern, kannst du es trotzdem selbst anpassen. Wie das geht, erklären wir dir gleich.

Wie du die Standard-Bildgrößen änderst (und wann du das tun musst)

Während die Standardgrößen der WordPress-Bilder für die meisten Nutzer gut funktionieren, haben einige Nutzer vielleicht andere Anforderungen. Du bevorzugst vielleicht eine etwas größere Größe für deine Thumbnails oder eine kleinere Größe für die großen Bilder.

Das Ändern der Standard-Bildgrößen in WordPress macht dann Sinn, wenn du die meisten Bilder, die du hochlädst, selbst bearbeitest, weil die Standard-Bildgrößen von WordPress für deinen Anwendungsfall nicht geeignet sind.

Bevor du neue benutzerdefinierte Bildgrößen zusätzlich zu den Standard-Bildgrößen hinzufügst, solltest du dir bewusst sein, dass du viel mehr Bilddateien in der Datenbank deiner Seite speichern würdest, als du eigentlich müsstest. Das kann zu Performance-Problemen auf deiner Seite führen und mehr Speicherplatz verbrauchen als nötig.

Das Gleiche gilt für bildbasierte Seiten, die sich an bestimmte Bildgrößen halten müssen. Fotografen, Designer und andere, die große Bilder ausliefern, mögen es, wenn die Größe überall auf der Seite konsistent ist, um Einheitlichkeit zu gewährleisten.

Ebenso müssen einige Landingpages bestimmte Bildgrößen anzeigen, und die Standardgrößen von WordPress sind vielleicht nicht geeignet. Und ein eCommerce Shop muss typischerweise größere Thumbnails verwenden, die mehr Details offenbaren.

Es gibt viele andere Gründe, warum du die Standard-Bildgrößen ändern möchtest, aber du verstehst die Idee.

WordPress versteht das auch, weshalb es dir erlaubt, diese Standardwerte zu ändern.

Schritte zum Ändern der WordPress Standard-Bildgrößen

Hier ist die Schritt-für-Schritt-Anleitung zum Ändern der Standard-Bildgrößen in WordPress.

Schritt 1: Fahre mit der Maus über Einstellungen und klicke auf die Option Medien, die erscheint:

WordPress Media Settings zum Ändern der Standard-Bildgrößen.
WordPress Media Settings zum Ändern der Standard-Bildgrößen.

Schritt 2: Ändere die Größen auf das, was du willst, indem du die Zahlen bearbeitest, wie wir es unten getan haben:

Beispiele für aktualisierte Bildgrößen in den Medieneinstellungen.
Beispiele für aktualisierte Bildgrößen in den Medieneinstellungen.

Schritt 3: Klicke auf die Schaltfläche Änderungen speichern am unteren Rand.

Nun werden alle Bilder, die du ab jetzt hochlädst, in diesen neuen Standardgrößen angezeigt.

Einige Tutorials schlagen vor, dass du „0“ für die Standard-Bildgrößen eingibst. Wir raten jedoch davon ab, auch wenn es dir helfen kann, Platz zu sparen.

Wenn du diese Werte auf „0“ änderst, dann wird WordPress dein Bild in voller Größe (Originalgröße) an allen Stellen und auf allen Geräten verwenden, was zu einem massiven Anstieg der Bandbreitennutzung auf deiner Seite führen würde. Außerdem würde dies mit ziemlicher Sicherheit die Ladezeit von Seiten verlangsamen, die viele dieser Bilder anzeigen.

Wie man benutzerdefinierte Bildgrößen zu WordPress hinzufügt

Wenn du alle deine bisherigen WordPress-Bilder auf diese neuen Größen umstellen musst, kannst du mehrere großartige Plugins verwenden, die wir im Folgenden im Detail vorstellen.

Für Nutzer, die dazu neigen, viele verschiedene Arten von Bildern zu verwenden, kann es essentiell sein, mehr Bildgrößen als die drei Standardgrößen zu haben, die WordPress anbietet.

Die Standard-Bildgrößen mögen für die Standard-Bildertypen ausreichen, aber für etwas wie Pop-up-Grafiken, Widgets oder Slider-Bilder musst du wahrscheinlich mehr Bildgrößen haben.

Benutzerdefinierte Bildgrößen geben dir die Flexibilität, die Funktionalität deiner WordPress-Seite zu verbessern und eine Menge Zeit zu sparen, um die Größe deiner Bilder einzeln zu ändern.

Nun, da wir das als Basis festgelegt haben, lass uns einen genaueren Blick auf den Prozess werfen, der mit dem Hinzufügen dieser benutzerdefinierten Bildgrößen auf deiner WordPress-Seite verbunden ist.

Du hast hier zwei Möglichkeiten. Die erste ist, ein Plugin zu verwenden, das alles mit ein paar Klicks für dich erledigt. Die zweite ist der manuelle Weg, indem du die benötigten Code-Strings in die Dateien deiner Seite einfügst.

Lass uns zuerst zur Plugin-Methode kommen.

Hinzufügen eigener Bildgrößen mit Image Regenerate & Select Crop

Das Image Regenerate & Select Crop Plugin geht über das Regenerieren von Thumbnails (weiter unten beschrieben) hinaus und ermöglicht mehr Anpassungen und Funktionen.

Du kannst nicht nur die Standard-Bildgrößen ändern, sondern auch bestehende Bilder neu generieren, um sie an deine bevorzugten Größen anzupassen, Standard-Zuschnittoptionen für Bilder festlegen und Thumbnails neu generieren.

Benutzerdefinierte Bildgrößenoptionen über das Image Regenerate & Select Crop Plugin.
Benutzerdefinierte Bildgrößenoptionen über das Image Regenerate & Select Crop Plugin.

Einmal installiert und aktiv, kannst du so viele neue benutzerdefinierte Bildgrößen wie du willst über die Standard WordPress Einstellungen > Medien Seite erstellen.

Manuelles Hinzufügen von benutzerdefinierten Bildgrößen

Obwohl es ein relativ einfacher Prozess ist, solltest du als allererstes ein Backup deiner Webseite erstellen, für den Fall, dass etwas schief geht, während du diese Anpassungen vornimmst. Sobald das Backup abgeschlossen ist, gehe in das Admin Dashboard deiner WordPress-Seite.

Dort gehst du auf den Menüpunkt Darstellung (Appearance) und wählst Editor (in manchen Fällen auch Theme Editor genannt).

Als nächstes suchst du die Datei functions.php und überprüfst, ob der folgende Code dort bereits vorhanden ist (benutze die Suchfunktion, um ihn schnell zu finden). Wenn er schon da ist, musst du nichts tun.

Wenn er nicht da ist, musst du diesen String in die Datei einfügen:

add_theme_support( 'post-thumbnails' );
Hinzufügen des Hooks für benutzerdefinierte Bildgrößen zur functions.php.
Hinzufügen des Hooks für benutzerdefinierte Bildgrößen zur functions.php.

Nachdem du diesen Code hinzugefügt hast, klicke unten auf den Button Datei aktualisieren, um die Funktion zu aktivieren, mit der du eigene Bildgrößen erstellen kannst.

Jetzt ist es an der Zeit, den Code für die spezifischen Bildgrößen hinzuzufügen, die du haben möchtest. Suche nach dem String „add_image_size“ in deiner functions.php Datei, denn dort musst du deine Änderungen vornehmen:

add_image_size( 'my-custom-image-size', 800, 640 );

Vor allem solltest du den Namen innerhalb der Anführungszeichen mit dem Namen deiner neuen benutzerdefinierten Bildgröße ändern. Wir empfehlen, ihn einfach und beschreibend zu halten (z.B. „main-post-image“).

Nachdem du dich um den Namen gekümmert hast, musst du die Bildgrößen selbst deklarieren. Der erste Zahlenwert ist die Bildbreite, der zweite die Bildhöhe.

Hier ist ein Screenshot, der unseren Beispielcode zeigt, der in der functions.php Datei hinzugefügt wurde:

Hinzufügen von benutzerdefinierten Bildgrößenabmessungen zur functions.php.
Hinzufügen von benutzerdefinierten Bildgrößenabmessungen zur functions.php.

Cropping verstehen

Wenn ein Bild ohne Zuschneiden verkleinert wird, ist es nur eine verkleinerte Version des Originals. Wenn es jedoch „beschnitten“ wird, wird der beschnittene Teil aus dem fertigen Bild entfernt.

Es ist genau so, als würde man ein Bild physisch zuschneiden. Wenn du deine Schere zu einem Porträt nimmst und alles unterhalb der Schultern der Person herausschneidest, hast du das Bild „beschnitten“. So funktioniert es auch digital.

Das Ziel ist es, die Dateigröße eines Bildes zu reduzieren, da das Zuschneiden nicht die richtige Wahl ist. Du würdest Elemente entfernen, die du vielleicht behalten möchtest, während du eine große Dateigröße beibehältst. Allerdings kann das Zuschneiden für Bilder sinnvoll sein, die perfekt in eine bestimmte Größe passen müssen, wie z.B. Featured Images oder Profilbilder.

Die Hauptmotive können für so etwas wie Featured Images zu klein werden. Sie sollten trotzdem die Belichtung bekommen, die sie brauchen, wenn sie ohne Beschneidung verkleinert werden. Finde also heraus, was für die verschiedenen Arten von Bildern, die du verwendest, am besten funktioniert und stelle die Zuschneidefunktion entsprechend ein.

Wenn du benutzerdefinierte Bildgrößen hinzufügst, kannst du WordPress dazu bringen, die Bilder automatisch zu beschneiden, basierend auf der von dir eingestellten Größe und der Originalgröße. Dazu musst du „true“ am Ende des Codes hinzufügen.

Hier ist wieder unser obiges Beispiel mit aktivierter Beschneidungsfunktion.

add_image_size( 'name-for-your-custom-image', 800, 640, true );

Wenn du die Bilder nicht beschneiden willst, kannst du entweder „false“ statt „true“ eingeben oder beides weglassen. Wenn du keines von beiden einsetzt, wird der Code automatisch die Option „false“ annehmen. Auf diese Weise wird WordPress deine Bilder nicht beschneiden.

Hinzufügen einer benutzerdefinierten Bildgröße zu deinem Theme

Nachdem du die benutzerdefinierten Bildgrößen erstellt hast, die du brauchst, musst du auch den Code in deinem Theme aktualisieren. Dadurch wird dein Theme die benutzerdefinierten Bildgrößen so anzeigen, wie du es dir wünschst.

Wenn du ein absoluter Anfänger bei der Bearbeitung von Code bist, erstelle bitte ein Backup deiner Seite, bevor du dies durchführst.

Nun musst du deine Theme Datei in der Post Loop finden und den folgenden Code hinzufügen:

the_post_thumbnail( 'your-specified-image-size' );

Um diese Datei zu finden, klicke auf den Theme Editor unter der Darstellung (Appearance). Suche hier nach der Datei index.php – das ist die Theme-Datei, in der sich die Beitragsschleife befindet, die du bearbeiten musst.

Sobald du sie gefunden hast, fügst du den oben erwähnten Code ein, wie im Bild unten zu sehen:

Hinzufügen des Hooks für benutzerdefinierte Bildgrößen zur functions.php.
Hinzufügen des Hooks für benutzerdefinierte Bildgrößen zur functions.php.

Auch hier wäre es am besten, wenn du den Teil „new-homepage-feature“ durch den Namen der benutzerdefinierten Bildgröße ersetzt, die du erstellt hast.

Sobald du diesen Code hinzugefügt und die Datei aktualisiert hast, wirst du die benutzerdefinierte Bildgröße in deiner Mediathek sehen. Lade ein neues Bild hoch, um es auszuprobieren.

Alte Thumbnails aktualisieren

Während sich das Erstellen und Hinzufügen von benutzerdefinierten Bildgrößen großartig anfühlt, lässt es dich mit einer anderen offenen Aufgabe zurück: Was ist mit all den alten Bildern, die du bereits hochgeladen hast?

Mach dir darüber keine Sorgen – einige großartige WordPress Plugins sind für diese Aufgabe sehr nützlich! Lass uns sehen, wie sie dir helfen können, dich um deine alten Thumbnails zu kümmern.

Regenerate Thumbnails Plugin

Regenerate Thumbnails ermöglicht es dir, die Bilder automatisch in den neuen Größen neu hochzuladen, einschließlich aller benutzerdefinierten Bildgrößen, die du hinzugefügt hast.

Um es zu installieren, fahre mit der Maus über den Menüpunkt Plugins und klicke auf Neu hinzufügen. Gib dann „Regenerate Thumbnails“ in das Suchfeld ein.

Installiere das Regenerate Thumbnails Plugin, indem du auf den Install Now Button klickst.

Installiere das Regenerate Thumbnails Plugin.
Installiere das Regenerate Thumbnails Plugin.

Nachdem die Installation abgeschlossen ist, klicke auf die Schaltfläche Aktivieren, um es zu benutzen.

Als Nächstes fahre mit dem Mauszeiger über das Menü Werkzeuge auf der linken Seite und klicke auf Thumbnails neu generieren:

Die Einstellungsseite für das Regenerate Thumbnails Plugin.
Die Einstellungsseite für das Regenerate Thumbnails Plugin.

Du kannst auf Thumbnails für alle [#] Anhänge neu generieren klicken, um auch für alle deine alten Bilder neue Bildgrößen zu erzeugen.

Wie du auf dem Bild oben sehen kannst, listet Regenerate Thumbnails auch alle Bildgrößen auf, die derzeit auf deiner Seite aktiv sind.

Vielleicht findest du einige Bildgrößen, die du noch nicht kanntest. Oft werden diese von Plugins erstellt, vor allem wenn sie das Aussehen, das Design oder die Funktionalität deiner Seite verbessern sollen.

Verwendung des in WordPress integrierten Editors für die Bildgröße

Wie wir bereits betont haben, solltest du nur Bildgrößen erstellen, die du häufig verwenden wirst. Für Bildgrößen, die du nur selten verwendest, ist es sinnvoll, die Bildgrößen manuell mit dem in WordPress integrierten Editor für Bildgrößen zu bearbeiten.

Wir erklären dir kurz, wie du den eingebauten Editor nutzen kannst, um Bildgrößen schnell und einfach zu bearbeiten.

Zuerst klickst du auf das Menü Medien, um zur Medienbibliothek zu gelangen. Als nächstes klickst du auf das Bild, dessen Größe du anpassen möchtest.

Klicke dann auf die Schaltfläche Bild bearbeiten direkt unter dem Bild:

Die Schaltfläche Bild bearbeiten.
Die Schaltfläche Bild bearbeiten.

Du siehst die aktuelle Bildgröße und kannst sie hier anpassen. Gib einfach die gewünschte Bildgröße ein und klicke dann auf den Button Skalieren, und schon kannst du loslegen.

Bearbeite die Bildabmessungen.
Bearbeite die Bildabmessungen.

Die Größenanpassung wird automatisch gespeichert, sobald du auf Skalieren klickst. Wenn dir die neue Bildgröße aus irgendeinem Grund nicht gefällt, kannst du mit der Option Originalbild wiederherstellen (direkt unter dem Feld für die Bildgröße) jederzeit zur ursprünglichen Größe zurückkehren.

Bearbeiten von Bildern in WordPress Gutenberg

Wenn du Gutenberg verwendest, kannst du die Bildgröße deiner Bilder schnell bearbeiten, wenn du sie während der Erstellung eines Beitrags hinzufügst.

Ändern der Bildgröße über Gutenberg.
Ändern der Bildgröße über Gutenberg.

Wie du im Bild oben sehen kannst, kannst du beim Hochladen eines Bildes beim Erstellen eines Beitrags in Gutenberg die vorhandenen Bildgrößen auswählen oder die Bildgröße direkt in der Beitragsoption ändern.

Wenn du deine neuen benutzerdefinierten Bildgrößen zu deiner Theme-Datei hinzugefügt hast, findest du sie alle im Dropdown-Menü Bildgröße.

Du kannst die Bildgröße auch über das Feld direkt darunter ändern. Alles was du tun musst, ist die gewünschte Größe in die Felder einzugeben und das Bild wird automatisch an deine neuen Spezifikationen angepasst.

Optimiere deine Bilder

Kein bildbezogener Leitfaden ist jemals vollständig ohne eine Erwähnung der Bildoptimierung. Obwohl wir die Optimierung von Bildern bereits ausführlich besprochen haben, können ein paar kurze Tipps nicht schaden.

Wenn du benutzerdefinierte Bildgrößen hinzufügst, musst du wissen, wie du deine Bilder optimierst, um sicherzustellen, dass sie die Performance deiner Seite nicht beeinträchtigen oder mehr Server-Ressourcen verbrauchen, als sie müssen.

Hier sind ein paar schnelle Tipps, die dir helfen, mit der Bildoptimierung zu beginnen.

Entscheide dich für den Dateityp

Die Wahl des richtigen Dateityps für deine Bilder kann deren Größe erheblich reduzieren. Es gibt zwar viele verschiedene Arten von Bilddateien, aber die große Mehrheit sind entweder JPEG oder PNG.

JPEG gewinnt, wenn es um farbige Bilder geht. Außerdem kannst du JPEG-Dateien weiter komprimieren, um ihre Dateigröße zu verringern, wobei die Qualität nur geringfügig abnimmt (wenn du es richtig machst).

Auf der anderen Seite ist PNG normalerweise die bessere Option für Zeichnungen, Text, die meisten Screenshots und Grafiken.

Ändern der Bildgröße

Die Größenänderung von Bildern ist ein schneller und einfacher Weg, um die Dateigröße deiner Bilder zu reduzieren. Als Faustregel solltest du sicherstellen, dass alle Bilder auf deiner Seite nur so groß sind, wie sie sein müssen.

Wenn die maximale Breite deiner Webseite 1200px beträgt, macht es keinen Sinn, ein einziges Bild auf deiner Seite zu haben, das breiter ist als diese 1200px.

Wir haben bereits erwähnt, dass es wichtig ist, keine neuen benutzerdefinierten Bildgrößen zu erstellen, es sei denn, du musst es tun, also denke auch daran.

Nutze die verlustbehaftete Komprimierung

Verlustbehaftete Komprimierung ist eine großartige Möglichkeit, die Dateigröße weiter zu reduzieren, nachdem du deine Bilder bereits mit anderen Methoden optimiert hast.

Es bedeutet, dass einige Bilddaten entfernt werden, die keinen großen Unterschied in der Bildqualität machen, aber die Dateigröße erheblich reduzieren können.

Lazy Loading verwenden

Lazy Loading hilft dir, das Laden von Bildern auf den Seiten deiner Website zu priorisieren. Es lädt die Bilder im Takt mit dem Scrollen des Besuchers auf der Seite. Das bedeutet, dass die Bilder ganz oben sofort geladen werden, aber alles unterhalb des Falzes wird nicht geladen, bis der Nutzer über den Falz hinaus scrollt.

Es gibt noch mehr dazu, aber das findest du alles in unserem Leitfaden zur Bildoptimierung, also lass uns stattdessen direkt zu einigen Plugins zur Bildoptimierung springen, die du verwenden kannst.

Bildbearbeitungs-Plugins für WordPress

Das Schöne an der Verwendung dieser Plugins ist, dass du mit nur wenigen Klicks eine fortgeschrittene Bildoptimierung durchführen kannst, ohne dich mit irgendwelchen fortgeschrittenen Tools oder Code herumschlagen zu müssen. Außerdem sind die meisten dieser Plugins kostenlos, vor allem wenn du eine bestimmte Anzahl von Bildern optimierst oder einige grundlegende Optimierungsfunktionen nutzt.

  • Imagify: Beeindruckend angepasster Komprimierungsgrad und andere Bildoptimierungsfunktionen
  • Kraken: Nützliches Plugin zur verlustfreien Komprimierung, aber nur, wenn du die Premium-Version kaufst
  • TinyPNG: Unterstützt verlustbehaftete Komprimierung und funktioniert mit einer Vielzahl von Bildtypen
  • Optimole: Für CDN und Lazy Loading, was sehr effektive Wege sind, um deine Bilder zu optimieren

Zusammenfassung

Du weißt jetzt alles, was es über WordPress-Bildgrößen zu wissen gibt und wie du das Beste aus den Funktionen und Anpassungen, die WordPress in diesem Bereich bietet, herausholen kannst. Die Optimierung der Performance und Funktionalität deiner Webseite sollte dir jetzt viel leichter fallen, da du nun weißt, wie du deine WordPress Bilder in- und auswendig handhaben kannst.

Du kannst benutzerdefinierte Bildgrößen erstellen und sie entweder direkt über den Code deines Themes verwalten oder ein Plugin verwenden, das speziell für diese Aufgabe programmiert wurde. Vergiss nicht, deine alten Thumbnails zu aktualisieren, wenn du vorhast, ein Bild zu aktualisieren – ebenfalls eine einfache Aufgabe, dank der hilfreichen Plugins, die wir oben aufgelistet haben.

Haben wir etwas ausgelassen? Hinterlasse unten einen Kommentar, wenn du Probleme hast, etwas über WordPress Bildgrößen zu verstehen!

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.