Optimieren Sie Ihre Bilder mit vordefinierten Bildgrößen [WordPress-Tipp]

Das Optimieren von Bildern auf einer Website ist eine schwierige Aufgabe. Sie können festlegen, dass weniger Bilder, komprimierte Bilder, Sprites oder SVG verwendet werden. Die Liste geht weiter. Eine Stelle, an der viele WordPress-Sites gestört werden, ist das Definieren der Bildgrößen entscheidender Aspekt bei der Optimierung von inhaltsintensiven Websites.

Bildgrößen sind von entscheidender Bedeutung, da Bilder automatisch entsprechend den beim Hochladen von Bildern angegebenen Größen erstellt werden. Dies stellt sicher, dass selbst bei einem 3000px breiten Originalbild es nie verwendet wird, wenn ein 600px-Bild ausreicht. Idealerweise sollte ein 600px breiter Bereich ein 600px breites Bild verwenden, anstatt ein größeres zu verkleinern.

In diesem Artikel gehe ich durch welche bildgrößen sind und wie man sie definiert.

Wie behandelt WordPress Bilder?

Wenn Sie jemals ein Bild in einen WordPress-Artikel eingefügt haben, sollten Sie über die Bildgrößenauswahl verfügen. Auf diese Weise können Sie kleine, mittlere und große Versionen der Bilder einfügen. Die tatsächlichen Größen für diese kann in den WordPress-Einstellungen geändert werden.

Wenn Sie ein Bild über WordPress hochladen, werden Versionen dieser Bilder generiert und separat gespeichert. Wenn Sie beispielsweise ein 1200 × 800-Bild hochladen, erstellt WordPress möglicherweise 100 × 100, 600 × 400 und 900 × 600-Versionen. Wenn Sie ein Bild einfügen und "Mittel" wählen, wird die aktuelle Mittelversion verwendet, im Gegensatz zu einer verkleinerten Version des Originals.

Das ist enorm vorteilhaft, weil es spart Bandbreite auf dem Server und Verarbeitungszeit auf dem Clientcomputer. Ich finde es nicht verwunderlich, dass das Herunterladen eines 600 × 400-Bildes schneller ist als das Herunterladen eines 1200 × 800-Bildes.

Wenn ein größeres Bild verwendet wird, muss es verkleinert werden, Der Browser muss sich um die Berechnungen kümmern um dies zu ermöglichen. Dies dauert zwar nicht stundenlang, kann aber auf bildlastigen Websites spürbar sein.

Das richtige Bild am richtigen Ort

Das ultimative Ziel sollte es sein Verwenden Sie immer geeignete Bildgrößen. Wenn Sie ein 440 × 380-Bild benötigen, können Sie ein Bild mit dieser exakten Größe vom Server abrufen. Es gibt zwei Hauptbereiche, an denen Sie hochgeladene Bilder verwenden: vorgestellte Bilder und In-Post-Bilder - ich würde Ihnen zunächst raten, sich auf die vorgestellten Bilder zu konzentrieren.

Bei allen visuell gelenkten Artikeln spielt es keine Rolle, ob ein Post-In-Post-Bild 220 Pixel oder 245 Pixel breit ist. Welche Version Sie zur Verfügung haben, ist gleichermaßen verwendbar. Ausgewählte Bilder werden jedoch normalerweise in gängigen Größen angezeigt. Für Artikellisten können Sie ein 178 × 178-Miniaturbild verwenden, für Artikelköpfe können Sie ein Bild mit einer Breite von 1200 × 600 verwenden.

Zusätzlich zu diesen Optionen möchten Sie möglicherweise auch ein separates Miniaturbild / Medium / Großformat wie in den Einstellungen bis definiert verwenden Sie haben einfachen Zugriff auf bestimmte Abmessungen beim Hinzufügen von Bildern zu Beiträgen.

Es läuft also alles darauf hinaus: Wäre es nicht toll, wenn wir zwei zusätzliche Bildgrößen hätten, die wir für vorgestellte Bilder verwenden könnten? Diese Bildgrößen werden beim Hochladen eines Bildes neben dem Rest erstellt. Die gute Nachricht ist, dass Sie in WordPress eine recht einfache Funktion haben.

Erstellen von Bildgrößen

Mit der Funktion add_image_size () Sie können alle Bildgrößen definieren, die Ihre Website benötigt. Lassen Sie uns die beiden oben genannten Beispiele erstellen. Fügen Sie den Code unten in die Datei functions.php oder in die Datei eines Plugins ein.

 add_image_size ('featured_thumbnail', 178, 178, true); add_image_size ('featured_wide', 1200, 600); 

