Der ultimative Leitfaden für WordPress Image Management

  1. 1. Derzeit lesen: Der ultimative Leitfaden für WordPress Image Management
  2. 2. 3 weniger bekannte Tipps zur Bildverwaltung in WordPress
  3. 3. WordPress Image SEO Fehler & wie man sie behebt

Die visuelle Wirkung ist eines der wichtigsten Merkmale eines wirkungsvollen Content-Marketing-Plans. Willkommen zu einer brandneuen Beitragsreihe – Der ultimative Leitfaden zur Bildverwaltung in WordPress.


Es wurde entwickelt, um Ihnen die Tools zur Verfügung zu stellen, die Sie zur Verwaltung Ihrer Bildressourcen in WordPress benötigen – direkt von technischen Optimierungen über SEO, CDN-Integration bis hin zur Bibliotheksverwaltung. In diesem mehrteiligen Handbuch werden nur die Methoden, Tutorials, Plugins und Themen empfohlen, die wir ausprobiert haben oder die von Branchenexperten empfohlen werden.

Wir werden auch vermeiden, blind Plugins vorzuschlagen, die im WordPress-Repository häufig verwendet werden. Wir empfehlen vielmehr diejenigen, die die perfekte Übereinstimmung zwischen Wertversprechen und Leistungsoptimierung finden.

Sie fragen sich vielleicht, wie wir das machen würden. Über 24.000 Downloads unseres Total – Responsive Multipurpose WordPress-Themas in ThemeForest sind möglicherweise kein guter Indikator.

Nun, wir haben die besten Blogs der branchenführenden WordPress-Hosting-Unternehmen (wie WPEngine und Pagely) und lernte was Sie Dies wurde erlernt, als Milliarden von Seitenaufrufen für Tausende hochkarätiger Kunden bereitgestellt wurden. Wir haben all diese Informationen für Sie in winzigen Absätzen und Aufzählungszeichen für Ihren Online-Erfolg komprimiert. Jetzt fangen wir an?

Tipps zur technischen Optimierung und Leistungsoptimierung für WordPress-Bilder

In WordPress stehen einige Optionen zur Bildoptimierung zur Verfügung nicht den Webserver unnötig belasten. Wir werden uns einige der häufigsten Tipps zur Bildoptimierung ansehen, die jeder kennt sollte Folgen Sie, zusammen mit einigen anderen, die zu besonderen Anlässen nützlich sind.

JPG oder PNG? Verwenden des richtigen Bildformats

Der allererste Schritt in der Bildoptimierung ist ein guter Anfang. Sie sagen, dass eine gut begonnene Arbeit zur Hälfte erledigt ist. Genau das ist bei der Bildoptimierung in WordPress der Fall. Alles beginnt mit der Auswahl des richtigen Bildformats. JPG und PNG sind die beiden häufigsten Bildformate, die online im Content-Marketing verwendet werden.

Der Trick besteht darin, zu verstehen, welches Format für jeden Bildtyp ausgewählt werden muss. Wenn Sie das falsche auswählen, erhöht sich die Bildgröße erheblich. Hier sind die Regeln.

Wann wird das PNG-Format verwendet??

Verwenden Sie für flache Bilder wie Vektoren, Illustrationen, Schriftarten, Logos, Banner, Formen, Banner usw., die in einem Vektorformat wie EPS oder Adobe Illustrator (.AI) erstellt wurden, ein PNG. Am Ende erhalten Sie ein optimiertes Bild mit nahezu null Qualitätsverlust. Wenn Sie in diesem Fall ein JPG verwenden, gehen Sie keine Kompromisse bei der Größe ein, aber möglicherweise geht Ihnen die Qualität aus. Tatsächlich wäre das PNG bei höheren Auflösungen ohne Qualitätsverlust leichter. Das JPG würde leiden.

Nehmen Sie sein Beispiel. Wir erstellen ein flaches Bild mit 5000 Pixel und speichern es als JPG und PNG.

Beispielbild für den Test

Flaches Bild
JPG233 KB
PNG42 KB

Kurz gesagt, das JPG-Bild war bei gleicher Auflösung 455% höher als das PNG.

Wann wird das JPG-Format verwendet??

Verwenden Sie für alles andere ein JPG. Verwenden Sie JPG, wenn Sie kein Flach- oder Vektorbild verwenden. Fotos von Personen, Orten, Dingen usw. – verwenden Sie JPG. Fast alle Fotos in dieser Kategorie verwenden JPG. Wenn Sie PNG anstelle eines JPG verwenden, werden Sie auf einige stoßen schwerwiegende Leistungsprobleme.

In diesem Fall müssen Sie besonders vorsichtig sein. Wenn Sie ein JPG anstelle eines PNG verwenden, entsteht nur wenig oder gar kein Schaden. Wenn Sie jedoch im Falle eines JPG ein blutiges PNG verwenden, schaffen Sie viel Raum für Schäden. Schauen Sie sich dieses Beispiel an.

