Verhindern Sie, dass WordPress zusätzliche beschnittene Bildgrößen erstellt

Immer wenn Sie ein Bild über die Medienbibliothek auf Ihre WordPress-Site hochladen, werden automatisch mehrere zusätzliche Versionen dieses Bildes erstellt und gespeichert. Wenn Ihre Site diese zusätzlichen Bildgrößen nicht nutzt, verbrauchen sie wertvollen Speicherplatz und erhöhen die Größe Ihrer Server-Backups.

In dieser Anleitung führe ich Sie durch die Standardbildgrößen, erkläre, warum sie generiert werden, zeige Ihnen, wie Sie zusätzliche Bildgrößen identifizieren und stelle Ihnen den Codeausschnitt zur Verfügung, um zu verhindern, dass WordPress unnötige Bildgrößen erstellt.

Keine Lust zu lesen? Springe zum Snippet oder Plugin.

Standardbildgrößen in WordPress

Hier ist eine Tabelle aller Standardbildgrößen in WordPress:

Wie Sie sehen, sind es ziemlich viele!

Das bedeutet, dass jedes Mal, wenn Sie ein Bild auf Ihre WordPress-Site hochladen, bis zu 7 zusätzliche Bildversionen auf Ihrem Server generiert und gespeichert werden können! Dabei handelt es sich nur um die im Core definierten Standardgrößen. Es sind keine zusätzlichen Größen enthalten, die durch Ihre Themes und Plugins definiert werden.

Bildgrößen, die von Ihrem WordPress-Theme und Ihren Plugins erstellt wurden

Die meisten klassischen WordPress-Themes (Non-Block-Themes) nutzen die Miniaturbild-, mittleren und großen Kerngrößen nicht. Normalerweise registrieren sie ihre eigenen Bildgrößen, die am besten zum Design und Layout des Themas passen.

Plugins können auch neue Bildgrößen registrieren. Dies kommt häufig bei Plugins vor, die zum Anzeigen von Beiträgen oder zum Einbinden benutzerdefinierter Beitragstypen verwendet werden. Paradebeispiele wären Verzeichnisse, Veranstaltungen, Immobilien, E-Commerce, LMS, Seitenersteller usw.

Das bedeutet, dass Ihre Website möglicherweise noch größere Bildgrößen erstellt und Ihren Server und Ihre Sicherungsdateien wirklich überlastet.

Es empfiehlt sich, die Dokumentation zum Thema und allen auf Ihrer Website verwendeten Plugins zu lesen, um sicherzustellen, dass keine unnötig verkleinerten Versionen Ihrer Bilder erstellt werden. Die meisten gut codierten Themes und Plugins bieten eine Einstellung zum Ändern oder Deaktivieren zusätzlicher Bildgrößen.

Wenn Sie unser Total-Theme verwenden, lesen Sie unbedingt die Dokumentation zum Bildgrößen-Bedienfeld. Wenn Sie es nicht sind, aber Entwickler sind, möchten Sie vielleicht einen Blick darauf werfen, wie ich Dinge gemacht habe, um mich inspirieren zu lassen.

Später in diesem Handbuch werde ich Ihnen eine einfache codebasierte Lösung zum Anzeigen aller registrierten Bildgrößen auf Ihrer Website bereitstellen.

Warum werden Bilder mit zusätzlicher Größenänderung erstellt?

Bevor wir erklären, wie Sie verhindern können, dass WordPress alternative Bildgrößen für Ihre Uploads generiert, ist es wichtig zu verstehen, warum WordPress diese zusätzlichen Größen überhaupt erstellt. Nachfolgend finden Sie eine Liste der wichtigsten Gründe:

• Schnellere Ladezeiten: Kleinere Bilder werden schneller geladen.
• Responsive Bilder: Stellen Sie alternative Bildgrößen für unterschiedliche Bildschirmgrößen bereit.
• Konsistenz: Damit alle Ihre vorgestellten Bilder die gleiche Größe haben.
• Hochauflösende Displays: Stellen Sie alternative Bilder für hochauflösende und Retina-Displays bereit.
• Ausgewählte Miniaturansichten: Stellen Sie alternative Bildgrößen zur Verwendung in verschiedenen Teilen der Website oder mit themen-/pluginspezifischen Elementen bereit.
• Serverleistung: Wie im Fall des -skalierten Bildes, wie in der Tabelle oben angegeben.

