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

Die Optimierung von Bildern auf einer Website ist eine entmutigende Aufgabe. Sie können wählen, weniger Bilder, komprimierte Bilder, Sprites oder Svg zu verwenden; Die Liste geht weiter. Ein Ort, an dem viele WordPress-Seiten ins Stolpern geraten, ist die Definition von Bildgrößen. Dies ist ein entscheidender Aspekt bei der Optimierung von Content-lastigen Websites .

Bildgrößen sind wichtig, da Bilder automatisch nach den beim Hochladen von Bildern angegebenen Größen erstellt werden. Dadurch wird sichergestellt, dass selbst bei einem Originalbild mit einer Breite von 3000 Pixeln das Bild nie verwendet wird, wenn ein Bild mit 600 Pixeln ausreicht. Idealerweise sollte ein 600 Pixel breiter Bereich ein 600 Pixel breites Bild verwenden, anstatt einen größeren zu verkleinern.

In diesem Artikel werde ich Ihnen zeigen, welche Bildgrößen und wie sie definiert werden.

Wie WordPress Bilder verarbeitet

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

Wenn Sie ein Bild über WordPress hochladen, generiert es Versionen dieser Bilder und speichert sie separat. Wenn Sie beispielsweise ein 1200 × 800 Bild hochladen, kann WordPress 100 × 100, 600 × 400 und 900 × 600 Versionen erstellen. Wenn Sie ein Bild einfügen und "Medium" wählen, wird die tatsächliche Medium-Version verwendet, im Gegensatz zu einer geschrumpften Version des Originals.

Dies ist sehr vorteilhaft, da es Bandbreite auf dem Server und Verarbeitungszeit auf dem Clientcomputer spart . Ich denke, es ist keine Überraschung, dass das Herunterladen eines 600 × 400-Bildes schneller ist als das Herunterladen eines 1200 × 800-Bildes.

Wenn ein größeres Bild verwendet wird, das verkleinert werden muss, muss der Browser die Berechnungen durchführen, um dies zu ermöglichen. Während dies Stunden dauern wird, kann es auf bildlastigen Websites bemerkbar sein.

Das richtige Bild am richtigen Ort

Das ultimative Ziel sollte sein, immer geeignete Bildgrößen zu verwenden . Wenn Sie ein Bild mit der Größe 440 × 380 benötigen, nehmen Sie ein Bild mit dieser genauen Größe vom Server. Es gibt zwei Hauptorte, an denen Sie hochgeladene Bilder verwenden: vorgestellte Bilder und In-Post-Bilder - ich würde Ihnen empfehlen, sich zuerst auf ausgewählte Bilder zu konzentrieren.

In allen außer den am meisten visuell ausgerichteten Artikeln ist es nicht wirklich wichtig, ob ein In-Post-Bild 220px oder 245px breit ist. Welche Version auch immer verfügbar ist, wäre gleichermaßen nutzbar. Ausgewählte Bilder werden jedoch in der Regel in gängigen Größen angezeigt. Für Artikellisten können Sie eine Miniaturansicht von 178 × 178 verwenden, für Artikelkopfzeilen können Sie ein 1200 × 600 breites Bild verwenden.

Darüber hinaus können Sie auch eine separate Miniaturansicht / mittlere / große Größe verwenden, wie in den Einstellungen definiert, um Ihnen beim Hinzufügen von Bildern zu Posts einen einfachen Zugriff auf bestimmte Dimensionen zu ermöglichen.

Worum es also geht ist das: 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 würden beim Hochladen eines Bildes direkt neben dem Rest erstellt. Die gute Nachricht ist, dass WordPress Sie mit einer ziemlich einfachen Funktion abgedeckt hat.

Erstellen von Bildgrößen

Mit der Funktion add_image_size () können Sie alle Bildgrößen definieren, die Ihre Website benötigt. Lassen Sie uns die beiden oben genannten Beispiele erstellen. Fügen Sie den folgenden Code in die Datei functions.php Ihres Themes 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 können, 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, die dritte, die maximale Höhe. Der vierte Parameter legt festes Zuschneiden fest. Wenn der Wert auf "True" gesetzt ist, wird das Bild genau in der von Ihnen angegebenen Größe erstellt .

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

Verwenden von Bildgrößen