Installieren: Ich habe dieses Bild von Shutterstock heruntergeladen, das ungefähr wiegt 10,3 MB mit einer Auflösung von 6149 × 4562 – Im Wesentlichen ein 28MP Stock Foto. Sofern wir nicht so etwas wie eine druckfertige Broschüre vorbereiten, verwenden wir in unseren Blogs nicht die volle Auflösung des Fotos. Nehmen wir an, wir haben eine feste maximale Bildgröße für unseren Blog von 1600px.

Experiment: Wir werden die Größe des Quellbilds auf 1600px ändern und es erstellen vier Versionen – zwei für das PNG-Format und zwei für JPG. Für jedes Format (JPG / PNG) verwenden wir die (a) empfohlenen Komprimierungseinstellungen und die (b) maximalen Komprimierungseinstellungen.

Beispielbild für das JEPG-Experiment

Ergebnisse: Hier sind die Ergebnisse in einer schönen Tabelle, der Sie folgen können:

Originalbild (KB)

10870
Zielauflösung1600px
Formatdie EinstellungenGröße (KB)% Die Ermäßigung
JPGProgressiv, Qualität = 8523198%
Nicht progressiv, Qualität = 8523998%
PNGKomprimierung = 0557549%
Komprimierung = 6185283%
Komprimierung = 9175084%

Auf den ersten Blick könnte man denken, dass 84% ​​PNG komprimiert sind gut genug im Vergleich zu den 98% in JPG erreicht. Das ist nicht ganz richtig. Wenn Sie sich die Bildgrößen genauer ansehen, werden Sie feststellen, dass das PNG etwas mehr als 1,7 MB wiegt, während das JPG 0,22 MB beträgt. Was bedeutet, die PNG ist 8 mal schwerer als das JPG Version des gleichen Bildes mit der gleichen Auflösung. Mit anderen Worten, bei gleichem Bild und gleicher Auflösung ist die JPG-Version 700% leichter als die PNG-Version!

Bei gleichem Bild und gleicher Auflösung ist die JPG-Version 700% leichter als die PNG-Version!

Verwenden Sie als Faustregel PNG für flache Bilder und JPG für alles andere.

Checkliste zum Hochladen von Stock-Fotos in Blogs

Es gibt unzählige Blogs, in denen Redakteure die Vollauflösung des Bildes direkt in ihre Blog-Beiträge hochladen. Hier sind einige Hinweise zum Hochladen von Fotos in Blogs. Ich benutze eine kostenlose Software namens IrfanView, die viele tolle Funktionen hat. Ich werde jeden für Sie illustrieren.

1. Ändern Sie die Größe Ihres Bildes

Zunächst müssen Sie eine maximale Auflösung für alle Ihre Bilder auf Ihrer WordPress-Site festlegen. Jedes Bild über dieser Dimension wird in der Größe geändert, es sei denn, es ist natürlich kleiner.

IrfanView hat ein Stapelkonvertierung Funktion (drücken Sie B nach dem Starten der App), mit der eine Liste von Funktionen auf einmal auf eine Reihe von Bildern angewendet werden kann. Für unsere Zwecke umfassen die Funktionen das Ändern der Größe, das Zuschneiden, das Hinzufügen eines Wasserzeichens usw..

2. Entfernen Sie EXIF-Daten

Fotos, die mit einer normalen Kamera angeklickt wurden, sind stark eingebettet Metadaten – das sind nur winzige (aber nützliche) Informationen über das Bild. Beispiele für solche Informationen sind GPS-Koordinaten des Ortes, an dem auf das Bild geklickt wurde, ISO-Einstellungen, Kameramodell usw..

EXIF-Informationen eines zufälligen Fotos, das auf meinem iPhone angeklickt wurde

Sofern wir nicht mit Fotos bloggen, möchten wir solche Informationen im Allgemeinen nicht im Bild eines Blogposts. Wenn Sie Bilder in IrfanView speichern oder stapelweise konvertieren, werden EXIF-Daten normalerweise entfernt. Dies trägt zur Wahrung Ihrer Privatsphäre bei – insbesondere Ihres physischen Standorts. Der Größenunterschied für die meisten Fotos beträgt ca. 200-300 KB pro Bild.

3. Speichern Sie als progressives JPG

IrfanView speicherte JEPGs standardmäßig als progressiv

Ein progressives JPG-Bild lädt das Bild Schicht für Schicht – wodurch die Ladezeit verkürzt wird. Content Delivery-Netzwerke wie KeyCDN wurden gestartet automatisch konvertieren JPGs zu progressiven JPGs, um die Bildübertragung zu beschleunigen und die Speicherung zu optimieren.

4. Stellen Sie die DPI auf 72 ein

DPI oder Punkte pro Zoll sind ein Maß für die Bildqualität. Für Druckmaterial wird ein hoher DPI-Wert verwendet. Für das Web ist ein Wert von 72 perfekt.

Okay, also fassen Sie die obigen Einstellungen zusammen. Nachfolgend sind meine Einstellungen aufgeführt. Ich führe diese Funktion aus, sobald ich alle Bilder für meinen Blog-Beitrag zusammengestellt habe – bevor ich die Bilder zu WordPress hochlade.

