WordPress-Bildgrößen erklärt

WordPress-Bildgrößen können manchmal ein Rätsel sein! Haben Sie jemals diese Medieneinstellungsseite in Ihrem Admin-Bereich gesehen und sich gefragt, was das ist?

In diesem Artikel werden wir WordPress-Bildgrößen durchgehen, worum es bei ihnen geht und wie sich dies auf Dinge wie Upload-Zeiten auswirken kann. Darüber hinaus werden wir uns auch ansehen, wie WordPress diese unterschiedlichen Bildgrößen in Website-Layouts nutzt. Und schließlich werfen wir einen Blick darauf, wie Sie unnötige Bildgrößen entfernen oder Ihre eigene benutzerdefinierte Größe hinzufügen können.

Welche Rolle spielen Bildgrößen in WordPress?

Es ist wirklich wichtig, dass die Bilder auf Ihrer Website schön, gestochen scharf und von hoher Qualität aussehen. Es gibt mehrere Elemente, die dies bestimmen, darunter die physische Größe des Bildes (sowohl Abmessungen als auch Dateigröße) und die Auflösung des Bildes. Wenn Ihr Bild zu groß ist (z. B. 10.000 Pixel breit) und die Dateigröße zu groß ist (dh mehr als 1 MB oder so), werden Sie beginnen, die Ladegeschwindigkeit Ihrer Website zu verlangsamen. Umgekehrt, wenn die Bildgröße zu klein ist, werden Sie wahrscheinlich eine Verschlechterung der Bildqualität feststellen ... mit anderen Worten, es könnte verschwommen oder körnig aussehen.

Hosten Sie Ihre Website mit Pressidium

60- TÄGIGE GELD-ZURÜCK-GARANTIE

SEHEN SIE UNSERE PLÄNE

WordPress versucht, ein Gleichgewicht zu finden, indem es je nach Standort des Bildes die optimale Bildgröße bereitstellt. Dies geschieht, indem jedes Mal, wenn Sie ein Bild in die WordPress-Medienbibliothek hochladen, 3 verschiedene Bildgrößen erstellt werden. Dies sind „Miniaturbildgröße“, „mittlere Größe“ und „große Größe“ mit den Abmessungen 150 × 150 Pixel, 300 × 300 Pixel (maximal) bzw. 1024 × 1024 Pixel (maximal). Schließlich wird auch ein Bild in voller Größe gespeichert, das die Originalgröße des hochgeladenen Bildes ist.

Diese Größen zusammen mit weiteren Größen, die wir uns später ansehen werden, werden von WordPress an verschiedenen Stellen im Frontend-Layout verwendet. Dies geschieht, damit das verwendete Bild a) gut aussieht und b) schnell geladen wird.

Untersuchen der WordPress-Bildgrößen im Detail

Lassen Sie uns ein Beispiel durchgehen, damit Sie genau sehen können, was „hinter den Kulissen“ passiert, wenn Sie ein Bild in WordPress hochladen. Für dieses Beispiel laden wir ein Bild mit dem Namen „post1-feature-image“ hoch. Es ist 294 KB groß und misst 2089 × 1175 Pixel, und wir werden dies mit dem standardmäßig aktiven WordPress Twenty Twenty-Design tun (andere Designs können ändern, wie Bilder von WordPress gehandhabt werden).

Nachdem wir dieses Bild über die WordPress-Medienbibliothek hochgeladen haben, können wir uns über einen FTP-Client mit unserer Website verbinden, und wenn wir zum Upload-Ordner gehen, sehen wir, dass mehrere Versionen unserer Bilder erstellt wurden.

Rot hervorgehoben sehen Sie unsere Standardbildgrößen. Das Miniaturbild wurde beschnitten, da dies standardmäßig über die Medieneinstellungen festgelegt ist.

„Mittlere Größe“ und „Große Größe“ wurden so angepasst, dass die tatsächlichen Proportionen des Bildes nicht verändert werden. Aus diesem Grund ist beispielsweise die „mittlere Größe“ 300 × 169 anstelle von 300 × 300. Der Rest der generierten Bilder ist das Ergebnis einiger WordPress-Kerndateien und des Codes des Twenty Twenty-Themes.

Technisch werden!

Wenn Sie an dem Code interessiert sind, der passiert, wenn die zusätzlichen Bildgrößen erstellt werden, dann ist dieser Abschnitt des Artikels genau das Richtige für Sie. Wenn nicht, können Sie gerne zum nächsten Kapitel springen!

