ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Search
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
Lektüre: Der ultimative Leitfaden zur WordPress-Bildverwaltung
Aktie
Benachrichtigung Zeig mehr
Neuesten Nachrichten
So ändern Sie den Standardbrowser in Windows 11
Wie man
Oppo Find X6 Pro vs. Oppo Find X5 Pro: Was ist neu?
Gegen
Das unbegrenzte Datenangebot für das iPhone 14 ist gerade noch günstiger geworden
Angebote
So richten Sie die Multi-Faktor-Authentifizierung bei NordVPN ein
Wie man
Philips Hue Centris im Test
Technische Bewertungen
Aa
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Aa
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
Search
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Folge uns
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren > Blog > Tutorials > Der ultimative Leitfaden zur WordPress-Bildverwaltung
Tutorials

Der ultimative Leitfaden zur WordPress-Bildverwaltung

Zuletzt aktualisiert: November 18, 2021 2:36 am
ThemeLocal vor 1 Jahr 13 Minuten Mindestlesezeit
Aktie
13 Minuten Mindestlesezeit
Aktie

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.

Contents
Technische und Leistungsoptimierungstipps für WordPress-BilderJPG oder PNG? Verwenden des richtigen BildformatsWann sollte das PNG-Format verwendet werden? Wann sollte man das JPG-Format verwenden?Checkliste zum Hochladen von Archivfotos in Blogs1. Ändern Sie die Größe Ihres Bildes2. EXIF-Daten entfernen3. Als progressives JPG speichern4. Stellen Sie die DPI auf 72 . ein5. Optimieren Sie Ihre BilderBildoptimierungs-Plugins in WordPressEWWW Cloud Image OptimizerTinyPNG WordPress-PluginAbschluss

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.

Verwandter Beitrag

Wie man Siri beibringt, einen Namen zu sagen, indem man die phonetische Schreibweise zur Kontakte-App hinzufügt

Walkie-Talkie auf der Apple Watch funktioniert nicht? 6 einfache Lösungen (2023)

So legen Sie bei der Arbeit ein anderes Layout des iPhone-Startbildschirms fest (2023)

So ändern Sie den Hintergrund auf dem iPhone basierend auf der Tageszeit (2023)

Die 8 besten Tools zur Optimierung von Online-Inhalten für WordPress (2023)

MARKIERTE: der, Leitfaden, ultimative, WordPressBildverwaltung, zur
ThemeLocal November 18, 2021
Teile diesen Artikel
Facebook Twitter Pinterest Whatsapp Whatsapp
Aktie
Was denkst du?
Liebe0
Traurig0
Glücklich0
Schläfrig0
Wütend0
kein Kommentar0
Zwinkern0
Vorheriger Artikel Wie man Downloads mit WordPress mit einem Passwort schützt
Nächster Artikel Verbergen Sie, dass Sie WordPress mit Hide My WP . verwenden
Hinterlasse einen Kommentar

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Berühmter Post

Schnellladung: Der Snapdragon 7 Plus Gen 2 ist in der Lage, aber werden alle Telefone ihn verwenden?
Technische Bewertungen
Eine PS5 Pro könnte Sonys gebrochenes Versprechen endlich einlösen
Technische Bewertungen
Acer Aspire 3 im Test
Technische Bewertungen
Bewertung: Der 5C NFC YubiKey von Yubico funktioniert gut mit Apples Sicherheitsschlüsselfunktion
Technische Bewertungen
So verwenden Sie die Emoji-Suche auf dem iPhone und iPad
Wie man
So fügen Sie Live-Fotos Looping- und Bouncing-Effekte hinzu
Wie man

También podría gustarte

Wie man

Wie man Siri beibringt, einen Namen zu sagen, indem man die phonetische Schreibweise zur Kontakte-App hinzufügt

vor 7 Stunden 2 Minuten Mindestlesezeit
Wie man

Walkie-Talkie auf der Apple Watch funktioniert nicht? 6 einfache Lösungen (2023)

vor 16 Stunden 10 Minuten Mindestlesezeit
Wie man

So legen Sie bei der Arbeit ein anderes Layout des iPhone-Startbildschirms fest (2023)

vor 20 Stunden 4 Minuten Mindestlesezeit
Wie man

So ändern Sie den Hintergrund auf dem iPhone basierend auf der Tageszeit (2023)

vor 1 Tag 6 Minuten Mindestlesezeit
Showcase

Die 8 besten Tools zur Optimierung von Online-Inhalten für WordPress (2023)

vor 3 Tagen 12 Minuten Mindestlesezeit
Technische Bewertungen

Schnellladung: Der Snapdragon 7 Plus Gen 2 ist in der Lage, aber werden alle Telefone ihn verwenden?

vor 3 Tagen 3 Minuten Mindestlesezeit
Technische Bewertungen

Bewertung: Der 5C NFC YubiKey von Yubico funktioniert gut mit Apples Sicherheitsschlüsselfunktion

vor 4 Tagen 9 Minuten Mindestlesezeit
Gegen

Nokia G22 vs. Nokia G21: Was ist der Unterschied?

vor 5 Tagen 9 Minuten Mindestlesezeit
Zeig mehr
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Folge uns

© 2022 Themelocal. Alle Rechte vorbehalten.

  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt

Removed from reading list

Rückgängig machen
Welcome Back!

Sign in to your account

Passwort vergessen?