Standard-WordPress-Bildgrößen und Hinzufügen von benutzerdefinierten Größen

Wenn Sie ein Bild hochladen, erledigt WordPress eine Menge Arbeit hinter den Kulissen, damit Sie das Bild Ihren Besuchern bereitstellen können. Sie können diesen Vorgang huckepack ausführen und benutzerdefinierte Bildgrößen hinzufügen, um die Größe der Bilder nicht manuell ändern zu müssen.

In diesem Beitrag erkläre ich, wie und warum WordPress unterschiedliche Bildgrößen erstellt. Dann werde ich Ihnen beibringen, wie Sie Ihre eigenen Bildgrößen hinzufügen, indem Sie die Funktionen ändern.PHP-Datei, regenerieren Sie Miniaturansichten und fügen Sie Ihre neuen Bildgrößen dem Gutenberg-Bildblock und / oder der WordPress-Schleife hinzu.

WordPress-Bildgrößen erklärt

Jedes Mal, wenn Sie ein Bild in die WordPress-Medienbibliothek hochladen, sind dies die zusätzlichen Bildgrößenoptionen, die WordPress standardmäßig erstellt:

• Miniaturansicht
• Mittel
• Mittel Groß
• Groß

Wenn Ihr Thema zusätzliche Bildgrößen angibt, erstellt WordPress diese ebenfalls.

WordPress behält auch die Originalgröße bei, die Sie hochladen, und nennt sie Voll wie in voller Größe.

Sie können all dies (mit Ausnahme von Medium_Large) im Dropdown-Menü Bildgröße des Gutenberg-Bildblocks sehen, wenn Sie ein Bild in eine Seite oder einen Beitrag einfügen.

Warum erstellt WordPress so viele Bilder?

Bilder sind wie Hosen. Sie möchten sicherstellen, dass Sie die richtige Größe erhalten. Hosen und Bilder, die zu klein sind, sehen albern aus und es ist für Sie und alle anderen schmerzhaft offensichtlich, dass sie nicht richtig passen. Zu kleine Bilder auf Ihrer Website sehen ausgestreckt oder pixelig aus.

Im Gegensatz dazu, wenn sie zu groß sind, ist das super verschwenderisch. Du würdest einem Baby keine Hose anziehen, die für einen Mann gemacht ist, oder? Es ist so viel zusätzlicher Stoff, der nicht einmal notwendig ist. Das Baby wird in einem Hosenbein verloren gehen;)

Bilder sind die gleichen. Wenn Ihr Bild für den Container zu groß ist, verschwenden Sie Bandbreite und Zeit damit, es herunterzuladen, um es auf Ihrer Seite bereitzustellen. Und wofür? Umsonst.

Idealerweise sollten die von Ihnen hochgeladenen Bilder in voller Größe groß genug sein, um in den größten Bildcontainer Ihrer Website zu passen, jedoch nicht größer. Wenn Sie dann Bilder auf Ihrer Website verwenden, sollten Sie genau das Bild verwenden, das Sie benötigen.

Da das Skalieren von Bildern in Photoshop oder einem anderen Bildeditor wertvolle Zeit in Anspruch nimmt, übernimmt WordPress diese Aufgabe und erledigt sie für Sie. Danke, WordPress!

Sie müssen lediglich die geeignete Größe auswählen, wenn Sie ein Bild in Ihre Site einfügen, um die Leistungsvorteile der Verwendung eines genau richtigen Bildes zu erzielen.

Wenn die WordPress-Standardbildgrößen nicht perfekt für Ihr Thema geeignet sind, können Sie die Standardeinstellungen im Abschnitt Media > -Einstellungen anpassen oder benutzerdefinierte Größen hinzufügen, damit Sie mehr Optionen zur Auswahl haben.

Die Standardbildgrößen sind wie folgt:

• 150px Platz für Thumbnails
• 300px Breite für mittlere Bilder
• 768px max Breite für medium_large Bilder
• 1024px max Breite für große Bilder.

Medium_large wurde hinzugefügt, um die reaktionsschnelle Bildunterstützung zu nutzen, weshalb es nicht auf der Einstellungsseite enthalten ist. Apropos Responsive Bilder …

Responsive Bilder

Alle diese Bilder in verschiedenen Größen dienen einem anderen Zweck, daher sollten Sie die Standardwerte nicht auf Null setzen, um WordPress davon abzuhalten, sie zu erstellen, wie einige Tutorials vorschlagen.

WordPress hat in Version 4.4 responsive Bilder zu Core hinzugefügt. Anstatt image src Attribute mit der URL für nur ein Bild zu füllen, hat WordPress auch srcset (Quellensatz) hinzugefügt, eine Liste von URLs von Bildern verschiedener Größen.