WordPress zieht Anweisungen aus einer Datei namens media.php, die sich im Ordner wp-includes/ befindet. Gehen Sie zu dieser Zeile 4861 und Sie werden Folgendes sehen:

 /** * Add additional default image sub-sizes. * * These sizes are meant to enhance the way WordPress displays images on the front-end on larger, * high-density devices. They make it possible to generate more suitable `srcset` and `sizes` attributes * when the users upload large images. * * The sizes can be changed or removed by themes and plugins but that is not recommended. * The size "names" reflect the image dimensions, so changing the sizes would be quite misleading. * * @since 5.3.0 * @access private */ function _wp_add_additional_image_sizes() { // 2x medium_large size. add_image_size( '1536x1536', 1536, 1536 ); // 2x large size. add_image_size( '2048x2048', 2048, 2048 ); }

post1-feature-image-768x432.jpg wird als Ergebnis der Größe „medium_large“ erstellt, die in WordPress Version 4.4 für eine bessere Unterstützung von responsiven Bildern hinzugefügt wurde, und kann auf verschiedenen tragbaren Geräten angezeigt werden. Es ist im Ordner „wp-admin/includes“ in der Datei schema.php Zeile 522 definiert

 // 4.4.0 'medium_large_size_w' => 768, 'medium_large_size_h' => 0,

und angefordert in der image.php-Datei in Zeile 86:

 } elseif ( 'medium_large' === $size ) { $max_width = intval( get_option( 'medium_large_size_w' ) ); $max_height = intval( get_option( 'medium_large_size_h' ) );

post1-feature-image-1200x675.jpg und post1-feature-image-1980x1114.jpg werden aus dem 'Twenty Twenty'-Design in der functions.php-Datei in Zeile 53 generiert:

 /* * Enable support for Post Thumbnails on posts and pages. * * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/ */ add_theme_support( 'post-thumbnails' ); // Set post thumbnail size. set_post_thumbnail_size( 1200, 9999 ); // Add custom image size used in Cover Template. add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );

Dies geschieht, weil das Twenty Twenty-Design 1200 Pixel als Bildgröße für vorgestellte Bilder verwendet. Wenn wir einen Testbeitrag erstellen und ein Beitragsbild hinzufügen, können wir auf der Frontend-Einzelbeitragsseite sehen, wie diese Größe verwendet wird, indem wir mit der rechten Maustaste auf das Beitragsbild klicken und im Inspektor des Browsers nachsehen.

Schließlich ist das 1980px-Bild die Größe, die für das vorgestellte Bild der anderen Beitragsvorlagen verwendet wird. Sie können dies sehen, indem Sie die Testbeitragsvorlage in „Cover-Vorlage“ ändern. Dann können wir im Inspektor-CSS des HTML-Elements des Titelbilds sehen, wie diese Größe verwendet wird:

Es lohnt sich immer darauf zu achten, dass jedes Bild, das Sie hochladen, breiter ist als die Breite der empfohlenen und Titelbilder, damit sie scharf aussehen. WordPress kann Bildgrößen effektiv reduzieren, aber es kann ein kleines Bild nicht vergrößern und es gut aussehen lassen.

Entfernen Sie unnötige WordPress-Bildgrößen

Wie wir gesehen haben, ist WordPress damit beschäftigt, eine Reihe von Bildgrößen zu produzieren, wenn wir ein Bild in unsere Medienbibliothek hochladen. Aber brauchen wir wirklich all diese Bilder? In Wirklichkeit nein, tun wir nicht. Es verlangsamt nicht nur die Geschwindigkeit, mit der Bilder hochgeladen werden, da WordPress im Hintergrund arbeiten muss, um diese verschiedenen Bildgrößen zu erstellen, sondern es nimmt auch Speicherplatz ein, den wir nicht auf unserem Server verwenden müssen. Wie können wir also verhindern, dass WordPress Bildgrößen erstellt, die wir nicht benötigen? Lesen Sie weiter, um es herauszufinden!

Hinweis: Sofern Sie diese Anweisungen nicht auf einer Demo-Website befolgen, empfehlen wir Ihnen, die unten beschriebenen Änderungen in der Datei functions.php eines untergeordneten Designs vorzunehmen. Änderungen, die an der Datei functions.php in einem übergeordneten Design vorgenommen wurden, werden gelöscht, wenn das Design das nächste Mal aktualisiert wird.

Entfernen Sie die WordPress-Standardbildgrößen

Dies kann leicht erreicht werden, indem Sie die functions.php des Themas bearbeiten und den folgenden Code hinzufügen:

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); // Remove default image sizes here. function prefix_remove_default_images( $sizes ) { unset( $sizes['thumbnail']); // 150x150 pixels unset( $sizes['medium']); // 300x300 pixels(maximum) unset( $sizes['large']); // 1024x1024 pixels(maximum) unset( $sizes['medium_large']); // 768px width return $sizes; }