Diese Bildgrößen können in einer Reihe von Funktionen verwendet werden, die sich mit dem Abrufen von Medien befassen. Sehen wir uns zuerst die vorgestellten Bilder an. the_post_thumbnail () wird häufig verwendet, um das vorgestellte Bild eines Posts 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 festlegen. Da ich "featured_thumbnail" angegeben habe, wird die 178 × 178-Version dieser Datei verwendet.

Es gibt eine Reihe weiterer Funktionen wie wp_get_attachment_image () und wp_get_attachment_image_src (), die ebenfalls den Parameter image size verwenden. Wann immer Sie eine solche Funktion verwenden, sollten Sie immer eine geeignete Bildgröße angeben.

Miniaturbilder neu generieren

Wenn Sie bereits eine Website eingerichtet haben, können Sie Ihre Artikel nicht nachträglich optimieren, indem Sie lediglich eine Bildgröße definieren. Bildgrößen werden nur berücksichtigt, wenn ein neues Bild hochgeladen wird, sodass sie nicht auf Bilder angewendet werden, die sich bereits im System befinden.

Fürchte dich nicht, das Plugin "Regenerate Thumbnails" wird alles besser machen! Dieses Plugin kann die Thumbnails für alle Ihre Bilder neu generieren, wobei alle definierten Bildgrößen berücksichtigt werden. Es kann auch auf ein bestimmtes Bild ausgerichtet sein, was nützlich ist, wenn Sie nur ein paar Bilder haben, oder Sie testen es.

Sobald Ihre Thumbnails neu generiert wurden, sollten Sie die optimierten Versionen auf Ihrer Site sehen. Sie können dies überprüfen, indem Sie die Quelle des Bildes anzeigen. Wenn du 'example.jpeg' hochgeladen hast und du 'example.jpeg' als Quelle für dein Bild siehst, stimmt etwas nicht. Wenn Sie "Beispiel-178 × 178.jpeg" sehen, ist alles in Ordnung; Das optimierte Bild wird angezeigt.

Responsive Bilder

Eine Schwierigkeit bei der Aufrechterhaltung einer optimierten Site besteht in der Reaktionsfähigkeit. Wenn ich einen Artikel auf dem iPad anschaue, wird ein In-Post-Bild einer großen Größe verkleinert, da die maximale Breite 786 px oder so beträgt.

Die einfachste Lösung ist ein Plugin wie Hammy zu verwenden. Hammy arbeitet basierend auf der Inhaltsbreite Ihres Themas (im Gegensatz zur Fensterbreite des Browsers) und kann darauf basierend optimierte Bilder bereitstellen. Dies ist besonders praktisch für mobile Benutzer, bei denen Verarbeitungsleistung 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 Bildkompression können viele Techniken verwendet werden, um die Ladezeiten zu verringern, die mit Bildern einhergehen. Ashutosh KS hat einen großartigen Artikel geschrieben, in dem 9 WordPress Plugins vorgestellt werden, um die Bildleistung zu verbessern. Ich schlage vor, es zu lesen!

Ich schlage auch vor, einen Blick auf Hassle Free Responsive Images zu werfen, die Ihnen zeigt, wie Sie Unterstützung für das Bildelement hinzufügen, etwas, das Sie verwenden möchten, wenn Sie Ihren eigenen Code schreiben möchten.

Wasser-Foto-Manipulation: 28 erstaunliche Wasser-Kunstwerke

Wie oft würden Sie sich wirklich ernsthaft mit Wasser beschäftigen? Als Mensch, der in der Mutter Erde lebt, sehen wir überall das Wasser. Es ist eines der wichtigsten Dinge, um uns am Leben zu erhalten, aber es sieht so gewöhnlich aus, dass wir es als transparentes Ding behandeln, bis ein ungewöhnlicher Künstler die Schönheit des Wassers erkannt und in eine immense visuelle Kunst verwandelt hat.In die

(Tech- und Design-Tipps)

Design Vs Art - Der Unterschied und warum es wichtig ist

Design gegen Kunst. Was ist der Unterschied und wie wirkt sich das auf deine Karriere als Designer aus? Wir alle wissen, dass es einen Unterschied gibt, und die außerhalb unserer Branche können es vielleicht nicht sehen . Ihre Eltern könnten Sie zum Beispiel als "Künstler" bezeichnen, obwohl Sie ein professioneller Designer sind.Wie

(Tech- und Design-Tipps)