Ratet mal, welche Bilder es verwendet, um diese Liste zu erstellen? Ja, WordPress verwendet dieselben Bilder in verschiedenen Größen, die beim Hochladen eines Bildes erstellt werden.

Es bietet diese Liste dem Browser an, damit er ein Bild auswählen kann, das für das Gerät des Besuchers geeignet ist. Wenn der Besucher ein mobiles Gerät verwendet, erhält er ein kleineres Bild in der srcset. Wenn sie Ihre Website auf einem Desktop-Retina-Gerät besuchen, erhalten sie die Retina-fähige Bilddatei in voller Größe, die Sie hochgeladen haben. Aus diesem Grund sollten Sie ein Bild hochladen, das groß genug ist, um diesen Bedarf zu decken.

Wenn Sie eine benutzerdefinierte Bildgröße hinzufügen, fügt WordPress sie dem hinzu srcset solange es das gleiche Seitenverhältnis hat. Wenn die benutzerdefinierte Bildgröße das Bild in eine andere Form zuschneidet, wird es aus dem Satz weggelassen.

„Web-Optimierung“ Größere Bilder in WordPress

WordPress 5.3 führte eine neue Möglichkeit ein, große Bilddateien zu verwalten, indem eine „web-optimierte maximale Größe“ von ihnen erkannt und generiert wird.

Wie funktioniert es?

Wenn ein neues Bild hochgeladen wird, erkennt WordPress, ob es sich um ein „großes“ Bild handelt, basierend darauf, ob seine Höhe oder Breite über dem big_image threshold liegt.

Der Standard-Schwellenwert ist 2560px (dies kann mit dem neuen Filter big_image_size_threshold geändert werden).

Wenn die Höhe oder Breite eines Bildes über diesem Schwellenwert liegt, wird es verkleinert – wobei der Schwellenwert als max-height- und max-width-Wert verwendet wird.

Das verkleinerte Bild wird als größte verfügbare Größe verwendet.

Möchten Sie die Skalierung deaktivieren?

Die Skalierung wird durch den Filter big_image_size_threshold gesteuert.

Wenn Sie false vom Filterrückruf zurückgeben, wird es deaktiviert (wie unten):

add_filter( 'big_image_size_threshold', '__return_false' );

WordPress Thumbnails und Featured Image Size

Wir haben jetzt den Teil unseres Tutorials erreicht, in dem wir das gesamte Thumbnail / Featured Image Durcheinander entwirren werden. Grundsätzlich läuft das Problem darauf hinaus; Da WordPress die Abwärtskompatibilität beibehält, ändern sich die Namen der Dinge, aber die Funktionen beziehen sich immer noch auf Dinge mit ihren alten Namen.

Die Bildgröße der WordPress-Miniaturansichten wurde in Version 2.9 eingeführt, in Version 3.0 jedoch schnell in vorgestellte Bilder geändert, aber leider blieb der Name erhalten. Daher hören Sie in Tutorials und sogar in den Funktionsnamen häufig vorgestellte Bilder, die als Miniaturansichten bezeichnet werden.

Hier einige Beispiele:

• Wenn Ihr Thema keine vorgestellten Bilder enthält und Sie diese Funktion aktivieren möchten, fügen Sie Ihrer Funktionsdatei add_theme_support( 'post-thumbnails' ); hinzu.
• Um die WordPress-Bildgröße in einem Thema anzuzeigen, verwenden Sie die Funktion the_post_thumbnail().

Miniaturansichten und ausgewählte Bilder haben eine Standardgröße von 150 x 150 Pixel. Wenn Sie die Funktion the_post_thumbnail() ohne Argument verwenden, um die Größe anzugeben, wird die standardmäßige quadratische Größe von 150 Pixel verwendet.

Um dies für Sie weniger verwirrend zu machen, damit Sie tatsächlich die richtige Größe verwenden können, schlage ich vor, eine benutzerdefinierte Bildgröße zu erstellen und sie featured-large oder ähnliches zu nennen. Wenn Sie dieses Bild dann in Ihrer Schleife verwenden möchten, verwenden Sie the_post_thumbnail('featured-large') .

Bevor Sie mit dem Erstellen benutzerdefinierter Bildgrößen in WordPress beginnen

Vermeiden Sie es, beim Erstellen benutzerdefinierter Bildgrößen über Bord zu gehen und Bilder für jeden erdenklichen Zweck zu erstellen. Andernfalls verbrennen Sie Speicherplatz auf Ihrem Hosting und wenn Sie einen Bildoptimierungsdienst verwenden, der Sie pro Bild berechnet, werden Sie Ihre Bildzulage viel schneller durchlaufen.