Stapelkonvertierungseinstellungen in IrfanView für ein typisches WordPress-Blog

5. Optimieren Sie Ihre Bilder

Unabhängig davon, ob Sie JPG oder PNG verwendet haben, müssen Sie Ihr Bild optimieren. Es gibt viele wirklich großartige Online-Tools, mit denen Sie Ihre Bilder optimieren und ein Bild speichern können Menge Raum.

Ich spreche von Diensten wie TinyPNG oder TinyJPG, das einfach Ihre PNG / JPG-Bilder mit einigen fortschrittlichen Algorithmen optimiert.

Optimierte Bilder in TinyPNG

Um ehrlich zu sein, ich weiß nicht, wie die Algorithmen funktionieren, aber sie funktionieren und ich konnte immer eine Reduzierung von 50-70% erzielen, egal wie gut ich sie speichere.

Sie können auch die kaufen Pro-Version des Dienstes als Photoshop-Plugin für 50 USD. Es sind sowohl Windows- als auch Mac-Versionen verfügbar. Für meine Zwecke die Online-Version (gekoppelt mit der In Dropbox speichern Funktion) funktioniert am besten.

Bildoptimierungs-Plugins in WordPress

Bisher haben wir die Schritte des Erhaltens gelernt gestartet Recht. Was ist, wenn Sie jetzt auf diesen Beitrag gestoßen sind und bereits Hunderte von Bildern hochgeladen haben? Nun, hier sind einige Plugins, die Ihnen dabei helfen sollen:

EWWW Cloud Image Optimizer

Dieses Plugin ist eine Abzweigung des Originals und äußerst beliebt EWWW Image Optimizer Plugin. Mit über 500.000 Downloads können Sie mit diesen Plugins zur Bildoptimierung Bilder optimieren, wenn diese in WordPress hochgeladen werden.

Was es von der Konkurrenz unterscheidet, ist seine Fähigkeit, vorhandene Bilder in Ihrer Datenbank zu optimieren, was zu einer enormen Leistungssteigerung führt. Dies spart außerdem erhebliche Bandbreitenkosten, da der größte Teil Ihres Datenverkehrs aus alten Artikeln stammt. Optional können Sie auch die verlustbehaftete Bildkomprimierung aktivieren (die mit bloßem Auge kaum sichtbar ist), aber viel Platz und Bandbreite sparen. In Bezug auf die Optimierungstechnologie kann TinyPNG oder die API von TinyJPG verwendet werden, um neue und vorhandene Bilder zu optimieren.

Aber hier ist das Problem. Viele Hosts (einschließlich WPEngine) erlauben das EWWW Image Optimization-Plugin nicht, da es den Server stark zusätzlich belastet. Wenn Sie es irgendwie schaffen, die Servereinschränkungen zu umgehen, besteht die Gefahr, dass Ihr Konto aufgrund von Richtlinienverstößen gesperrt wird.

Hier ist die EWWW Cloud Optimizer Plugin kommt zum Spielen. Es verlagert alle zur Optimierung der Bilder erforderlichen Berechnungen in die Cloud und ersetzt einfach die nicht optimierten Bilder durch die optimierten. Da für die Komprimierung praktisch keine CPU-Leistung verwendet wird, wird der Server nicht zusätzlich belastet. Dies gilt für alle neuen und vorhandenen Bildkonvertierungen auf Ihrer WordPress-Site.

Pläne & Preise: Wie zu erwarten ist, ist das Plugin nicht kostenlos, da der Entwickler die Cloud-Computing-Rechnungen bezahlen muss. Die Preisgestaltung ist äußerst vernünftig und kostet 9 USD für 3000 Bildoptimierungen für ein Prepaid-Abonnement.

Das EWWW Cloud Optimizer Plugin ist wunderschön gestaltet. Der Medienscanner zeigt an, wie viele Bilder Sie vor dem Kauf optimieren müssen. Basierend auf den Images Ihres Servers können Sie einen relevanten Prepaid-Tarif erwerben.

TinyPNG WordPress Plugin

Dies ist ein weiteres großartiges Plugin zur Bildoptimierung, das direkt in den TinyPNG / JPG-Dienst integriert wird. Es werden automatisch neue und vorhandene Bilder in die WordPress-Medienbibliothek hochgeladen. Dieses Plugin bietet einen kostenlosen Plan mit 100 Bildoptimierungen pro Monat.

Freddy hatte vor einiger Zeit eine Liste mit Plugins zur Bildoptimierung zusammengestellt. Lesen Sie diese, wenn Sie mehr über das Thema erfahren möchten.

Fazit

Dies bringt uns zum Ende des ersten Beitrags in dieser Reihe. Im nächsten Artikel erfahren Sie, wie einige weniger bekannte Tipps und Tricks zur Bildoptimierung wie das Verhindern von Hotlinks, das Abrufen von Bildern von Remote-Servern und dergleichen. Haben Sie einige Tipps unter der richtig loslegen Kategorie? Lass es uns in den Kommentaren unten wissen.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map