Laden wir zum Testen ein neues Bild (in unserem Beispiel heißt es post2-featured-image) in die Medienbibliothek hoch und aktualisieren unsere FTP-Ansicht des Upload-Ordners.

Wie Sie sehen können, haben wir WordPress angehalten, diese in unserem Medienordner zu erstellen, indem wir WordPress angewiesen haben, die 4 Standardbildgrößen über unsere Datei functions.php zu entfernen. In Zukunft bedeutet dieses einfache Update unseres Themencodes, dass wir unseren Server nicht mit unerwünschten Bildgrößen verstopfen. Dies spart Platz und beschleunigt den Bild-Upload-Vorgang.

Entfernen alter Bildgrößen aus der Medienbibliothek

Sie haben vielleicht bemerkt, dass, obwohl die 4 Standardbildgrößen nicht für unser neues Bild erstellt wurden, das wir hochgeladen haben, das zuvor hochgeladene Bild immer noch alle 8 Varianten in der Medienbibliothek gespeichert hat. Sofern es sich nicht um eine brandneue Website handelt, haben Sie aller Wahrscheinlichkeit nach Dutzende, wenn nicht Hunderte von Bildern hochgeladen, und in allen Fällen wurden diese „zusätzlichen“ Größen erstellt. Also, was tun?

Als Erstes müssen Sie feststellen, ob Sie diese Bilder benötigen. Bevor Sie mit dem Entfernen von Bildern fortfahren, die von WordPress generiert wurden, müssen Sie bestätigen, dass diese Größen nicht mehr verwendet werden. Überprüfen Sie Ihre Blog-Posts, vorgestellten Bilder und alle anderen Teile Ihrer Website, um sicherzustellen, dass keine der alten Größen mehr verwendet wird.

Eine gute Möglichkeit, mit diesen unerwünschten Dateien der alten Bilder umzugehen, ist die Verwendung des Force Regenerate Thumbnail-Plugins, das sie durchläuft und automatisch löscht. Installieren und aktivieren Sie das Plugin und klicken Sie dann im Plugin-Menü auf die Schaltfläche „Alle Thumbnails neu generieren“ (Extras->Neuerstellung von Thumbnails erzwingen).

Aktualisieren Sie die Ansicht Ihres FTP-Medienordners und Sie werden sehen, dass die standardmäßigen WordPress-Bilder verschwunden sind. Nett!

Eine andere einfache Möglichkeit, das gleiche Ergebnis für die Standardgrößen zu erzielen, besteht darin, ihren Dimensionswert in „Einstellungen“ > „Medien“ im wp-admin auf „0“ zu ändern. Sie sehen dann so etwas:

Eine alternative Methode besteht darin, die update_option( 'SIZE_w/h', 0 ); innerhalb von functions.php. Denken Sie daran, dies für eine Datei functions.php eines untergeordneten Designs zu tun, damit Ihre Änderungen nicht verloren gehen, wenn Sie das Design zu einem späteren Zeitpunkt aktualisieren.

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

Wenn dieses Update durchgeführt wird, werden Sie sehen, dass der Wert für die Abmessungen in den Medieneinstellungen (in WP Admin) jetzt auf 0 aktualisiert wurde.

Entfernen Sie zusätzliche Themenbildgrößen

Wir haben uns jetzt erfolgreich mit den vom WordPress-Kern erzeugten Standardbildern befasst. Wir können jetzt weitermachen und die Bilder angehen, die durch das Thema (in diesem Fall Twenty Twenty) erstellt wurden. Wenn Sie, wie bei unseren Standardbildgrößen, zu dem Schluss gekommen sind, dass diese nicht erforderlich sind, können Sie einige Änderungen an Ihrem Designcode vornehmen, um zu verhindern, dass WordPress diese Größen in Zukunft produziert.

Dazu verwenden wir den Init-Hook und die Kernfunktion remove_image_size. Kopieren Sie den folgenden Code und fügen Sie ihn in Ihre Datei functions.php ein. Wenn Sie das Thema Twenty Twenty nicht verwenden, wie wir hier sind, ersetzen Sie die Namen „post-thumbnail“ und „twentytwenty-fullscreen“ durch den Namen Ihres aktiven Themas.

 function remove_extra_image_sizes() { foreach ( get_intermediate_image_sizes() as $size ) { if ( in_array( $size, array( 'post-thumbnail', 'twentytwenty-fullscreen' ) ) ) { remove_image_size( $size ); } } } add_action('init', 'remove_extra_image_sizes');