Wenn Sie mit Ihrem Plan 100 Bilder optimieren können, aber jeder Upload 9 zusätzliche Größen generiert, die ebenfalls optimiert werden müssen, erreichen Sie Ihr Limit, sobald Sie 10 Bilder hochladen. Beachten Sie dies, wenn Sie benutzerdefinierte Größen hinzufügen und Bildoptimierungspläne auswählen.

Smush Pro hat keine Bildoptimierungsgrenzen und wird mit einem CDN geliefert, damit Sie den Speicherplatz Ihres Servers frei halten können. Sie können mehr benutzerdefinierte Bildgrößen hinzufügen, als Sie es normalerweise tun würden. Betrachten Sie es als das Äquivalent von fließenden MC Hammer Hosen anstelle von kleinen Röhrenjeans auf diese Babys, weil der Stoff billig ist 🙂

Probieren Sie Smush Pro 7 Tage lang kostenlos aus.

So fügen Sie benutzerdefinierte Bildgrößen in WordPress hinzu

Hier ist der Code, den wir unserer Funktionsdatei hinzufügen werden, um Bildgrößen hinzuzufügen:

add_image_size( 'the-name-for-custom-image-size', 600, 400, true );

Diese Funktion akzeptiert 4 Parameter in dieser Reihenfolge:

1. Der Name, den Sie Ihrem benutzerdefinierten Bild geben Größe
2. Die Bildbreite in Pixel
3. Die Bildhöhe in Pixel
4. Sollte das Bild auf die oben angegebene Breite und Höhe zugeschnitten werden

Zuschneiden

Der Zuschneideparameter ist ein boolescher Wert, daher verwenden Sie true oder false. Wenn Sie es ganz weglassen, wird es standardmäßig auf false gesetzt.

Wenn Sie den Parameter Zuschneiden auf true setzen, schneidet WordPress Ihr Bild so zu, dass es den Abmessungen entspricht, die Sie beim Erstellen des benutzerdefinierten Bildes angegeben haben.

Wenn Ihre benutzerdefinierte Bildgröße beispielsweise ein Quadrat von 600 x 600 Pixel ist und Sie das Zuschneiden auf true , werden beim Hochladen eines rechteckigen Bildes von 600 x 800 Pixel 200 Pixel abgeschnitten, um das Bild quadratisch zu machen.

add_image_size( 'custom-image-square', 600, 600, true );

Das Festlegen des Zuschneideparameters auf true ist hilfreich für Bildgrößen, die genau sein müssen, z. B. vorgestellte Bilder oder Post-Archivbilder, die perfekt in eine bestimmte Dimension passen müssen.

Für Bilder, die mehr Spielraum haben können, wie die WordPress-Post-Bildgröße und Bilder auf Seiten, die dazu neigen, variable Höhen und Breiten zu haben, können Sie das Zuschneiden auf false setzen. Dadurch wird die Größe der Bilder geändert, aber die Form des Bildes wird nicht geändert oder Pixel abgeschnitten.

Werfen Sie einen Blick auf unseren SEO-Leitfaden für Bilder, wenn Sie mit Ihren Bildern Traffic auf Ihre Websites lenken möchten.

Regenerieren von Thumbnails

Einer der wichtigsten Schritte, wenn entweder:

1. ändern der WordPress-Standardbildgrößen
2. Hinzufügen benutzerdefinierter Bildgrößen oder
3. Umschalten auf ein neues Thema mit unterschiedlichen benutzerdefinierten Größen

regeneriert Miniaturansichten.

In diesem Zusammenhang beziehen sich Miniaturansichten auf alle zusätzlichen Bilder, die WordPress erstellt, einschließlich der benutzerdefinierten Bildgrößen, die in Ihrem Thema enthalten sind, und derjenigen, die Sie über Ihre Funktionsdatei erstellen.

Wenn Sie die Art und Weise ändern, wie WordPress zusätzliche Bilder erstellt, wirkt sich dies nur auf die Bilder aus, die Sie in Zukunft hochladen. Die Bilder, die sich bereits in Ihrer Medienbibliothek befinden, werden nicht aktualisiert.

Um die bereits hochgeladenen Bilder zu ändern, müssen Sie das beliebte Plugin Regenerate Thumbnails verwenden.

Nachdem Sie es installiert haben, finden Sie es im Abschnitt Tools.

Wenn Sie Ihre Miniaturansichten in Ihren neuen Größen neu generieren, haben Sie die Möglichkeit, alte nicht verwendete Bildgrößen zu löschen, um Speicherplatz auf dem Server freizugeben.

So fügen Sie benutzerdefinierte Bildgrößen zur Dropdown-Liste im Gutenberg-Bildblock hinzu

