Visuelle Wirkung ist eines der wichtigsten Merkmale, wenn es um einen wirkungsvollen Content-Marketing-Plan geht. Willkommen zu einer brandneuen Post-Serie – The Ultimate Guide to Image Management in WordPress.
Es wurde entwickelt, um Ihnen die Tools zur Verfügung zu stellen, die Sie zur Verwaltung Ihrer Bildassets in WordPress benötigen – angefangen bei technischen Optimierungen, SEO, CDN-Integration und Bibliotheksverwaltung. In diesem mehrteiligen Leitfaden empfehlen wir nur die Methoden, Tutorials, Plugins und Themes, die wir ausprobiert haben oder von Branchenexperten empfohlen werden.
Wir werden auch vermeiden, blind Plugins vorzuschlagen, die eine hohe Nutzung im WordPress-Repository haben. Wir empfehlen vielmehr diejenigen, die den perfekten Akkord zwischen Wertversprechen und Leistungsoptimierung treffen.
Sie fragen sich vielleicht, wie wir das anstellen würden. 24.000+ Downloads unserer Total – Responsive Mehrzweck-WordPress Theme in ThemeForest ist möglicherweise kein guter Indikator.
Nun, wir haben die besten Blogs der branchenführenden WordPress-Hosting-Unternehmen (wie WPEngine und Pagely) und was gelernt Sie bei der Bereitstellung von Milliarden von Seitenaufrufen bei Tausenden von hochkarätigen Kunden gelernt. Wir haben all diese Informationen für Sie in winzige Absätze und Aufzählungspunkte für Ihren Online-Erfolg komprimiert. Jetzt fangen wir an, ja?
Technische und Leistungsoptimierungstipps für WordPress-Bilder
Es gibt einige Bildoptimierungsoptionen in WordPress, die dies tun nicht den Webserver unnötig belasten. Wir werden uns einige der häufigsten Tipps zur Bildoptimierung ansehen, die jeder sollen folgen, zusammen mit einigen anderen, die sich bei besonderen Anlässen als nützlich erweisen.
JPG oder PNG? Verwenden des richtigen Bildformats
Der allererste Schritt bei der Bildoptimierung ist ein guter Anfang. Sie sagen, eine gut begonnene Arbeit ist halb getan. Genau das ist bei der Bildoptimierung in WordPress der Fall. Alles beginnt mit der Auswahl des richtigen Bildformats. JPG und PNG sind die beiden am häufigsten verwendeten Bildformate im Online-Content-Marketing.
Der Trick besteht darin, zu verstehen, welches Format für jeden Bildtyp zu wählen ist. Die Auswahl des falschen Bildes führt zu einer monumentalen Vergrößerung der Bildgröße. Hier sind die Regeln.
Wann sollte das PNG-Format verwendet werden?
Verwenden Sie für flache Bilder – wie Vektoren, Illustrationen, Schriftarten, Logos, Banner, Formen, Banner usw. – alles, was in einem Vektorformat wie EPS oder Adobe Illustrator (.AI) erstellt wurde, ein PNG. Am Ende erhalten Sie ein optimiertes Bild ohne Qualitätsverlust. Wenn Sie in diesem Fall ein JPG verwenden, gehen Sie keine Kompromisse bei der Größe ein, aber möglicherweise geht die Qualität aus. Tatsächlich wäre das PNG bei höheren Auflösungen ohne Qualitätsverlust heller. Das JPG würde darunter leiden.
Nehmen Sie sein Beispiel. Wir erstellen ein flaches Bild mit 5000px und speichern es als JPG und PNG.
Beispielbild für den Test verwendet
| Flaches Bild | |
| JPG | 233KB |
| PNG | 42KB |
Kurz gesagt, das JPG-Bild war bei gleicher Auflösung um 455% höher als das PNG.
Wann sollte man das JPG-Format verwenden?
Verwenden Sie für alles andere ein JPG. Alles andere als ein flaches oder Vektorbild, verwenden Sie JPG. Fotos von Personen, Orten, Dingen usw. – verwenden Sie JPG. Fast alle Stockfotos in dieser Kategorie verwenden JPG. Wenn Sie PNG anstelle von JPG verwenden, würden Sie auf einige stoßen ernsthafte Leistungsprobleme.
In diesem Fall müssen Sie besonders vorsichtig sein. Wenn Sie ein JPG anstelle eines PNG verwenden, entsteht kaum oder kein Schaden. Wer jedoch bei einem JPG ein blutiges PNG verwendet, schafft viel Raum für Beschädigungen. Sehen Sie sich dieses Beispiel an.
Aufstellen: Ich habe dieses Bild von Shutterstock heruntergeladen, das ungefähr wiegt 10,3 MB bei einer Auflösung von 6149×4562 – im Wesentlichen ein 28MP-Stockfoto. Sofern wir nicht so etwas wie eine druckfertige Broschüre vorbereiten, verwenden wir in unseren Blogs nicht die volle Auflösung des Fotos. Sagen wir, wir haben eine feste maximale Bildgröße unseres Blogs von 1600px.
Experiment: Wir ändern die Größe des Quellbilds auf 1600px und 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 JEPG-Experiment
Ergebnisse: Hier sind die Ergebnisse in einer schönen Grafik, die Sie verfolgen können:
|
Originalbild (KB) |
10870 | ||
| Zielauflösung | 1600px | ||
| Format | Einstellungen | Größe (KB) | % Die Ermäßigung |
| JPG | Progressiv, Qualität = 85 | 231 | 98% |
| Nicht progressiv, Qualität = 85 | 239 | 98% | |
| PNG | Kompression = 0 | 5575 | 49% |
| Kompression = 6 | 1852 | 83% | |
| Kompression = 9 | 1750 | 84% | |
Auf den ersten Blick könnte man meinen, dass 84% Kompression von PNG ist gut genug gegenüber den 98%, die in JPG erreicht wurden. Das stimmt nicht ganz. Schaut man sich die Bildgrößen genauer an, stellt man fest, 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 JPG Version des gleichen Bildes in der gleichen Auflösung. Mit anderen Worten, bei gleichem Bild und gleicher Auflösung ist die JPG-Version 700% leichter als die PNG!
Bei gleichem Bild und gleicher Auflösung ist die JPG-Version 700% leichter als die PNG!
Als Faustregel gilt: Verwenden Sie PNG für flache Bilder und JPG für alles andere.
Checkliste zum Hochladen von Archivfotos in Blogs
Es gibt unzählige Blogs, in denen Redakteure die Vollauflösung des Bildes direkt in ihren Blog-Posts hochladen. Hier sind ein paar Hinweise zum Hochladen von Archivfotos in Blogs. Ich verwende eine kostenlose Software namens IrfanView, die viele tolle Funktionen bietet. 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 oberhalb dieser Dimension würde in der Größe geändert, es sei denn, es ist natürlich kleiner.
IrfanView hat ein Batch-Konvertierung Funktion (drücken Sie B nach dem Starten der App), die eine Liste von Funktionen auf eine Reihe von Bildern auf einmal anwenden kann. Für unsere Zwecke umfassen die Funktionen die Größenänderung, das Zuschneiden, das Hinzufügen eines Wasserzeichens usw.
2. EXIF-Daten entfernen
Fotos, die auf einer normalen Kamera angeklickt wurden, haben viele eingebettete Bilder Metadaten – das sind nur winzige (aber nützliche) Informationen über das Bild. Beispiele für solche Informationen sind GPS-Koordinaten des Ortes, an dem das Bild angeklickt wurde, ISO-Einstellungen, Kameramodell usw.
EXIF-Info eines zufälligen Fotos, das auf meinem iPhone angeklickt wurde
Sofern wir nicht mit Fotoblogs arbeiten, möchten wir solche Informationen im Allgemeinen nicht im Bild eines Blogbeitrags. Wenn Sie Bilder in IrfanView speichern oder stapelweise konvertieren, werden EXIF-Daten normalerweise entfernt. Dies hilft beim Schutz Ihrer Privatsphäre – insbesondere Ihres physischen Standorts. Der Größenunterschied für die meisten Fotos beträgt etwa 200-300 KB pro Bild.
3. Als progressives JPG speichern
IrfanView hat JEPGs standardmäßig als progressiv gespeichert
Ein progressives JPG-Bild lädt das Bild Schicht für Schicht – und beschleunigt so die Ladezeit. Content Delivery Networks wie KeyCDN haben damit begonnen, JPGs automatisch in progressive JPGs umzuwandeln, um die Bildbereitstellung zu beschleunigen und den Speicher zu optimieren.
4. Stellen Sie die DPI auf 72 . ein
DPI oder Punkte pro Zoll ist ein Maß für die Qualität des Bildes. Für Druckmaterial wird ein hoher DPI-Wert verwendet. Für das Web ist ein Wert von 72 perfekt.
Okay, also fasse ich das Obige zusammen, im Folgenden sind meine Einstellungen. Ich führe diese Funktion aus, sobald ich alle Bilder für meinen Blogbeitrag zusammengestellt habe – bevor ich die Bilder in WordPress hochlade.
Batch-Konvertierungseinstellungen in IrfanView für ein typisches WordPress-Blog
5. Optimieren Sie Ihre Bilder
Egal, ob Sie JPG oder PNG verwendet haben, Sie müssen Ihr Bild optimieren. Es gibt viele wirklich tolle Online-Tools, mit denen Sie Ihre Bilder optimieren und Geld sparen 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, weiß ich nicht, wie die Algorithmen funktionieren, aber sie tun es und ich konnte immer eine Reduzierung von 50-70% erzielen, egal wie ich sie am besten speichere.
Sie können die auch 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 ist die Online-Version (gekoppelt mit dem In Dropbox speichern Funktion) funktioniert am besten.
Bildoptimierungs-Plugins in WordPress
Bisher haben wir die Schritte zum Erhalten gelernt gestartet rechts. Was ist, wenn Sie jetzt über diesen Beitrag gestolpert sind und bereits Hunderte von Bildern hochgeladen haben? Nun, hier sind einige Plugins, die Ihnen dabei helfen:
EWWW Cloud Image Optimizer
Dieses Plugin ist eine Abzweigung des Originals und sehr beliebt EWWW-Bildoptimierungstool Plugin. Mit über 500.000 Downloads können Sie mit diesen Bildoptimierungs-Plugins Bilder optimieren, während sie in WordPress hochgeladen werden.
Was es von der Konkurrenz unterscheidet, ist seine Fähigkeit, vorhandene Bilder in Ihrer Datenbank zu optimieren, was zu einem enormen Leistungsschub führt. Es spart auch erhebliche Bandbreitenkosten, da der größte Teil Ihres Datenverkehrs von alten Artikeln stammt. Sie können optional auch die verlustbehaftete Bildkomprimierung aktivieren (die mit bloßem Auge kaum sichtbar ist), aber viel Platz und Bandbreite sparen kann. In Bezug auf die Optimierungstechnologie kann es die API von TinyPNG oder TinyJPG verwenden, um neue und vorhandene Bilder zu optimieren.
Aber hier ist das Problem. Viele Hosts (einschließlich WPEngine) erlauben das EWWW-Bildoptimierungs-Plugin nicht, da es den Server stark zusätzlich belastet. Wenn Sie es irgendwie schaffen, die Serverbeschränkungen zu umgehen, riskieren Sie, dass Ihr Konto aufgrund von Richtlinienverstößen gesperrt wird.
Hier ist der EWWW-Cloud-Optimierer Plugin kommt zum Einsatz. 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 bestehenden Bildkonvertierungen in Ihrer WordPress-Site.
Pläne & Preise: Wie zu erwarten, ist das Plugin nicht kostenlos, da der Entwickler die Cloud-Computing-Rechnungen bezahlen muss. Allerdings ist die Preisgestaltung ist mit 9 USD für 3000 Bildoptimierungen für ein Prepaid-Abonnement äußerst vernünftig.
Das EWWW Cloud Optimizer-Plugin ist wunderschön gestaltet. Der Medienscanner sagt Ihnen, wie viele Bilder Sie vor dem Kauf optimieren müssen. Basierend auf den Bildern Ihres Servers können Sie einen entsprechenden Prepaid-Plan erwerben.
TinyPNG WordPress-Plugin
Dies ist ein weiteres großartiges Bildoptimierungs-Plugin, das sich direkt in den TinyPNG/JPG-Dienst integriert. 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 Bildoptimierungs-Plugins zusammengestellt – lesen Sie sie, wenn Sie mehr zu diesem Thema wissen möchten.
Abschluss
Damit sind wir am Ende des ersten Beitrags dieser Reihe. Im nächsten Artikel erfahren Sie, wie Sie einige weniger bekannte Tipps und Tricks zur Bildoptimierung wie das Verhindern von Hotlinking, das Abrufen von Bildern von Remote-Servern und dergleichen. Hast du ein paar Tipps unter der richtig loslegen Kategorie? Lass es uns in den Kommentaren unten wissen.