Admin-Panel für WordPress-Medieneinstellungen

Wenn Sie auf Ihrer WordPress-Site angemeldet sind, gehen Sie zu Settings > Media Sie finden Optionen zum Festlegen von drei der wichtigsten WordPress-Bildgrößen (Miniaturansicht, Mittel, Groß).

Wenn Sie die Breite und Höhe aller Felder auf 0 setzen, wird verhindert, dass WordPress diese zusätzlichen Bilder erstellt. Dies ist das Erste, was ich mache, wenn ich WordPress installiere und es für die meisten Websites empfehle.

Dies ist jedoch keine vollständige Lösung, um unerwünschte Bilder mit veränderter Größe von Ihrer Website zu verhindern. Lesen Sie weiter, um mehr zu erfahren und meinen Codeausschnitt zum Deaktivieren aller Bildgrößen zu sehen.

Der Schwellenwert für die große Bildgröße in WordPress

In WordPress 5.3.0 wurde der sogenannte Big Image Size Threshold eingeführt. Dies ist die maximale Breite oder Höhe eines Bildes, für die WordPress beim Hochladen des Bildes zusätzliche Bildgrößen generiert. Der Standardwert ist 2560.

Wenn ein Bild in die Medienbibliothek hochgeladen wird, das den Schwellenwert überschreitet, verkleinert WordPress das Bild und es wird die größte verfügbare Größe verwendet. WordPress generiert dann alle auf Ihrer Website definierten zusätzlichen Bildgrößen basierend auf der verkleinerten Version.

Wenn Sie also Bilder hochladen, die größer als 2560 (Breite oder Höhe) sind, erstellt WordPress zusätzliche Bilder auf Ihrem Server. Möglicherweise möchten Sie dies deaktivieren oder entsprechend anpassen.

Deaktivieren Sie den Schwellenwert für die Größe großer Bilder

Wenn Sie in der Lage sein möchten, große Bilder auf Ihre Website hochzuladen, ohne dass WordPress sie verkleinert und eine alternative Version erstellt, können Sie dies mit dem folgenden Codeausschnitt tun:

// Disable the big image size thresholdadd_filter( 'big_image_size_threshold', '__return_false' );

Vorsicht: Der Schwellenwert für große Bilder existiert aus einem bestimmten Grund und ich empfehle dringend, ihn NICHT zu deaktivieren. Das Deaktivieren dieser Funktion kann zu Leistungsproblemen auf dem Server führen. Wenn Sie wissen, dass nur kleinere Bilder auf die Website hochgeladen werden, können Sie es deaktivieren, aber es macht sowieso nichts, es eingeschaltet zu lassen.

Ändern Sie den Schwellenwert für die Größe großer Bilder

Wenn Ihre Website größere Bilder zulassen muss (z. B. eine Foto-Website), möchten Sie möglicherweise den Schwellenwert für die Größe großer Bilder ändern. Auf diese Weise verkleinert WordPress Ihre Bilder nicht.

Hier ist ein Beispiel, wie Sie den Wert von 2560 auf 5000 ändern können:

// Modify the big image size thresholdadd_filter( 'big_image_size_threshold', function( $threshold ) {    return 5000;} );

Wie überprüfen Sie, welche Bildgrößen auf Ihrer Website definiert sind?

Leider verfügt WordPress nicht über eine native Möglichkeit, eine Liste aller auf Ihrer Website registrierten Bildgrößen anzuzeigen. Es gibt Plugins, die Sie dafür verwenden können, aber da ich mich hauptsächlich auf Code-basierte Tutorials konzentriere, zeige ich Ihnen, wie Sie Code verwenden können, um eine Liste der registrierten Bilder auf Ihrer Website anzuzeigen.

Schnelle und „schmutzige“ Methode

Wenn Sie diesen Code kopieren und in Ihre Datei „functions.php“ einfügen und dann Ihre Site aktualisieren, wird oben auf der Live-Site eine Liste der registrierten Bildgrößen angezeigt. Sie können sie dann kopieren und als Referenz in eine Textdatei einfügen und dann den Code entfernen.