Wenn wir jetzt ein neues Bild hochladen und unseren Upload-Ordner über unseren FTP-Client überprüfen, sehen wir, dass alle Größen außer „post-thumbnail“ und „twentytwenty-fullscreen“ generiert werden.

Fügen Sie Ihre eigene benutzerdefinierte Bildgröße hinzu

Nachdem wir nun gelernt haben, wie man redundante Bildgrößen in WordPress entfernt, sehen wir uns an, wie wir unsere eigenen benutzerdefinierten Bildgrößen gemäß den Anforderungen unserer Vorlage hinzufügen können.

Wie entscheiden wir, welche Bildgrößen wir benötigen?

Angenommen, Sie haben eine Website mit einer Hauptspalte mit einer Breite von 960 Pixel, in der das Feature-Bild oben und der Inhalt des Beitrags unten ist. Ihre gewünschte Bildgröße beträgt dann 960 Pixel. Vergessen Sie nicht, auch das CSS-Padding zu berechnen, falls vorhanden. Wenn die übergeordneten Elemente beispielsweise eine Summe von 20 Pixeln haben, beträgt die richtige Breite für das Bild 920 Pixel. Es ist 960px minus 20px für die linke Polsterung minus 20px für die rechte Polsterung.

Registrieren Sie neue Bildgrößen

Eine einfache Möglichkeit, neue Größe(n) zu registrieren, ist die Verwendung der integrierten Funktion add_image_size(), die von WordPress bereitgestellt wird. Die Funktionsstruktur ist:

 add_image_size( name, width, height, crop )

Die meisten dieser Optionen sind selbsterklärend. Die letzte Option (Zuschneiden) bestimmt, ob WordPress die Proportionen unseres Bildes bei der Größenänderung respektiert oder ob es unser Bild zuschneidet. Wenn die Zuschneideoption auf „true“ gesetzt ist, wird das Bild beschnitten und die Proportionen werden nicht berücksichtigt. Wenn die Zuschneideoption übersprungen oder auf „false“ gesetzt wird, werden unsere Bildproportionen respektiert.

Lassen Sie uns dies in Aktion ausprobieren und das Ergebnis mit einem Testbild mit 2089 × 1175 Pixeln überwachen.

Zuerst fügen wir diesen Code hinzu:

 add_image_size( 'new-post-thumb', 220, 180 );

Dadurch wird ein post2-feature-image-220x124.jpg anstelle von 220×180 in unserem Uploads-Ordner generiert, da Crop nicht gesetzt ist (false). Dasselbe würde passieren, wenn Sie Folgendes einfügen:

 add_image_size( 'new-post-thumb', 220, 180, false );

Wenn Sie jedoch crop so auf true setzen, wird ein Bild post2-feature-image-220x180.jpg gespeichert.

 add_image_size( 'new-post-thumb', 220, 180, true );

Schließlich können Sie bestimmen, wie der Zuschnitt positioniert wird. Verwenden Sie anstelle von „true“ einfach Optionen wie „left“ oder „top“ oder beides:

 add_image_size( 'custom-size', 220, 220, array( 'left', 'top' ) );

Das Array gibt die Zuschneideposition an. Die verwendbaren Werte sind:

Für x_crop_position: 'left', 'center' oder 'right'.
Für y_crop_position: 'top', 'center' oder 'bottom'.

Die Ausgabe ist in jedem Fall ein anderer Teil des Originalbildes. Hier sind einige Beispiele:

Eine Alternative dazu, dies manuell durch Hinzufügen von Code zu unserem Design zu tun, ist die Verwendung eines Plugins wie Simple Image Sizes. Nichtsdestotrotz ist es hilfreich zu verstehen, was hinter den Kulissen vor sich geht, selbst wenn Sie ein solches Plugin verwenden.

Fazit

Die Verwendung der richtigen Bildgrößen in WordPress ist wichtig – es gewährleistet nicht nur ein qualitativ hochwertiges Benutzererlebnis, indem es dem Website-Betrachter scharfe, hochauflösende Bilder präsentiert, sondern wirkt sich auch erheblich auf die Ladezeiten und die Servernutzung aus. Hoffentlich hat Ihnen dieser Artikel dabei geholfen, die Bedeutung der Bildgrößen in WordPress zu verstehen und zu verstehen, wie Sie die Bildgrößen überschreiben, entfernen oder erweitern können, um die Anforderungen Ihrer Website zu erfüllen, und wie Sie potenziell eine Menge Serverplatz sparen können, indem Sie WordPress stoppen Generieren unnötiger Größen jedes hochgeladenen Bildes.