Wie Sie sehen, benötigt diese Funktion vier Parameter. Mit dem ersten Parameter können Sie einen Namen für die Größe festlegen. Der zweite Parameter ist die maximale Breite, der dritte die maximale Höhe. Der vierte Parameter legt festes Zuschneiden fest. Wenn auf true gesetzt, Das Bild wird in der von Ihnen angegebenen exakten Größe erstellt.

Sobald dies zu Ihrem Design oder Plugin hinzugefügt wurde, werden zwei neue Versionen jeder hochgeladenen Datei von WordPress erstellt.

Bildgrößen verwenden

Diese Bildgrößen können für eine Reihe von Funktionen verwendet werden, die sich auf das Abrufen von Medien beziehen. Schauen wir uns zuerst die vorgestellten Bilder an. the_post_thumbnail () wird normalerweise verwendet, um das hervorgehobene Bild eines Beitrags anzuzeigen. Der folgende Code kann in eine WordPress-Schleife eingefügt werden:

 the_post_thumbnail ('featured_thumbnail'); 

Mit dem ersten Parameter dieser Funktion können Sie die zu verwendende Bildgröße angeben. Da ich "featured_thumbnail" angegeben habe, wird die 178 × 178-Version dieser Datei verwendet.

Es gibt eine Reihe weiterer Funktionen wie z wp_get_attachment_image ()und wp_get_attachment_image_src () die auch den Parameter für die Bildgröße verwenden. Wenn Sie eine solche Funktion verwenden, sollten Sie immer eine geeignete Bildgröße angeben.

Thumbnails neu erstellen

Wenn Sie bereits über eine Site verfügen, können Sie Ihre Artikel nicht rückwirkend optimieren, indem Sie einfach eine Bildgröße definieren. Bildgrößen werden nur berücksichtigt, wenn ein neues Bild hochgeladen wird. Sie werden daher nicht auf bereits im System vorhandene Bilder angewendet.

Fürchte dich nicht, das Regenerate Thumbnails-Plugin macht die Dinge noch besser! Dieses Plugin kann die Miniaturansichten aller Ihrer Bilder unter Berücksichtigung aller definierten Bildgrößen neu erstellen. Es kann auch ein bestimmtes Bild anvisieren, Das ist nützlich, wenn Sie nur wenige haben oder einige Tests durchführen.

Sobald Ihre Miniaturansichten neu erstellt wurden, sollten die optimierten Versionen in Ihre Site geladen werden. Sie können dies überprüfen, indem Sie die Quelle des Bildes anzeigen. Wenn Sie "example.jpeg" hochgeladen haben und "beispiel.jpeg" als Quelle für das vorgestellte Bild sehen, stimmt etwas nicht. Wenn du siehst “Beispiel: 178 × 178.jpeg” dann ist alles gut; Das optimierte Bild wird angezeigt.

Responsive Bilder

Eine Schwierigkeit bei der Aufrechterhaltung einer optimierten Site ist die Reaktionsfähigkeit. Wenn ich einen Artikel auf dem iPad anzeige, wird ein großes Post-In-Post-Bild verkleinert, da die maximale Breite etwa 786 Pixel beträgt.

Die einfachste Lösung ist die Verwendung eines Plugins wie Hammy. Hammy arbeitet auf der Grundlage der Inhaltsbreite Ihres Designs (im Gegensatz zur Fensterbreite des Browsers) und kann auf dieser Grundlage optimierte Bilder liefern. Dies ist besonders praktisch für mobile Benutzer, bei denen Rechenleistung und Bandbreite ein Problem darstellen können.

Weitere Bildoptimierung

Wie ich bereits in der Einleitung erwähnt habe, gibt es unzählige Möglichkeiten, Bilder zu optimieren. Von Sprites bis zur Bildkomprimierung können viele Techniken verwendet werden, um die Ladezeiten zu reduzieren, die mit Bildern einhergehen. Ashutosh KS hat einen großartigen Artikel mit 9 WordPress-Plugins geschrieben. Zur Verbesserung der Bildleistung schlage ich vor, es zu lesen!

Ich schlage auch einen Blick auf Hassle Free Responsive Images, in dem Sie sehen, wie Sie Unterstützung für das Bildelement hinzufügen. Dies ist etwas, das Sie verwenden möchten, wenn Sie Ihren eigenen Code schreiben möchten.