// Display all defined image sizes at the top of the site inside a 
 tagadd_action( 'wp_head', function() {echo '
';foreach ( (array) wp_get_registered_image_subsizes() as $size => $dims ) {$width = $dims['width'] ?? 0;$height = $dims['height'] ?? 0;echo "{$size}: {$width}x{$height}n";}echo '
'; } );
Registrierte Bildgrößen im WP Admin anzeigen
Ideal ist der Zugriff auf eine Liste der registrierten Bildgrößen in Ihrem WordPress-Admin-Panel. Wenn Sie jemals ein neues Plugin aktivieren oder das Design wechseln, können Sie auf diese Weise schnell überprüfen, ob neue Bildgrößen definiert werden.
Das folgende Code-Snippet zeigt unten im Bild eine Tabelle aller definierten Bildgrößen an Settings > Media Tafel:
// Add a table of image sizes to the Settings > Media admin pageadd_action( 'admin_init', function() {add_settings_section('dummy_registered_image_sizes_info',esc_html__( 'Registered Image Sizes', 'text_domain' ),function() {echo '';echo '';foreach ( (array) wp_get_registered_image_subsizes() as $size => $dims ) {if ( ! in_array( $size, [ 'thumbnail', 'medium', 'large' ], true ) ) {$width = $dims['width'] ?? 0;$height = $dims['height'] ?? 0;echo "";}}echo '
' . esc_html__( 'Name', 'text_domain' ) . '
' . esc_html__( 'Dimensions', 'text_domain' ) . '
{$size}
{$width}x{$height}
';},'media');}, PHP_INT_MAX );
Technisch gesehen definieren wir mit diesem Code einen neuen Einstellungsabschnitt, registrieren jedoch keine Einstellungen. Stattdessen legen wir den Rückruf für unseren Abschnitt fest, um eine Tabelle zurückzugeben, die alle registrierten Bildgrößen durchläuft und anzeigt.
Hier ist ein Screenshot des Endergebnisses:
Dieses Beispiel stammt aus dem Total-Design, bei dem die standardmäßig registrierten Bildgrößen des Themes auf 9999 x 9999 eingestellt sind, was sehr groß ist, sodass sie standardmäßig nie zugeschnitten werden.
Verhindern Sie, dass WordPress zusätzliche Bildgrößen erstellt
Es gibt keine Option, die Sie einfach im WordPress-Administrator überprüfen können. Um zu verhindern, dass WordPress beschnittene Versionen Ihrer Bilder erstellt, müssen Sie ein wenig Code verwenden. Glücklicherweise ist dies mit einer einzigen Codezeile möglich!
// Return false for calculated resized image dimensionsadd_filter( 'image_resize_dimensions', '__return_false' );
Um zu verstehen, wie dieser Code funktioniert, werfen wir einen Blick auf den Kern image_resize_dimensions() Funktion. Es ist ziemlich lang, deshalb werde ich es hier nicht veröffentlichen, aber Sie können auf den vorherigen Link klicken, wenn Sie den gesamten mit der Funktion verknüpften Code sehen möchten.
Wenn WordPress eine neue Bildgröße erstellt, verwendet es grundsätzlich diese Funktion, um die berechneten Größenänderungsabmessungen für das Bild zurückzugeben, die es dann an das Bild übergibt WP_Image_Editor Klasse. Einhaken in die image_resize_dimensions Filter und die Rückgabe von „false“ führen dazu, dass die Funktion vorzeitig beendet wird, sodass keine Berechnungen durchgeführt werden und letztendlich kein zusätzliches Bild generiert wird.
Optimiertes Code-Snippet
Das vorherige Snippet verhindert, dass WordPress ein Bild zuschneidet, wenn eine neue Bildgröße angefordert wird. Dies funktioniert unabhängig davon, wann eine Bildgröße angefordert wird.
Wir können unseren Code jedoch optimieren, indem wir ihn einbinden intermediate_image_sizes_advanced Filter, der das Array von Bildgrößen zurückgibt, die beim Hochladen eines Bildes automatisch generiert werden.
// Return an empty list of image sizes to generate on uploadadd_filter( 'intermediate_image_sizes_advanced', '__return_empty_array' );
Indem wir ein leeres Array für den Filter zurückgeben, teilen wir WordPress mit, dass beim Hochladen eines neuen Bildes auf unsere Website keine zusätzlichen Bilder generiert werden sollen. Wenn Sie jetzt ein Bild auf Ihre Website hochladen, wird nur das Originalbild zum Server hinzugefügt.
Vollständiger Ausschnitt:
Hier sind beide Ausschnitte zusammengefasst:
// Return false for calculated resized image dimensionsadd_filter( 'image_resize_dimensions', '__return_false' );// Return an empty list of image sizes to generate on uploadadd_filter( 'intermediate_image_sizes_advanced', '__return_empty_array' );
Nun, wenn Sie sich darauf einlassen middle_image_sizes_advanced man muss sich nicht unbedingt auch einklinken image_resize_dimensions.
Der Grund für die Einbindung beider Filter liegt darin, dass ein Theme oder Plugin seine eigene „on-the-fly“-Zuschneidelösung verwendet – die hoffentlich davon Gebrauch macht image_resize_dimensions() Funktion.
WP Plugin „Alle Bildgrößen deaktivieren“
Ich habe das Code-Snippet auch in ein kleines Plugin eingefügt, falls Sie es stattdessen einfach herunterladen und installieren möchten. Für dieses Plugin sollten niemals Updates erforderlich sein und der Überprüfungsprozess des WordPress-Plugins ist ein Albtraum, daher lasse ich es vorerst einfach auf Github.
WP Deaktivieren Sie alle Bildgrößen-Plugin-Github-Repository
Das Plugin wird drei Dinge tun:
Deaktivieren Sie den Schwellenwert für die große Bildgröße.
Geben Sie „false“ für den image_resize_dimensions-Filter zurück.
Gibt ein leeres Array für den Filter „intermediate_image_sizes_advanced“ zurück.
Was passiert, wenn dennoch zusätzliche Bildgrößen erstellt werden?
Wenn Sie das Code-Snippet zu Ihrer Website hinzugefügt haben und feststellen, dass beim Hochladen von Bildern immer noch Bildgrößen generiert werden, müssen Sie Plugins und/oder Ihr Theme deaktivieren, um den Schuldigen zu finden.
Wie bereits erwähnt, ist es möglich, dass es auf Ihrer Website eine benutzerdefinierte „on-the-fly“-Lösung zum Zuschneiden von Bildern gibt, die nicht die Kernfunktionen von WP nutzt und daher von den Kernfiltern nicht beeinflusst wird.
Bestimmte Bildgrößen von der Erstellung beim Hochladen ausschließen
Möglicherweise möchten Sie nicht verhindern, dass alle Bildgrößen generiert werden. Es ist möglich, den Code so zu ändern, dass nur bestimmte Bildgrößen ausgeschlossen werden, z. B.:
// Exclude certain image sizes from being generated on uploadadd_filter( 'intermediate_image_sizes_advanced', function( $sizes ) {$sizes_to_exclude = ['thumbnail','medium','large','medium_large','1536×1536','2048×2048',];foreach ( $sizes_to_exclude as $size_to_exclude ) {unset( $sizes[ $size_to_exclude ] );}    return $sizes;} );
Wenn Sie nur bestimmte Bildgrößen ausschließen möchten, stellen Sie sicher, dass Sie sich NICHT darauf einlassen image_resize_dimensions und gibt false zurück.
Und Sie haben wahrscheinlich bemerkt, dass ich die Miniaturansicht sowie die mittleren und großen Bildgrößen in den Snippet eingefügt habe. Auf diese Weise bleiben die Bildgrößen exkorrekt, selbst wenn jemand mit den Einstellungen im Admin herumspielt eingeschlossen.
Tipps zur Reduzierung der Notwendigkeit einer Größenänderung von Bildern
Am Anfang des Artikels habe ich einige Gründe genannt, warum WordPress zusätzliche Bildgrößen erstellt. Wenn Sie die zusätzlichen Bildgrößen deaktivieren möchten, finden Sie hier einige Tipps, um sicherzustellen, dass keine zusätzlichen „Probleme“ entstehen.
Laden Sie keine riesigen Bilder hoch: Stellen Sie sicher, dass Sie keine riesigen Bilder auf Ihre Website hochladen. Wenn Sie keine Kontrolle darüber haben, stellen Sie sicher, dass Sie den Schwellenwert für große Bilder nicht entfernen und akzeptieren Sie, dass Ihre Website bei Bedarf skalierte Bilder erstellt.
Laden Sie große „genug“ Bilder hoch: Es ist schwer zu sagen, wie groß groß genug ist, da es von der Site und dem Kontext abhängt, in dem das Bild hinzugefügt wird. Sie möchten jedoch, dass Ihre Bilder groß genug sind, damit sie auf hochauflösenden Bildschirmen gut aussehen, und gleichzeitig klein genug (in KB), damit das Laden der Website nicht verlangsamt wird.
Optimieren Sie Bilder vor dem Hochladen: Es gibt viele tolle Plugins zur Bildoptimierung, aber warum sollten Sie Ihre Website aufblähen und Serverressourcen verbrauchen, wenn Sie Ihre Bilder vor dem Hochladen optimieren können? Ich persönlich verwende tinypng.com und konvertiere meine Bilder vor dem Hochladen in das WebP-Format.
Verwenden Sie Bildseitenverhältnisse: Einer der Hauptgründe für die Erstellung von Bildgrößen besteht darin, ein einheitliches Erscheinungsbild Ihrer Beiträge zu gewährleisten, da alle vorgestellten Bilder auf die gleichen Abmessungen zugeschnitten werden. Stattdessen können Sie die CSS-Eigenschaft „Seitenverhältnis“ verwenden, um Ihre Bilder gezielt auszuwählen.
Dies sind die wichtigsten Tipps, die mir einfallen. Lassen Sie mich in den Kommentaren wissen, ob Sie weitere gute Vorschläge oder Bedenken haben, die angegangen werden sollten.
So entfernen Sie alte Bildgrößen von Ihrem Server
Das Hinzufügen des Codes, der verhindert, dass WordPress zusätzliche Bildgrößen erstellt, wirkt sich nur auf neu hochgeladene Bilder aus. Wenn Sie den Code zu einer vorhandenen Site hinzufügen, befinden sich möglicherweise Unmengen alter zugeschnittener Bilder auf dem Server, die Sie bereinigen möchten.
Es gibt mehrere Methoden, mit denen Sie alte Bilder mit geänderter Größe löschen können, und viele Blogs empfehlen die Verwendung von CLI (Terminal). Da WordPress die Bildgrößen jedoch in den Metadaten des Anhangs speichert, empfehle ich diese Lösung nicht.
Die einfachste Methode, die ich gefunden habe, ist die Verwendung des Force Regenerate Thumbnails-Plugins. Sie können das Plugin aktivieren, den Prozess ausführen und es dann von Ihrer Site löschen.
Das Plugin durchläuft jeden Bildanhang auf der Website, zieht die definierten Größen aus den Metadaten und löscht sie alle. Nach dem Löschen der Bildgrößen wird der Kern ausgeführt wp_generate_attachment_metadata() Funktion, die die Zwischenbildgrößen für den Anhang neu erstellt. Wenn Sie also über den vorherigen Code zusätzliche Bildgrößen deaktiviert haben, werden keine Bilder generiert.
Ich könnte Ihnen einen Codeausschnitt zum Löschen alter Bildgrößen von Ihrer Website zur Verfügung stellen. Der Vorgang kann jedoch sehr ressourcenintensiv sein und lässt sich am besten mit AJAX durchführen. Das Plugin „Force Regenerate Thumbnails“ durchsucht jedes Bild nacheinander und protokolliert und zeigt Probleme an, wenn es Probleme gibt.
Das Plugin zeigt Ihnen auch, welche Bilder gelöscht und generiert wurden, was wirklich schön ist!
Bevor Sie neue Plugins installieren oder etwas von Ihrer Website löschen, sollten Sie wie immer sicherstellen, dass Sie über ein vollständiges Backup verfügen. Ich habe das Plugin viele Male ohne Probleme verwendet, aber Vorsicht ist besser als Nachsicht.
Abschluss
Persönlich denke ich, dass es für die meisten Websites am besten ist, alle zusätzlichen Bildgrößen zu deaktivieren. Dadurch wird sichergestellt, dass Ihr Serverraum nicht durch Images belegt wird (von denen viele nie verwendet werden) und Ihre Backups dadurch deutlich kleiner bleiben.
Es könnte auch ein Argument für SEO geben. Ich weiß nicht viel über die Optimierung der Google-Bildersuche, aber vielleicht kann es zu Problemen führen, wenn viele gleiche Bilder in unterschiedlichen Größen vorhanden sind. Wenn Sie ein SEO-Experte sind, teilen Sie mir dies bitte in den Kommentaren mit!
Weiterführende Literatur:
Folgendes könnte Sie auch interessieren:
Leitfaden zu den Beschnittgrößen von WordPress-Bildern
Vollständiger Leitfaden zur Optimierung von Bildern in WordPress
So bearbeiten Sie Bilder in WordPress