Sie müssen nur den folgenden Code zu Ihrer Funktionsdatei hinzufügen, wenn Ihre benutzerdefinierten Bildgrößen in der Dropdown-Liste im Gutenberg-Bildblock angezeigt werden sollen. Wenn Sie eine benutzerdefinierte Bildgröße erstellt haben, um Behind-the-Scenes für Ihr Design zu verwenden, können Sie diesen Schritt überspringen.

Wir werden uns an den Filter image_size_names_choose anschließen.

Im Array füge ich den Namen der benutzerdefinierten Größe hinzu, die ich in der Funktion add_image_size angegeben habe, und den Namen, den ich in der Dropdown-Liste in Klammern anzeigen möchte.

Wie ich in diesem Tutorial gelernt habe, müssen Sie die Miniaturansichten neu generieren, bevor das Bild in der Dropdown-Liste angezeigt wird.

WordPress Bildgröße hinzufügen Vollständiges Code-Snippet

Als nächstes kombinieren wir alles, was wir gelernt haben, in einem Codeblock mit einem realen Beispiel.

Angenommen, Sie möchten Ihrem Blog benutzerdefinierte Bildgrößen hinzufügen.

Hier sind die Bildgrößen, die Sie hinzufügen möchten:

• Ein 1600px x 400px Featured Image
• Eine 800px Größe, die die Breite des Inhaltsabschnitts Ihres Blogs überspannt

Da unser Thema derzeit keine Featured Images unterstützt, beginnen wir damit.

Sie sehen dann meine benutzerdefinierten Größen. Beachten Sie, dass ich die Bilder, die sich über die Breite des Blog-Inhalts erstrecken, nicht zugeschnitten habe. Ich werde meine vorgestellten Bilder hart zuschneiden, da ich möchte, dass sie genau richtig ausgerichtet sind.

Das einzige Bild, das ich der Gutenberg-Dropdown-Liste hinzufügen möchte, ist das Blog-Bild, da ich die WordPress-Bildgröße in meinem Thema verwenden werde.

Nachdem ich diesen Code zu meiner functions.php -Datei hinzugefügt habe, besteht der nächste Schritt darin, Miniaturansichten neu zu generieren.

Um mein benutzerdefiniertes ausgewähltes Bild für meine Beiträge in der Schleife zu verwenden, füge ich Folgendes zu single.php oder index.php

hinzu.Siehe, wie ich 'featured-large' in der the_post_thumbnail() -Funktion hinzugefügt habe? Dadurch wird mein ausgewähltes Bild unter den Titeln meiner Blog-Posts und über meinem Inhalt angezeigt.

Best Practices für benutzerdefinierte Bildgrößen

Hier sind einige weitere Tipps, damit Sie keine Probleme beim Erstellen benutzerdefinierter Bilder in WordPress haben.

1. Laden Sie immer die größtmögliche Datei hoch. Wenn Ihre Bildgröße zu klein ist, kann WordPress nicht alle Größen erstellen, die es benötigt, um Ihre Bilder auf einer Vielzahl von Geräten ordnungsgemäß bereitzustellen.
2. Wenn Sie die Standardgröße medium_large ändern müssen, verwenden Sie die Funktion update_option(). Sie können dieselbe Funktion verwenden, um jede andere WordPress-Standardbildgröße zu aktualisieren.
3. Wenn Sie sich außerhalb der WordPress-Schleife befinden, können Sie die Funktion get_the_post_thumbnail() verwenden, um eines Ihrer benutzerdefinierten Bilder zu verwenden.
4. Hier finden Sie weitere Informationen zum weichen und harten Zuschneiden beim Erstellen benutzerdefinierter Bildgrößen, falls Sie auf Probleme stoßen.

Das ist alles, um benutzerdefinierte Bildgrößen hinzuzufügen

Sobald Sie verstanden haben, wie benutzerdefinierte Bildgrößen in WordPress funktionieren, können Sie sie an Ihre Bedürfnisse anpassen und viel Zeit sparen. Wenn Sie Ihre Bildgrößen richtig einstellen, können Sie auch die Leistung Ihrer Website und das Ranking in Suchmaschinen verbessern.

Wenn Sie Ihre Bildoptimierung wirklich auf eine andere Ebene heben möchten, schauen Sie sich Smush an. Wir haben Smush Pro ein erstaunliches CDN hinzugefügt, das über eine automatische Größenanpassung von Bildern verfügt, mit der Sie vermeiden können, Ihre Bilddatei zu ändern, um benutzerdefinierte Bildgrößen hinzuzufügen.

Es gibt auch andere großartige Bildoptimierungsfunktionen, die integriert sind, wie z. B. verzögertes Laden und Konvertieren von Bildern in Formate der nächsten Generation. Testen Sie Smush Pro 7 Tage lang kostenlos und sehen Sie, wie die Bildoptimierungsfunktionen Ihre Website verbessern können.

Schlagwörter:

• code
• Bilder